Exciting release!Introducing "safe npm". Learn more →
Log inDemoInstall


Package Overview
File Explorer

Advanced tools


[![CircleCI](https://circleci.com/gh/JoshK2/vue-spinners-css.svg?style=svg)](https://circleci.com/gh/JoshK2/vue-spinners-css) [![bit components](https://img.shields.io/badge/dynamic/json.svg?color=6e3991&label=bit%20components&query=payload.totalComponent


Version published
Weekly downloads
decreased by-31.27%

Weekly downloads



Vue Spinners CSS Loaders (React, Angular)

CircleCI bit components npm version GitHub stars code style: prettier GitHub license Twitter Follow

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.

Spinnercolor: stringloading: booleansize: numberduration: string
Circle Spinner#7f58aftrue642.4s
Default Spinner#7f58aftrue801.2s
DualRing Spinner#7f58aftrue801.2s
Ellipsis Spinner#7f58aftrue
Facebook Spinner#7f58aftrue801.2s
Grid Spinner#7f58aftrue801.2s
Heart Spinner#7f58aftrue801.2s
Hourglass Spinner#7f58aftrue801.2s
Ring Spinner#7f58aftrue801.2s
Ripple Spinner#7f58aftrue801s
Roller Spinner#7f58aftrue801.2s
Spinner Spinner#7f58aftrue801.2s
Orbitals Spinner#7f58aftrue804s
Line Spinner#7f58aftrue801.2s

📦 Installation

Using npm to install vue-spinners-css:

$ 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. 💫

📄 License




Last updated on 08 Jun 2020

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
support@socket.devSocket SOC 2 Logo


  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc