[![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

joshk2

vue-spinners-css

    "url": "https://github.com/JoshK2/vue-spinners-css"

  "main": "dist/vue-spinners-css.common.js",

  "unpkg": "dist/vue-spinners-css.umd.min.js",

  "bugs": "https://github.com/JoshK2/vue-spinners-css/issues",

  "homepage": "https://bit.dev/joshk/vue-spinners-css",

    "build:lib": "rm -rf dist && vue-cli-service build --target lib --inline-vue --name vue-spinners-css ./src/index.js",

    "build:bit": "rm -rf dist && bit build",

    "format": "prettier --write \"src/**/*.vue\" \"src/**/*.js\"",

    "deploy:bit": "bit export joshk.vue-spinners-css"

    "@vue/cli-plugin-unit-jest": "^3.9.0",

      "compiler": "bit.envs/bundlers/vue@2.6.15"

      "compiler": "bit.envs/bundlers/vue@2.6.21"

    "componentsDefaultDirectory": "components/{name}",

      "joshk.vue-spinners-css/circle-loader": {

          "compiler": "bit.envs/bundlers/vue@2.6.15"

# Vue Spinners CSS Loaders ([React](https://github.com/JoshK2/react-spinners-css), [Angular](https://github.com/JoshK2/ng-spinners))

[![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.totalComponents&url=https%3A%2F%2Fapi.bit.dev%2Fscope%2Fjoshk%2Fvue-spinners-css)](https://bit.dev/joshk/vue-spinners-css)

[![npm version](https://badge.fury.io/js/vue-spinners-css.svg?u)](https://www.npmjs.com/package/vue-spinners-css)

[![GitHub stars](https://img.shields.io/github/stars/joshk2/vue-spinners-css)](https://github.com/JoshK2/vue-spinners-css/stargazers)

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/JoshK2/vue-spinners-css/master/LICENSE)

[![Twitter Follow](https://img.shields.io/twitter/follow/joshkuttler)](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.  

- 📦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.  

Component that accepts size prop have a default size in pixel.

Component that accepts duration prop have a default duration in seconds.

| ---------------- | ------------  | ----------------- | ------------ | ---------------- |

| Circle Spinner   | `#7f58af`     | `true`            | `64`         | `2.4s`           |

| Default Spinner  | `#7f58af`     | `true`            | `80`         | `1.2s`           |

| DualRing Spinner | `#7f58af`     | `true`            | `80`         | `1.2s`           |

| 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`           |

### Using [npm](https://www.npmjs.com/package/vue-spinners-css) to install 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):

npm config set '@bit:registry' https://node.bit.dev

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 

you can use a random color from [jotils](https://bit.dev/joshk/jotils/get-random-color)  

import * as VueSpinnersCss from "vue-spinners-css";

// Each spinner can now be used in your templates anywhere in the app!

  import { FacebookLoader } from 'vue-spinners-css';

  import FacebookLoader from '@bit/joshk.vue-spinners-css.facebook-loader';

  import { getRandomColor } from '@bit/joshk.jotils.get-random-color'

		{
		"name": "vue-spinners-css",
		"version": "1.1.4",
		"version": "1.1.5",
		"private": false,
		@@ -69,14 +69,7 @@ "repository": {
		"env": {
		"compiler": "bit.envs/bundlers/vue@2.6.15"
		"compiler": "bit.envs/bundlers/vue@2.6.21"
		},
		"componentsDefaultDirectory": "components/{name}",
		"packageManager": "npm",
		"overrides": {
		"joshk.vue-spinners-css/circle-loader": {
		"env": {
		"compiler": "bit.envs/bundlers/vue@2.6.15"
		}
		}
		}
		"packageManager": "npm"
		}
		}

		@@ -9,3 +9,2 @@ # Vue Spinners CSS Loaders ([React](https://github.com/JoshK2/react-spinners-css), [Angular](https://github.com/JoshK2/ng-spinners))
		[![Twitter Follow](https://img.shields.io/twitter/follow/joshkuttler)](https://twitter.com/JoshKuttler)
		<span class="badge-buymeacoffee"><a href="https://ko-fi.com/X8X614J76" title="Donate to this project using Ko-fi"><img src="https://img.shields.io/badge/buy%20me%20a%20coffee-support-%23ff5f5f" alt="Buy Me A Coffee donate button" /></a></span>

		@@ -12,0 +11,0 @@ <p align="center">

Worsened metrics