Saeris / Vue Spinners
Licence: mit
💫 A collection of loading spinner components for Vuejs
Stars: ✭ 255
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Spinners
vue-spinners-css
Amazing collection of Vue spinners components with pure css.
Stars: ✭ 50 (-80.39%)
Mutual labels: vue-components, spinners
Vue Parallax Js
Tiny vue component that adds a directive for parallax effect on elements.
Stars: ✭ 107 (-58.04%)
Mutual labels: vue-components, vuejs-components
Nextcloud Vue
🍱 Vue.js components for Nextcloud app development ✌
Stars: ✭ 89 (-65.1%)
Mutual labels: vue-components, vuejs-components
Vue Swatches
🎨 Help the user picking beautiful colors!
Stars: ✭ 456 (+78.82%)
Mutual labels: vue-components, vuejs-components
spinners-angular
Lightweight SVG/CSS spinners for Angular
Stars: ✭ 21 (-91.76%)
Mutual labels: loader, spinners
Vuelayers
Web map Vue components with the power of OpenLayers
Stars: ✭ 532 (+108.63%)
Mutual labels: vue-components, vuejs-components
react-awesome-loaders
🚀 High quality, super responsive and completely customisable Loading Animations to insert into your website with single line of code.
Stars: ✭ 146 (-42.75%)
Mutual labels: loader, spinners
Aframe Preloader Component
A preloading bar that automatically displays while scene assets load.
Stars: ✭ 27 (-89.41%)
Mutual labels: loader, spinners
Vue Wait
Complex Loader and Progress Management for Vue/Vuex and Nuxt Applications
Stars: ✭ 1,869 (+632.94%)
Mutual labels: vue-components, loader
Material Components Vue
Material Design styled components for Vue.js
Stars: ✭ 316 (+23.92%)
Mutual labels: vue-components, vuejs-components
vue-skeleton-loader
A simple and easily customizable skeleton loader plugin for you Vue application.
Stars: ✭ 74 (-70.98%)
Mutual labels: loader, vue-components
Spinners React
Lightweight SVG/CSS spinners for React
Stars: ✭ 254 (-0.39%)
Mutual labels: loader, spinners
Vue Social Sharing
A renderless Vue.js component for sharing links to social networks, compatible with SSR
Stars: ✭ 1,071 (+320%)
Mutual labels: vue-components, vuejs-components
React Spinners
A collection of loading spinner components for react
Stars: ✭ 2,054 (+705.49%)
Mutual labels: loader, spinners
Vue Multi Select
This component gives you a multi/single select with the power of Vuejs components.
Stars: ✭ 92 (-63.92%)
Mutual labels: vue-components, vuejs-components
Whirl
CSS loading animations with minimal effort!
Stars: ✭ 774 (+203.53%)
Mutual labels: loader, spinners
Vue Content Placeholders
Composable components for rendering fake (progressive) content like facebook in vue
Stars: ✭ 1,547 (+506.67%)
Mutual labels: vue-components, loader
vue-load-image
A Vue component for showing loader during image loading https://john015.github.io/vue-load-image/
Stars: ✭ 60 (-76.47%)
Mutual labels: loader, vue-components
vue-notification-bell
Vue.js notification bell component.
Stars: ✭ 64 (-74.9%)
Mutual labels: vue-components, vuejs-components
Vue Spinners
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:
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!
import { BarLoader } from '@saeris/vue-spinners'
export default {
components: {
BarLoader
},
// ...
}
import { BarLoader } from '@saeris/vue-spinners'
export default {
data: () => ({
loading: true
}),
render() {
return (
<div class='loader'>
<ClipLoader
class="custom-class"
loading={this.loading}
color={'#bada55'}
size={150}
sizeUnit={"px"}
/>
</div>
)
}
}
<!--Load libraries in your page's header-->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/@saeris/vue-spinners"></script>
<!--Use a component somewhere in your app-->
<div id="app">
<bar-loader class="custom-class" :color="#bada55" :loading="loading" :size="150" :sizeUnit="px"></bar-loader>
</div>
<script>
new Vue({ el: '#app', data: { loading: true } })
</script>
📋 Available Loaders, PropTypes, and Default Values
Common default props for all loaders:
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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].