HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Learn how to create a preloader with CSS
Step 1) Add HTML:
<div class="loader"></div>
Step 2) Add CSS:
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation:
spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform:
rotate(360deg); }
}
Try it Yourself »
Example Explained
The border
property specifies the border size and the border color of the loader.
The border-radius
property transforms the loader into a circle.
The blue thing that spins around inside the border is specified with the
border-top
property. You can also include border-bottom
, border-left
and/or
border-right
if you want more "spinners" (see example below).
The size of the loader is specified with the width
and height
properties.
At last, we add an animation
that makes the blue thing spin forever with a 2
second animation speed.
.loader {
border-top: 16px solid blue;
border-right:
16px solid green;
border-bottom: 16px solid red;
}
Try it Yourself »
.loader {
border-top: 16px solid blue;
border-right: 16px
solid green;
border-bottom: 16px solid red;
border-left:
16px solid pink;
}
Try it Yourself »
An example of how to place the loader in the middle of the page and show "page content" when loading is complete: