Table of Contents

URL: https://www.progressiverobot.com/vuejs-simple-vue-spinners/

I am exceedingly lazy. So lazy, in fact, that I default to downloading packages for itty-bitty components like spinners. Well, laziness coupled with the fact that for some reason my custom spinners are always glitchy. The upside of this is that occasionally you encounter a simple package that just does exactly what you want and nothing else. Enter vue-spinner-component. It's a spinner. A tiny one, that just does the basics of what you need, nothing more.

Installation

spinners illustration for: Installation

Install <^>vue-spinner-component<^> in your Vue.js project.

				
					
# Yarn

$ yarn add vue-spinner-component



# or NPM

$ npm install vue-spinner-component --save

Usage

				
					
[label INeedASpinner.vue]

&lt;template&gt;

  &lt;div&gt;

    &lt;p&gt;Something is doing things.&lt;/p&gt;

    &lt;spinner&gt;&lt;/spinner&gt;

  &lt;/div&gt;

&lt;/template&gt;



&lt;script&gt;

import Spinner from 'vue-spinner-component/src/Spinner.vue';



export default {

  components: {

    Spinner

  }

}

&lt;/script&gt;

There are, of course, a few things you can customize. But just the basics.

Spinner Size

The width and height of the spinner, in px. You could set this via CSS too.

				
					
&lt;spinner :size="20"&gt;&lt;/spinner&gt;

Spinner Track Width

The width of the spinner track, in px.

				
					
&lt;spinner :depth="20"&gt;&lt;/spinner&gt;

Spinner Color

The hex color of the spinner.

				
					
&lt;spinner color="#F9EC31"&gt;&lt;/spinner&gt;

Spinner Speed

The time it takes for the spinner to make a full revolution in seconds.

				
					
&lt;spinner :speed="1.5"&gt;&lt;/spinner&gt;

Spinner Direction

Whether or not the spinner rotates clockwise or counterclockwise.

				
					
&lt;spinner :clockwise="true"&gt;&lt;/spinner&gt;