Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Saeris/vue-spinners
💫 A collection of loading spinner components for Vuejs
https://github.com/Saeris/vue-spinners
loader loading-indicator spinners vue vue-components vuejs vuejs-components
Last synced: about 2 months ago
JSON representation
💫 A collection of loading spinner components for Vuejs
- Host: GitHub
- URL: https://github.com/Saeris/vue-spinners
- Owner: Saeris
- License: mit
- Created: 2018-08-17T08:20:17.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2021-09-24T07:31:20.000Z (almost 3 years ago)
- Last Synced: 2024-07-18T17:44:08.279Z (2 months ago)
- Topics: loader, loading-indicator, spinners, vue, vue-components, vuejs, vuejs-components
- Language: JavaScript
- Homepage: https://vue-spinners.saeris.io/
- Size: 5.82 MB
- Stars: 317
- Watchers: 6
- Forks: 16
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
Vue Spinners
A Vue.js port of react-spinners.
## 📦 Installation
```bash
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](https://vuejs.org/v2/guide/plugins.html#Using-a-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](https://vuejs.org/v2/guide/components-registration.html#Local-Registration)**
```js
import { BarLoader } from '@saeris/vue-spinners'
export default {
components: {
BarLoader
},
// ...
}
```
**[JSX Component](https://vuejs.org/v2/guide/render-function.html#JSX)**
```js
import { BarLoader } from '@saeris/vue-spinners'
export default {
data: () => ({
loading: true
}),
render() {
return (
)
}
}
```
**[Unpkg Import](https://vuejs.org/v2/cookbook/packaging-sfc-for-npm.html#What-does-my-packaged-component-look-like)**
```html
new Vue({ el: '#app', data: { loading: true } })
```
## 📋 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](https://vue-spinners.saeris.io), 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](https://codesandbox.io/s/github/Saeris/vue-spinners/tree/master/example).
## ⚠️ 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](https://github.com/davidhu2000/react-spinners) by [David Hu](https://github.com/davidhu2000), who's library is based on [Halogen](https://github.com/yuanyan/halogen).
## 🥂 License
Released under the [MIT license](https://github.com/Saeris/vue-spinners/blob/master/LICENSE.md).