Bootstrap > Glyphicons icons

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 1st 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>

Above code snippet is browser friendly ie. it works in all browsers whether it is Google chrome, IE or Mozilla Firefox.

Output

Bootstrap wait icon

 Views: 2791 | Post Order: 18



Write for us