Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dzwillia/vue-simple-spinner
A simple, flexible spinner for Vue.js
https://github.com/dzwillia/vue-simple-spinner
component progress spinner ui vue vuejs
Last synced: about 1 month ago
JSON representation
A simple, flexible spinner for Vue.js
- Host: GitHub
- URL: https://github.com/dzwillia/vue-simple-spinner
- Owner: dzwillia
- License: mit
- Created: 2017-04-22T19:15:14.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T23:14:52.000Z (almost 2 years ago)
- Last Synced: 2024-04-24T09:17:59.018Z (5 months ago)
- Topics: component, progress, spinner, ui, vue, vuejs
- Language: Vue
- Homepage: https://dzwillia.github.io/vue-simple-spinner/examples
- Size: 420 KB
- Stars: 426
- Watchers: 7
- Forks: 35
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-simple-spinner - A simple, flexible spinner for Vue.js (Components & Libraries / UI Components)
- awesome-vue - vue-simple-spinner ★298 - A simple, flexible spinner for Vue.js (UI Components / Loader)
- awesome-vue - vue-simple-spinner - A simple, flexible spinner for Vue.js ` 📝 3 years ago` (UI Components [🔝](#readme))
- awesome-vue - vue-simple-spinner - A simple, flexible spinner for Vue.js (UI Components / Loader)
- awesome-vue-zh - Vue-简单微调 - 一个简单,灵活的Vue.js微调器 (UI组件 / 装载机)
README
# vue-simple-spinner
> A simple, flexible spinner for Vue.js
vue-simple-spinner is designed to be a lightweight [Vue.js](http://vuejs.org) spinner requiring minimal configuration.
## Documentation
[https://github.com/dzwillia/vue-simple-spinner/](https://github.com/dzwillia/vue-simple-spinner/)
## Demo
[https://dzwillia.github.io/vue-simple-spinner/examples](https://dzwillia.github.io/vue-simple-spinner/examples)
## Requirements
* [Vue.js](http://vuejs.org/) (^v2.1.4)
## Browser support
IE 10+ (due to [CSS animation support](https://caniuse.com/#feat=css-animation)).
## Installation
### NPM
```bash
npm install vue-simple-spinner --save
```
## Usage
> All styling for this component is done via computed styles in the `Spinner.vue` component and requires no external CSS files.
### ES6
*The following examples can also be used with CommonJS by replacing ES6-specific syntax with CommonJS equivalents.*
```js
import Vue from 'vue'
import Spinner from 'vue-simple-spinner'
new Vue({
components: {
Spinner
}
})
```
### Globals (script tag)
Add a script tag pointing to `dist/vue-simple-spinner.min.js` *after* adding Vue.
Example:
```html
...
new Vue({
el: '#app'
})
```
## Examples
### Medium size
```
```
### Custom line color
```
```
### Custom font size and message
```
```
[More live code examples on JSFiddle](http://jsfiddle.net/dzwillia/kc5ka8zu)
## Options
| Props | Type | Values | Default |
| -------------- |:-----------------|:-----------------------------------------------|:-----------------|
| size | Number \| String | tiny, small, medium, large, huge, massive, {n} | 32 |
| line-size | Number | Any Number | 3 |
| line-bg-color | String | Color | #eee |
| line-fg-color | String | Color | #2196f3 |
| speed | Number | Number (in seconds) | 0.8 |
| spacing | Number | Number (in pixels) | 4 |
| message | String | Text to display | _(empty string)_ |
| font-size | Number | Number (in pixels) | 13 |
| text-fg-color | String | Color | #555 |
## License
vue-simple-spinner is open source and released under the [MIT License](LICENSE).
Copyright (c) 2017 [David Z Williams](https://twitter.com/padredaveo).
> *PS: I would love to know if you're using vue-simple-spinner. Tweet to me at [@padredaveo](https://twitter.com/padredaveo)*.