Creating animated loaders with CSS3 Animation

Introduction

Loaders and Spinners play an important role in the modern dynamic websites. Though they look simple but they play a very important role in simplifying the overall User Experience. There are a lot of ways to create animated loaders, however in this post I will be using the power of CSS3 to create 3 different spinners.

You can view all the working loaders and spinners by clicking “vKIAp” button below. Before we dig in to it, lets find out what CSS3 properties are required to build them.

See the Pen vKIAp by Mohit Bhansali (@mohitbhansali) on CodePen.

CSS3 Properties

  • Transition: When changing the CSS properties, transitions allows us to animate the transition from one property to other.

Example: If you increase the size of square box from 5px to 10px, generally the change occurs instantaneously. However, with CSS3 transition, you can animate the transition. CSS3 allows us to have full control over details like  when the animation will start (by setting a delay), how long the transition will last (by setting a duration), and how the transition will run (by setting a timing-function, e.g.  ease, linear etc.). Here is some Sample Syntax

Syntax:

transition:  [ <transition-property> ||

<transition-duration> ||

<transition-timing-function> ||

<transition-delay> ]

Example:

#element_id_or_class {
    transition-property: all;
    transition-duration: 4s;
    transition-timing-function: ease-in;
    transition-delay: 1s;
}

or

#element_id_or_class {
    transition: all 4s ease-in; /* IE 10+ */
    -moz-transition: all 4s ease-in; /* Firefox */
    -webkit-transition: all 4s ease-in; /* Safari */
    -o-transition: all 4s ease-in; /* Opera */
}

Note

There is a lot of duplication due to vendor prefixes. SASS, allows you to define mixins for repetitive code. Read more about SASS at Frontend Development with SASS and Compass: Introduction.

  • Animation: An animation lets an element gradually change from one style to another. Unlike Transition, animate is not dependent upon CSS property change. One can even create animations which runs infinitely.  It consists of two components:
  1. Style depicting CSS animations
  2. Set of key-frames which holds the actual rule-set used for creating animation.  In other words, the key-frame is collection of element states.

Animation Syntax:

animation: [<animation-name> ||

<duration> ||

<timing-function> ||

<delay> ||

<iteration-count> ||

<direction> ||

<fill-mode> ||

<play-state> ]

@keyframe Syntax:

@keyframes <animation-name> {<keyframes-selector> {<css-styles>;}}

Example:

// Animation
#element_id_or_class {
    animation:         CUSTOM-ANIMATION-NAME 2s infinite; /* IE 10+*/
    -moz-animation:    CUSTOM-ANIMATION-NAME 2s infinite; /* Firefox */
    -webkit-animation: CUSTOM-ANIMATION-NAME 2s infinite; /* Safari */
    -o-animation:      CUSTOM-ANIMATION-NAME 2s infinite; /* Opera */
}

// Keyframe
@keyframes CUSTOM-ANIMATION-NAME {
    0%, 100%   { opacity: 0; }
    50% { opacity: 1; }
}
@-moz-keyframes CUSTOM-ANIMATION-NAME {
    0%, 100%   { opacity: 0; }
    50% { opacity: 1; }
}
@-webkit-keyframes CUSTOM-ANIMATION-NAME {
    0%, 100%   { opacity: 0; }
    50% { opacity: 1; }
}
@-o-keyframes CUSTOM-ANIMATION-NAME {
    0%, 100%   { opacity: 0; }
    50% { opacity: 1; }
}

Creating Spinners with CSS3.

Now that we have had a look at the concepts involved, lets start creating some magic!!

Create Common HTML and CSS

Here we will add our common HTML and CSS for CSS3 Spinners and Loaders. After that, we will not repeat our code, we will just add HTML and CSS for loaders and spinners.

Here is how our common HTML looks like:

Markup

<!doctype html>
<html lang="en">
<head>
<title>CSS3 Loaders and Spinners</title>
<meta charset="utf-8">
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="container">
        <!-- We will add CSS3 Spinners and Loaders HTML Markup Here -->
    </div>
</body>
</html>

Here is how our common CSS looks like:

CSS

* {
    margin: 0 auto;
    padding: 0;
}
body {
    background-color: #42b373;
}
.container {
    margin: 0 auto;
    width: 980px;
}
h2 {
    color: #fff;
    text-align: center;
    margin: 50px auto;
}

Rotating Yin Yang

Yin Yang

HTML

<h2>Rotating Yin Yang</h2>
<div class="spinner1"></div>

CSS

.spinner1 {
    width: 96px;
    height: 48px;
    background-color: #2c533d;
    border: #fac922 solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;    
    -webkit-animation: rotate 1.0s infinite linear;
    animation: rotate 1.0s infinite linear;
}
// Design Yin Yang
.spinner1:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #2c533d;
    border: 18px solid #fac922;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}
.spinner1:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #fac922;
    border: 18px solid #2c533d;
    border-radius:100%;
    width: 12px;
    height: 12px;
}
@-webkit-keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg) 
    }
}
@keyframes rotate { 
    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg) 
    }
}

Bouncing and Rotating Circles

Circles

HTML

<h2>Bouncing and Rotating Circles</h2>
<div class="spinner2">
    <div class="circle1"></div>
    <div class="circle2"></div>
</div>

CSS

.spinner2 {
    width: 50px;
    height: 50px;
    position: relative;
    text-align: center;

    -webkit-animation: rotate 1.0s infinite linear;
    animation: rotate 1.0s infinite linear;
}
.circle, .circle2 {
    width: 60%;
    height: 60%;
    display: inline-block;
    position: absolute;
    top: 0;
    background-color: #fac922;
    border-radius: 100%;

    -webkit-animation: recoil 2.0s infinite ease-in-out;
    animation: recoil 2.0s infinite ease-in-out;
} 
.circle2 {
    top: auto;
    bottom: 0px;
    background-color: #2c533d;
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

@-webkit-keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg) 
    }
}
@keyframes rotate { 
    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg) 
    }
}

@-webkit-keyframes recoil {
    0%, 100% { -webkit-transform: scale(0.0) }
    50% { -webkit-transform: scale(1.0) }
}

@keyframes recoil {
    0%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    } 50% {
        transform: scale(1.0);
       -webkit-transform: scale(1.0);
    }
}

Viewing Magnify Glass

magnify

HTML

<h2>Viewing Magnify Glass</h2>
<div class="spinner3"></div>

CSS

.spinner3 {
    font-size: 101px; /* This controls the size. */
    width: 40px;
    height: 40px;
    border: 10px solid #fac922;
    position: relative;
    border-radius: 35px;

    -webkit-animation: beat 1.5s infinite ease-in-out;
    animation: beat 1.5s infinite ease-in-out;
}
.spinner3::before {
    content: "";
    display: inline-block;
    position: absolute;
    right: -25px;
    bottom: -10px;
    border-width: 0;
    background: #fac922;
    width: 35px;
    height: 8px;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}

@-webkit-keyframes beat {
    0%, 100% { -webkit-transform: scale(0.4) }
    50% { -webkit-transform: scale(1.0) }
}

@keyframes beat {
    0%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    } 50% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}

CSS3 loaders and spinners icon have the great advantage over image:

  1. They have the capability to scale: keeping the behavior same as the load increases.
  2. They are retina ready: it doesn’t matter what device you are using, they will always be clearly defined and neat.
  3. They can be easily modified to match the overall styling of the webpage. s.
  4. CSS3 renders more quickly than .gif images. (But in some circumstances, it doesn’t).

Motivation

There is an amazing collection of CSS3 spinners and loaders which is called as Spinkit.

SpinKit uses CSS animations to create smooth and easily customizable animations. The goal is not to offer a solution that works in every browser. If you’re building a site with users running IE9 and below, you’ll want to detect support for the CSS animation attribute, and implement a fallback animation (e.g. a GIF.)

Presently, they have 8 simple animated loaders which are ready to use. Find out more about Spinkit here.

spinkit

Once you understand few important CSS3 attributes and techniques, you ought to be able to create your own CSS3 loaders and spinners. They’re amusing to produce and with a little bit of testing your creativity you can make some really cool animations.

Browser Support

Above loaders and spinners should work in all modern browsers which support CSS3 elements like transforms, transitions, animations, @keyframes etc.

 

I would love to see if any of you have made any cool loaders and spinners recently! Feel free to leave your comments below.

About Mohit Bhansali

A hyperactive mind with a passion for getting acquainted with the latest technology.

Comments

  1. Smriti Datt says:

    Extremely impressive loaders and spinners. I can find the real meaning out of it. Thanks. I am gonna use it soon.

  2. its Really a good job Mohit…. nice

Speak Your Mind

*