Lightweight and Good Looking Vue Simple Spinner

vue-simple-spinner is specially designed to be lightweight Vue.js spinner which requires little Configuration/setup.

Features

Size:
Background Color
Foreground Color
Speed
Spacing
Requirements: Vue.js (^v2.1.4)
Browser support: IE 10+ (due to CSS animation support).

How to install Vue Simple Spinner

NPM

npm install vue-simple-spinner --save

Usage

All styling for this component is done via computed styles in the Spinner.vue component and requires no external CSS files.

ES6

The following examples can also be used with CommonJS by replacing ES6-specific syntax with CommonJS equivalents.

import Vue from 'vue'
import Spinner from 'vue-simple-spinner'

new Vue({
  components: {
    Spinner
  }
})

Globals (script tag)

Add a script tag pointing to dist/vue-simple-spinner.min.js after adding Vue.

Example:

<html>
<head>
  ...
</head>
<body>
  <div id="app">
    <vue-simple-spinner></vue-simple-spinner>
  </div>

  <script src="path/to/vue.js"></script>
  <script src="path/to/vue-simple-spinner.js"></script>
  <script>
    new Vue({
      el: '#app'
    })
  </script>
</body>
</html>

Examples

Medium size

<vue-simple-spinner size="medium" />

Custom line color

<vue-simple-spinner line-fg-color="#009900" />

Custom font size and message

<vue-simple-spinner spacing="55" message="I'm 55px below the vue-simple-spinner" />

Options

Props	Type	Default	Values
size	Number/String	32	tiny, small, medium, large, huge, massive, {n}
line-size	Number	3	Any Number
line-bg-color	String	#eee	Color
line-fg-color	String	#2196f3	Color
speed	Number	0.8	Number (in seconds)
spacing	Number	4	Number (in pixels)
message	String	“Empty string”	Text to display
font-size	Number	13	Number (in pixels)
text-fg-color	String	#555	Color

License

vue-simple-spinner is open source and released under the MIT License.