How To Create Page Loader Using CSS

Nikunj Satasiya
Dec 28, 2017
2k
0
4
Article

Introduction

In this article I am going to explain how to create page loader using CSS step by step.

A page loader is any quite animation that visually communicates to a visitant that the page is loading and to simply remain for a couple of seconds. ... it's the previous situation wherever a CSS page loader will work okay.

Implementation

Step 1

Create HTML Structure as following.

<html>
<head>
<title>CSS Page Loader Example</title>
</head>
<body>
</body>
</html>

Step2

Write CSS For Page Loader within <style> tag as following

<style>
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #0087FF;
border-bottom: 16px solid #FF6100;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>

Step 3

Put <style>this tag within </head>tag.

Step 4

Now, add division tag (<div>) within <body> tag. And apply created CSS class.

<body>
<div class="loader"> </div>
</body>

Full Code

<html>
<head>
<title>CSS Page Loader Example</title>
<style>
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #0087FF;
border-bottom: 16px solid #FF6100;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="loader"> </div>
</body>
</html>

Explanation

The border property used to display the size of border and also the color of border within loader. The border-radius property is used to transforms the loader into a rounded circle.

The blue issue that spins around within the border is such with the border-top property. You’ll additionally embody border-bottom, border-left and/or border-right if you would like additional "spinners" (see example below).

The size of the loader is such with the breadth and height properties.

At last, we have a tendency to add Associate in Nursing animation that produces the blue issue spin forever with a pair of second animation speed.

Note

You ought to additionally embody a -webkit- prefix for browsers that don't support animation and rework properties. Click on the instance to check however.

Output Screen

Summary

A page loader is any quite animation that visually communicates to a visitant that the page is loading and to simply remain for a couple of seconds. It’s the previous situation wherever a CSS page loader will work okay.

I hope this article will helpful to beginner.