https://github.com/joshk2/vue-spinners-css
Amazing collection of Vue spinners components with pure css.
https://github.com/joshk2/vue-spinners-css
animation animations css loaders progress spinners vue vue-components vue-spinner-component vue-spinners
Last synced: 3 months ago
JSON representation
Amazing collection of Vue spinners components with pure css.
- Host: GitHub
- URL: https://github.com/joshk2/vue-spinners-css
- Owner: JoshK2
- License: mit
- Created: 2019-09-03T16:59:01.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-12-02T12:10:50.000Z (over 4 years ago)
- Last Synced: 2024-10-13T11:12:53.994Z (9 months ago)
- Topics: animation, animations, css, loaders, progress, spinners, vue, vue-components, vue-spinner-component, vue-spinners
- Language: Vue
- Homepage: https://bit.dev/joshk/vue-spinners-css
- Size: 440 KB
- Stars: 55
- Watchers: 4
- Forks: 9
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Spinners CSS Loaders ([React](https://github.com/JoshK2/react-spinners-css), [Angular](https://github.com/JoshK2/ng-spinners))
[](https://circleci.com/gh/JoshK2/vue-spinners-css)
[](https://bit.dev/joshk/vue-spinners-css)
[](https://www.npmjs.com/package/vue-spinners-css)
[](https://github.com/JoshK2/vue-spinners-css/stargazers)
[](https://github.com/prettier/prettier)
[](https://raw.githubusercontent.com/JoshK2/vue-spinners-css/master/LICENSE)
[](https://twitter.com/JoshKuttler)
Amazing collection of Vue spinners components with pure css.
The Vue spinners are based on loading.io and from all over the web.
- 💅No extra CSS imports
- ✂️Zero dependencies
- 📦Spinners can be installing separately
## [Live Demo](https://bit.dev/joshk/vue-spinners-css)
Browse components and explore their props with [Bit](https://bit.dev/joshk/vue-spinners-css).
Install specific vue spinner component with npm, yarn, unpkg or bit without having to install the whole project.
[Install components and live demo](https://bit.dev/joshk/vue-spinners-css)
## 🚀 List of Spinners - PropTypes and Default Props
Each component accepts a `color` prop, and `loading` prop.
The default `color` prop is `#7f58af`.
The default `loading` prop is `true`.
Component that accepts size prop have a default size in pixel.
Component that accepts duration prop have a default duration in seconds.
| Spinner | color: string | loading: boolean | size: number | duration: string |
| ---------------- | ------------ | ----------------- | ------------ | ---------------- |
| Circle Spinner | `#7f58af` | `true` | `64` | `2.4s` |
| Default Spinner | `#7f58af` | `true` | `80` | `1.2s` |
| DualRing Spinner | `#7f58af` | `true` | `80` | `1.2s` |
| Ellipsis Spinner | `#7f58af` | `true` | | |
| Facebook Spinner | `#7f58af` | `true` | `80` | `1.2s` |
| Grid Spinner | `#7f58af` | `true` | `80` | `1.2s` |
| Heart Spinner | `#7f58af` | `true` | `80` | `1.2s` |
| Hourglass Spinner| `#7f58af` | `true` | `80` | `1.2s` |
| Ring Spinner | `#7f58af` | `true` | `80` | `1.2s` |
| Ripple Spinner | `#7f58af` | `true` | `80` | `1s` |
| Roller Spinner | `#7f58af` | `true` | `80` | `1.2s` |
| Spinner Spinner | `#7f58af` | `true` | `80` | `1.2s` |
| Orbitals Spinner | `#7f58af` | `true` | `80` | `4s` |
| Line Spinner | `#7f58af` | `true` | `80` | `1.2s` |
## 📦 Installation
### Using [npm](https://www.npmjs.com/package/vue-spinners-css) to install vue-spinners-css:
```bash
$ npm i --save vue-spinners-css
```
### Play and install vue spinners with Bit
Install specific vue spinner component with bit, npm or yarn without having to install the whole project.
Using [bit](https://bit.dev/joshk/vue-spinners-css) to play with live demo, and try the spinners before install.
set npm regisetry config(one time action):
```bash
npm config set '@bit:registry' https://node.bit.dev
```
and use your favorite package manager:
```bash
npm i @bit/joshk.vue-spinners-css.facebook-loader
yarn add @bit/joshk.vue-spinners-css.facebook-loader
bit import joshk.vue-spinners-css/facebook-loader
```
## 💻 Usage Examples
you can use a random color from [jotils](https://bit.dev/joshk/jotils/get-random-color)
### Vue Global Registration
```javascript
import Vue from 'vue'
import * as VueSpinnersCss from "vue-spinners-css";
Vue.use(VueSpinnersCss)
// Each spinner can now be used in your templates anywhere in the app!
```
### Vue Local Registration
```html
//using npm or yarn
import { FacebookLoader } from 'vue-spinners-css';
//using bit
import FacebookLoader from '@bit/joshk.vue-spinners-css.facebook-loader';
import { getRandomColor } from '@bit/joshk.jotils.get-random-color'
export default ({
data: () => ({
randomcolor: getRandomColor()
}),
components: {
FacebookLoader,
}
})
```
### Unpkg Import
```html
new Vue({ el: '#app', data: { } })
```
## 👾 Development
You can see the components locally by cloning this repo and doing the following steps:
- Install dependencies from `package.json`, run: `npm install`.
- Run the app in the development mode, run: `npm run serve`.
## ⌨️ Contributing
- Pull requests and ⭐ stars are always welcome.
- For bugs and feature requests, please create an issue.
## 👏🏻 Support my open-source
If you like to support my open-source contributions please star and share this project. 💫
## 📄 License
[MIT](https://github.com/JoshK2/vue-spinners-css/blob/master/LICENSE)