📦 Installation

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

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

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

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

JSX Component

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

export default {
  data: () => ({
    loading: true
  }),
  render() {
    return (
      <div class='loader'>
        <ClipLoader
          class="custom-class"
          loading={this.loading}
          color={'#bada55'}
          size={150}
          sizeUnit={"px"}
        />
      </div>
    )
  }
}

Unpkg Import

<!--Load libraries in your page's header-->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/@saeris/vue-spinners"></script>

<!--Use a component somewhere in your app-->
<div id="app">
  <bar-loader class="custom-class" :color="#bada55" :loading="loading" :size="150" :sizeUnit="px"></bar-loader>
</div>

<script>
  new Vue({ el: '#app', data: { loading: true } })
</script>

📋 Available Loaders, PropTypes, and Default Values

Common default props for all loaders:

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.