Glyphicons Wait icon in Bootstrap

How to create browser friendly wait icon in bootstrap?

In this post, we shall learn how to create wait icon or loading icon or please wait icon in Bootstrap.

Below is the HTML and CSS code that will show the icon. Let's see what is happening here.

The 1^st line of code is the HTML code with Bootstrap css classes.

Remaining lines of codes are for glyphicon icon related CSS that has CSS3 animation property set that simply says that rotate the icon from 0 degree to 360 degree.

<span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>

<style>
.glyphicon-refresh-animate {
    -animation: spin .7s infinite linear;
    -webkit-animation: spinWebkit .7s infinite linear;
    -moz-animation: spinMoz .7s infinite linear;
}

@-webkit-keyframes spinWebkit {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}
@keyframes spinMoz {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}
@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}
</style>