Spinkit Loading Component with Vue2.x

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

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

Vue.component("vue-spinkit", {
  props: ["spinStyle"],
  template: `
<div class="rotating_plane" v-if="spin_style.rotating_plane"></div>
`,
  data: function() {
    return {
      spin_style: {
        rotating_plane: false,
      }
    };
  },
  created: function() {
    for (var spinStyle in this.spin_style) {
      this.spin_style[spinStyle] = false;
    }
    this.spin_style[this.spinStyle] = true;
  }
});

//Bootstrapping code
new Vue({
 el: "#app"
});

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

/*Include this in component*/
.rotating_plane {
  width: 40px;
  height: 40px;
  background-color: #333;

  margin: 100px auto;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

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.

<div id="app">
<vue-spinkit spin-style="rotating_plane">
</div>

All these together in action can be seen below:-

Spinkit Loading Component with Vue2.x

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

Vue.component("vue-spinkit", {
  props: ["spinStyle"],
  template: `
<div class="rotating_plane" v-if="spin_style.rotating_plane"></div>
<div class="double_bounce" v-else-if="spin_style.double_bounce">
  <div class="double-bounce1"></div>
  <div class="double-bounce2"></div>
</div>
<div class="wave" v-else-if="spin_style.wave">
  <div class="rect1"></div>
  <div class="rect2"></div>
  <div class="rect3"></div>
  <div class="rect4"></div>
  <div class="rect5"></div>
</div>
<div class="wandering_cube" v-else-if="spin_style.wandering_cube">
  <div class="cube1"></div>
  <div class="cube2"></div>
</div>
<div class="pulse" v-else-if="spin_style.pulse"></div>
<div class="chasing_dots" v-else-if="spin_style.chasing_dots">
  <div class="dot1"></div>
  <div class="dot2"></div>
</div>
<div class="three_bounce" v-else-if="spin_style.three_bounce">
  <div class="bounce1"></div>
  <div class="bounce2"></div>
  <div class="bounce3"></div>
</div>
<div class="circle" v-else-if="spin_style.circle">
  <div class="sk-circle1 sk-child"></div>
  <div class="sk-circle2 sk-child"></div>
  <div class="sk-circle3 sk-child"></div>
  <div class="sk-circle4 sk-child"></div>
  <div class="sk-circle5 sk-child"></div>
  <div class="sk-circle6 sk-child"></div>
  <div class="sk-circle7 sk-child"></div>
  <div class="sk-circle8 sk-child"></div>
  <div class="sk-circle9 sk-child"></div>
  <div class="sk-circle10 sk-child"></div>
  <div class="sk-circle11 sk-child"></div>
  <div class="sk-circle12 sk-child"></div>
</div>
<div class="cube_grid" v-else-if="spin_style.cube_grid">
  <div class="sk-cube sk-cube1"></div>
  <div class="sk-cube sk-cube2"></div>
  <div class="sk-cube sk-cube3"></div>
  <div class="sk-cube sk-cube4"></div>
  <div class="sk-cube sk-cube5"></div>
  <div class="sk-cube sk-cube6"></div>
  <div class="sk-cube sk-cube7"></div>
  <div class="sk-cube sk-cube8"></div>
  <div class="sk-cube sk-cube9"></div>
</div>
<div class="folding_cube" v-else-if="spin_style.folding_cube">
  <div class="sk-cube1 sk-cube"></div>
  <div class="sk-cube2 sk-cube"></div>
  <div class="sk-cube4 sk-cube"></div>
  <div class="sk-cube3 sk-cube"></div>
</div>
<div class="fading_circle" v-else-if="spin_style.fading_circle">
  <div class="sk-circle1 sk-circle"></div>
  <div class="sk-circle2 sk-circle"></div>
  <div class="sk-circle3 sk-circle"></div>
  <div class="sk-circle4 sk-circle"></div>
  <div class="sk-circle5 sk-circle"></div>
  <div class="sk-circle6 sk-circle"></div>
  <div class="sk-circle7 sk-circle"></div>
  <div class="sk-circle8 sk-circle"></div>
  <div class="sk-circle9 sk-circle"></div>
  <div class="sk-circle10 sk-circle"></div>
  <div class="sk-circle11 sk-circle"></div>
  <div class="sk-circle12 sk-circle"></div>
</div>`,
  data: function() {
    return {
      spin_style: {
        rotating_plane: false,
        double_bounce: false,
        wave: false,
        wandering_cube: false,
        pulse: false,
        chasing_dots: false,
        three_bounce: false,
        circle: false,
        cube_grid: false,
        folding_cube: false,
        fading_circle: false
      }
    };
  },
  created: function() {
    for (var spinStyle in this.spin_style) {
      this.spin_style[spinStyle] = false;
    }
    this.spin_style[this.spinStyle] = true;
  }
});

new Vue({
  el: "#app"
});

HTML

<div id="app">
  <div class="container">
    <div class="row">
      <div class="col border">
        <h4>Rotating Plane</h4>
        <vue-spinkit spin-style="rotating_plane">
        </vue-spinkit>
      </div>
      <div class="col border">
        <h4>Double Bounce</h4>
        <vue-spinkit spin-style="double_bounce">
        </vue-spinkit>
      </div>
      <div class="col border">
        <h4>Wave</h4>
        <vue-spinkit spin-style="wave">
        </vue-spinkit>
      </div>
    </div>
    <div class="row">
      <div class="col border">
        <h4>Wandering Cubes</h4>
        <vue-spinkit spin-style="wandering_cube">
        </vue-spinkit>
      </div>
      <div class="col border">
        <h4>Pulse</h4>
        <vue-spinkit spin-style="pulse">
        </vue-spinkit>
      </div>
      <div class="col border">
        <h4>Chasing Dots</h4>
        <vue-spinkit spin-style="chasing_dots">
        </vue-spinkit>
      </div>
    </div>
    <div class="row">
      <div class="col border">
        <h4>Three Bounce</h4>
        <vue-spinkit spin-style="three_bounce">
        </vue-spinkit>
      </div>
      <div class="col border">
        <h4>Circle</h4>
        <vue-spinkit spin-style="circle">
        </vue-spinkit>
      </div>
      <div class="col border">
        <h4>Cube Grid</h4>
        <vue-spinkit spin-style="cube_grid">
        </vue-spinkit>
      </div>
    </div>
    <div class="row">
      <div class="col border">
        <h4>Folding Cube</h4>
        <vue-spinkit spin-style="folding_cube">
        </vue-spinkit>
      </div>
      <div class="col border">
        <h4>Fading Circle</h4>
        <vue-spinkit spin-style="fading_circle">
        </vue-spinkit>
      </div>
      <div class="col border">
        
      </div>
    </div>
  </div>
</div>

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

We have also posted the CodePen Link for the same.

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.

Originally published at The Web Juice.