HTML/CSS Spinning Loader With Blinking Text

In this video, we are creating an HTML/CSS based loader animation. We will achieve this by using CSS3 keyframe animations. By the end of this tutorial, we will have a blinking loading text, and a revolving circle. We will also add a backdrop layer to our page behind the loader. This loader won’t load anything but we can use it when we have something going on in page background, such as an ‘Ajax Call’ and we want to show the loading activity to user.

This is our HTML/CSS based loader only. We can hide it initially and trigger it via function call by using JavaScript or jQuery. And we can also control if we want to show the loader full screen or only on a specific area.

English Version

Urdu/Hindi Version

Proceed to other related tutorials by following links below:

Trigger Show/Hide Loader, Functions and Events in jQuery
Loader Over Specific Area or Full Screen