Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Vue Spinners

npm travis codecov Known Vulnerabilities Known Vulnerabilities

A Vue.js port of react-spinners.

πŸ“¦ 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.

⚠️ Support Notice

This code is released as-is. It was originally built for use with Vue 2.x and as-such it is now very out of date. I do not plan to make continued updates to this package, so if you find it useful then I would highly recommend that you create a fork or copy-and-paste code to suit your own needs. The version of emotion that is uses is now very out of date and will cause problems when used in a modern codebase alongside another version of emotion. I am also unable to provide support or answer questions due to my lack of knowledge of Vuejs.

πŸ“£ 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.