React, Angular)
Vue Spinners CSS Loaders (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
Browse components and explore their props with Bit.
Install specific vue spinner component with npm, yarn, unpkg or bit without having to install the whole project.
Install components and live demo
🚀 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
npm to install vue-spinners-css:
Using$ 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 to play with live demo, and try the spinners before install.
set npm regisetry config(one time action):
npm config set '@bit:registry' https://node.bit.dev
and use your favorite package manager:
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
Vue Global Registration
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
<template>
<FacebookLoader :color="randomcolor" />
<FacebookLoader />
</template>
<script>
//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,
}
})
</script>
Unpkg Import
<!--Load libraries in your page's header-->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-spinners-css"></script>
<!--Use a component somewhere in your app-->
<div id="app">
<facebook-loader color="blue" />
</div>
<script>
new Vue({ el: '#app', data: { } })
</script>
👾 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.