The spinkit library provides a collection of pretty CSS based loading spinners for Vue.js applications.
How to use it:
1. Import and register the spinkit.
import Vue from 'vue'
import Spinner from 'vue-spinkit'
Vue.component('Spinner', Spinner)
2. Add a loading spinner of your choice to the app. All possible spinner names:
- circle
- cube-grid
- wave
- folding-cube
- three-bounce
- double-bounce
- wandering-cubes
- chasing-dots
- rotating-plane
- pulse
- wordpress
- fading-circle
- square-spin
- ball-grid-beat
- ball-grid-pulse
- line-spin-fade-loader
- ball-spin-fade-loader
- ball-pulse-rise
- line-scale
- line-scale-pulse-out
- line-scale-pulse-out-rapid
- pacman
- line-scale-party
- ball-triangle-path
- ball-scale-multiple
- ball-scale-ripple-multiple
- ball-pulse-sync
- ball-pulse
- ball-beat
- ball-zig-zag
- ball-zig-zag-deflect
- ball-clip-rotate-pulse
- ball-clip-rotate-multiple
- ball-clip-rotate
- ball-scale-ripple
- triangle-skew-spin
- circle-solid-spin
- dual-ring
- heart
- ring
- roller
- ellipsis
- grid
- hourglass
- ripple
- loadbar
- hydrogen
- clock
- circle-fade
- moon
<Spinner name="circle" color="red"/>
3. Available component props.
name: {
type: String,
default: 'three-bounce'
},
color: {
type: String,
default: ''
},
noFadeIn: {
type: Boolean,
default: false
},
fadeIn: {
type: String,
default: 'full'
},
className: {
type: String,
default: ''
},
width: {
type: String,
default: ''
},
height: {
type: String,
default: ''
}
Preview:
Download Details:
Author: TonPC64
Live Demo: http://vue-spinkit.surge.sh/
Download Link: https://github.com/TonPC64/vue-spinkit/archive/refs/heads/master.zip
Official Website: https://github.com/TonPC64/vue-spinkit
Install & Download:
# Yarn
$ yarn add vue-spinkit
# NPM
$ npm i vue-spinkit