vue-spinners

by Saeris

πŸ’« A collection of loading spinner components for Vuejs

230 Stars 13 Forks Last release: Not found MIT License 37 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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 ```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

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

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

) } }

Unpkg Import ```html <!--Load libraries in your page's header-->

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.