Javatpoint Logo
Javatpoint Logo

CSS Loader

A loader is said to be any animation that alerts the visitor about the page is loading, and you have to wait for a few seconds. It is helpful when a page took some seconds to load the webpage content. Without using the loader on the webpage, the visitor might think that the site is unresponsive.

Using the CSS loader makes the visitor distracted or waited for some time until the page gets fully loaded.

We can understand the concept of CSS loader by using the following illustrations.

Example1

Test it Now

Let's see another example of the loader in which we are going to create a spinner.

Example2

Test it Now

In the above example, we have defined the border property, which specifies the border color and border size of the loader. Here, we have also used the border-radius property, which transforms the border into the circle.

We have used the border-top property for the purple thing that spins around within the border. The loader size is defined by using the width and height properties. In the end, we have added an animation which makes the purple thing spin countless times with an animation speed of 2s.

Another example of more loaders is given below.

Example3

In the above example, we have only included the border-top property, but in this example, we also include the border-bottom, border-left, and border-right properties.

Let's see how it works.

Test it Now

Next TopicCSS units




Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA