Home » Tutorials » HTML & CSS » Build Google’s Material Design Spinner in 10 Minutes!

Build Google’s Material Design Spinner in 10 Minutes!

Build Google’s Material Design Spinner in 10 Minutes!

The Google’s Material Design circular progress loader / spinner is really inspiring! The progress spinner is a very useful visual indicator to inform the user that an operation is in progress.

There are 2 types of Google’s Material Design progress spinner, for instance: Determinate indicators & Indeterminate indicators.

  • Determinate indicators display how long an operation will take.
  • Indeterminate indicators visualize an unspecified wait time.

In this tutorial, you will learn to build a Google’s Material Design progress bar (Indeterminate indicators) for your website & web application.

View Demo

Tutorial Details

  • Difficulty: Intermediate
  • Technology: CSS3 & SVG

HTML

Following is the HTML code that used to build the Google’s Material Design Spinner:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Demo: Google's Material Design Spinner using CSS &amp; SVG | onlyWebPro</title>
</head>
<body>
<h1>Demo: Google's Material Design Spinner using CSS &amp; SVG</h1>
<div class="animate_loader_wrapper">
    <div class="animate_loader">
        <svg class="circular" viewBox="25 25 50 50">
          <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" />
        </svg>
    </div><!-- END animate_loader -->
</div><!-- END animate_loader_wrapper --> 
</body>
</html>

The spinner consists of 2 important HTML elements: SVG & Circle.

SVG

Let’s talk about a little bit of SVG.

SVG is stands for Scalable Vector Graphics, it is used to define vector-based graphics for the Web & do NOT lose any quality if they are zoomed or resized. In addition, every element and every attribute in SVG files can be animated.

As you can see above, we’ve specify the “viewbox” attribute of the SVG element.

The “viewbox” attribute has been used to defines the aspect ratio of the sub elements inside SVG & it defines the origin of the SVG coordination system.

The “viewbox” attribute accepts a list of 4 values: x, y, width, height. If you want to find out more about SVG’s “viewbox”, please read the article “Understanding SVG Coordinate Systems and Transformations (Part 1) — The viewport, viewBox, and preserveAspectRatio” written by Sara Soueida. She is an award-winning freelance front-end Web developer & she has lots of experience with SVG.

Circle

The element is the sub element of SVG, it is used to create a circle.

The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are omitted, the circle’s center is set to (0,0).

The r attribute defines the radius of the circle.

CSS

Following are the CSS codes that used to creates spinner’s animation:

.animate_loader {
    background: #fff;
    border-radius: 60px;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    margin: -5px auto;
    width: 50px;
}

.animate_loader:before {
    content: '';
    display: block;
    padding-top: 100%;
}

.animate_loader .circular {
    animation: rotate 2s linear infinite;
    height: 100%;
    transform-origin: center center;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.animate_loader .path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
}

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

@keyframes dash{
    0%{
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0;
    }
    50%{
        stroke-dasharray: 89,200;
        stroke-dashoffset: -35;
    }
    100%{
        stroke-dasharray: 89,200;
        stroke-dashoffset: -124;
    }
}

@keyframes color{
    100%, 0%{
        stroke: #9c0;
    }
    50%{
        stroke: #FF9300;
    }
}

I believe you’re familiar with most of the CSS declarations stated above. Probably just some of them are new to you such as: animation, keyframe, stroke-dasharray, stroke-dashoffset & stroke-linecap.

CSS Animation & Keyframe

The CSS Animation & Keyframe allows us to create smooth, maintainable animation. If you are new to CSS Animation & Keyframe, please be sure to read the beginner article: Create Stunning Animation Using CSS3 Animation & Keyframe.

In this tutorial, we use the CSS Animation & Keyframe to create the rotation, animate the color of the spinner & animate spinner with easing function.

stroke-dasharray

The stroke-dasharray property controls the pattern of dashes and gaps used to stroke paths.

/* stroke-dasharray: length, gaps */
stroke-dasharray: 5, 20;

stroke dash sample

stroke-dashoffset

The stroke-dashoffset property defines the location along an SVG path where the dash of a stroke will begin. The higher the number, the further along the path the dashes will begin.

stroke-linecap

The stroke-linecap property is for setting the starting and ending points of a border on SVG shapes.

The stroke-linecap property can accepts 3 values: butt (default), square & round:
stroke linecap sample

  • butt (default): ends the stroke with a sharp 90-degree angle.
  • square: similar to butt except that it extends the stroke beyond the length of the path.
  • round: adds a radius that smooths out the start and end points, which is controlled by the stroke-width.

Conclusion

You’ve learned to build a spinner using SVG circle element. You’ve animate the spinner using CSS Animation, Keyframe & rotation. Lastly, you’ve style it to become a Google’s Material Design progress bar using stroke-dashoffset, stroke-dashoffset & stroke-linecap.


Android, iOS Development Tutorials