Skip to content
πŸ’« A collection of loading spinner components for Vuejs
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example chore(package): update lockfile example/yarn.lock Oct 15, 2018
public Fix Root Div ID Aug 21, 2018
src
.editorconfig Initial commit Aug 17, 2018
.eslintignore Initial commit Aug 17, 2018
.eslintrc.js Reconfigure for Vue-CLI 3, Add Tests, Update Demo Page Aug 19, 2018
.gitignore πŸ“„ Docs: Update README, Add Travis CI + Codecov Oct 4, 2018
.lintstagedrc πŸ“„ Docs: Update README, Add Travis CI + Codecov Oct 4, 2018
.prettierrc Initial commit Aug 17, 2018
.snyk πŸ“„ Docs: Update README, Add Travis CI + Codecov Oct 4, 2018
.travis.yml πŸ”§ Fix Build Process Oct 14, 2018
LICENSE.md Fix Demo Page CSS Bugs, Add License Info Aug 19, 2018
README.md πŸ“„ Docs: Update README, Add Travis CI + Codecov Oct 4, 2018
babel.config.js Reconfigure for Vue-CLI 3, Add Tests, Update Demo Page Aug 19, 2018
codecov.yml πŸ“„ Docs: Update README, Add Travis CI + Codecov Oct 4, 2018
greenkeeper.json
jest.config.js Reconfigure for Vue-CLI 3, Add Tests, Update Demo Page Aug 19, 2018
package.json Merge remote-tracking branch 'origin/master' Oct 14, 2018
yarn.lock chore(package): update lockfile yarn.lock Oct 4, 2018

README.md

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.

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

You can’t perform that action at this time.