Vue Spinners

A Vue.js port of react-spinners.

📦 Installation

``bash
npm install --save @saeris/vue-spinners


or


yarn add @saeris/vue-spinners
`

🔧 Usage

There are a number of ways you can use this library! Here are a few examples:

Vue Plugin
`js
import Vue from 'vue'
import { VueSpinners } from '@saeris/vue-spinners'

Vue.use(VueSpinners)

// Each spinner can now be used in your templates anywhere in the app!
`

Local Component Registration
`js
import { BarLoader } from '@saeris/vue-spinners'

export default {
components: {
BarLoader
},
// ...
}
`

JSX Component

`js
import { BarLoader } from '@saeris/vue-spinners'

export default {
data: () => ({
loading: true
}),
render() {
return (



)
}
}
`

Unpkg Import
`html








`

📋 Available Loaders, PropTypes, and Default Values

Common default props for all loaders:

`js
loading: true
color: '#000000'
`

For size, height, and width props, there are sizeUnit, heightUnit, and widthUnit prop that accepts px, %, or em. The default for the unit prop is px.

Loader | size:int | height:int | width:int | radius:int | margin:str
-----------------------:|:--------:|:----------:|:---------:|:----------:|:---------:
BarLoader | | 4 | 100 | |
BeatLoader | 15 | | | | 2px
BounceLoader | 60 | | | |
CircleLoader | 50 | | | |
ClimbingBoxLoader | 15 | | | |
ClipLoader | 35 | | | |
DotLoader | 60 | | | | 2px
FadeLoader | | 15 | 5 | 2 | 2px
GridLoader | 15 | | | |
HashLoader | 50 | | | | 2px
MoonLoader | 60 | | | | 2px
PacmanLoader | 25 | | | | 2px
PropagateLoader | 15 | | | |
PulseLoader | 15 | | | | 2px
RingLoader | 60 | | | | 2px
RiseLoader | 15 | | | | 2px
RotateLoader | 15 | | | | 2px
ScaleLoader | | 35 | 4 | 2 | 2px
SkewLoader | 20 | | | |
SquareLoader | 50 | | | |
SyncLoader | 15 | | | | 2px

🏖️ Demo

You can either visit the live demo site, clone this repo and run the demo locally using yarn start` and opening your browser to http://localhost:8080, or you can just play with it inside of CodeSandbox here.

📣 Acknowledgements

This library is a Vue port of react-spinners by David Hu, who's library is based on Halogen.

🥂 License

Released under the MIT license.