LaravelVueJs

Hassle-free Spinners with Vue.js ← Alligator.io



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

Install vue-spinner-component in your Vue.js project.

# Yarn
$ yarn add vue-spinner-component

# or NPM
$ npm install vue-spinner-component --save

Usage

INeedASpinner.vue

<template>
  

Something is doing things.

</template> import Spinner from 'vue-spinner-component/src/Spinner.vue'; export default { components: { Spinner } }

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.

<spinner :size="20"></spinner>

Spinner Track Width

The width of the spinner track, in px.

<spinner :depth="20"></spinner>

Spinner Color

The hex color of the spinner.

<spinner color="#F9EC31"></spinner>

Spinner Speed

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

<spinner :speed="1.5"></spinner>

Spinner Direction

Whether or not the spinner rotates clockwise or counterclockwise.

<spinner :clockwise="true"></spinner>



Source link
★ READ ALSO ★  Modal templates with Pug, SCSS, and Vue.js

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Close