Need help with vue-spinners?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

Saeris
260 Stars 15 Forks MIT License 37 Commits 75 Opened issues

Description

💫 A collection of loading spinner components for Vuejs

Services available

!
?

Need anything else?

Contributors list

# 184
nextjs
postman...
graphql...
angular...
8 commits
# 70,674
Svelte
codesan...
Shell
Angular
1 commit

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.