Vue Swirl (loading component)

Easy to use loading animation package in vuejs.

• Contact

Browser Support

Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔	11 ✔

Installing

Package manager

Using npm:

$ npm install vue-swirl

Using yarn:

$ yarn add vue-swirl

After the package is installed, include it in your project using import or require in the main.js folder in the main directory:

import VueSwirl from 'vue-swirl';

then use the folder you imported into the same folder (main.js):

app.use(VueSwirl);
// Or
appInstance.use(VueSwirl);

Usage

To use this package, after completing the import, enter any component and add <vue-swirl></vue-swirl> to the beginning of any element.

<template>
    <div>
        <h1>Vue Swirl!</h1>
        <vue-swirl>   
            <p>A best loading package.</p>
        </vue-swirl>   
    </div>
</templa

type

• block
• circle (default)
• bars
• dots

color

• the code of each color you want or its full name in html. (red, #FFFF ..)
• #191919 default

Example

    <vue-swirl type="block" color="#191919">   
        /////
    </vue-swirl>   

Resources

• Website
• VueJs
• Vite
• Volar

Credits

vue-swirl is heavily influenced by loading gifs and .svg animations

License

emresolmaz.com.tr