Building Spinkit Loading Component with Vue2.x

Spinkit is a set of simple loading animation spinners which use only CSS3. Spinkit has a set of 11 animations at present. Most of these are pretty trending and are used in a variety of websites. Since Spinners are used as a loading symbol in most of the places, it’s good to have a Vue2.x Component in order to make it. This particular tutorial utilizes a variety of thing that we have already considered in other articles for example Data Binding and Create Lifecycle Event. The way we will build it out is pretty simple.

  1. We will extract the CSS required for each animation and customize it to give it proper names as we please for each animation.
  2. Create an appropriate template for the same.
  3. Have a property which will take the value of which animation has to be shown.
  4. Conditional rendering of the Animated DOM Element.

In order to just see how the Spinkit Spinners look like.

Spinkit

Spinkit

Let’s Get Started

We will go ahead and create a simple component called vue-spinkit. This Component takes up one single property called spinStyle. The template of this component is taken from the Spinkit Website. The CSS is then being taken up and modified a bit to match the template text. We will try this for one single animation and hence the others will follow:-

Vue2.x Component

When you look at this simple component what you see is three things.

  1. There is an input for the element which is spinStyle. This takes in the animation which is required for the Spinkit to Execute
  2. The lifecycle event created also helps to bootstrap the component and lets you validate your property value. This helps in conditional rendering as we move ahead in selecting the templates. This helps in enabling or disabling the various properties in the data attributes.
  3. The data property holds the array of various animations and also enables and disables them.

CSS

In the CSS you can see that we have the class name and the property name same so that we can easily parse information through the data property and make the dynamic rendering happen. The CSS is also copied from Spinkit.

HTML

The HTML template is pretty simple and straight forward.

All these together in action can be seen below:-

Spinkit Loading Component with Vue2.x

Spinkit Loading Component with Vue2.x

See the Pen Vue2.x with Spinkit Rotating Plane by Shiv Kumar Ganesh (@shivkumarganesh) on CodePen.

The above shown is a single component. We need to import all the spinners that are being utilized in the Spinkit. Let’s go ahead and incorporate all of them.

NOTE: IF you have not set up your workspace yet you always can refer to these Tutorials to get started

  1. An introduction to Vue Framework?
  2. Getting Started with Vue using Fiddle
  3. Learn Fast Handling User Inputs & form bindings using Vue
  4. Easily Bind Select and Multi-select using Vue
  5. Learn to make a ToDo List – Vue Component Creation
  6. Vue ToDo list with Delete Option & Global Event Bus – Part II
  7. How to Create Global Event Bus using Vue.js?
  8. Learn how to work with Computed Properties in VueJS
  9. How to Use Vue.js watchers for Async Updates?
  10. Make a Basic HTML Editor using Vuejs v-html directive
  11. Prevent XSS in Vue.js using Google Caja
  12. How does Event Handling work in Vue.js?

Implementing all Spinkit

Let’s just see the entire VueJS code for the Various Spinkit Animations.

Vue2.x Component

HTML

Rather than spreading the entire CSS as well let’s have a look at the result and then we will move onto the CodePen.

Spinkit Full Animations - Vuejs Component

Spinkit Full Animations – Vuejs Component

We have also posted the CodePen Link for the same.

 

See the Pen Vue2.x with Spinkit by Shiv Kumar Ganesh (@shivkumarganesh) on CodePen.


So you see how easy is it to make a Spinkit Component using Vue2.x. Please leave your review about the code also have a look at the list of tutorials that we have on Vue.js.

 

 


Also published on Medium.

Join our 2500+ fellow readers

Join our 2500+ fellow readers

Joining our mailing list will for sure keep you at the top of Web Development Ecosystem. Connect with us and also other fellow developers.

You have Successfully Subscribed!

Pin It on Pinterest

Share This