Hello readers, Today in this blog you’ll learn how to create a Color Changing Shiny Loader using only HTML & CSS. Previously I have shared a Star Rating Widget using HTML & CSS only. Now, it’s time to create a CSS Loader.
Preloaders (also known as loaders) are what you see on the webpage screen while the rest of the page contents is still loading. Preloaders or loaders are often easy or complex animations that are used to keep visitors entertained while server operations finish processing.
This loader rotates 360deg clockwise. In that meantime of rotating it changes their color to blue, orange, yellow, and green. That means when it completed rotates 90deg its color change blue to orange and when it completed rotates 180deg its color change from orange to yellow and when it completed rotates 360deg its color change from yellow to green. The center “loading…” text smoothly fade out and fades in when the loader is rotating.
If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Color Changing Shiny Loader).
Video Tutorial of Color Changing Shiny Loader
If you like this program (Color Changing Shiny Loader) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.
If you want to create a beautifully designed website and keep visitors entertained while server operations finish processing., then use any loader. Peoples which are beginners in HTML CSS, this design will the best practice and example for him/her.
Preloader Design in HTML & CSS [Source Codes]
As always, before sharing the codes of this program (Color Changing Shiny Loader). Let’s a few talks about the main tags and codes of this program. In the HTML File, first I created a <div> with the class name “center” and placed all other tags inside it. Then I created another <div> with the class name “ring”. Inside <div class=”center”> tag I created a <span> tag.
In the CSS File, first I reset default margins and padding to 0; and put the background color black. Then I placed all elements at the center using CSS Flex property.
After placed elements at the center, I created a square box of height: 200px and width: 200px; Then I gave a border radius of 50%; to this square, to create a circle. And using :before pseudo-element, I created a duplicate layer of circle box of the same height-width. After that, I placed that loading… text at the center of the circle box. At last, I created an animation in the ring container and give the animation name. Then using @keyframe property I call this animation and rotates this ring 360deg clockwise. Inside @keyframe I gave that ring different colors at different degrees.
To create this program (Color Changing Shiny Loader). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Loading Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="center">
<div class="ring"></div>
<span>loading...</span>
</div>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
body{
margin: 0;
padding: 0;
font-family: montserrat;
background: black;
}
.center{
display: flex;
text-align: center;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.ring{
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
animation: ring 2s linear infinite;
}
@keyframes ring {
0%{
transform: rotate(0deg);
box-shadow: 1px 5px 2px #e65c00;
}
50%{
transform: rotate(180deg);
box-shadow: 1px 5px 2px #18b201;
}
100%{
transform: rotate(360deg);
box-shadow: 1px 5px 2px #0456c8;
}
}
.ring:before{
position: absolute;
content: '';
left: 0;
top: 0;
height: 100%;
width: 100%;
border-radius: 50%;
box-shadow: 0 0 5px rgba(255,255,255,.3);
}
span{
color: #737373;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 200px;
animation: text 3s ease-in-out infinite;
}
@keyframes text {
50%{
color: black;
}
}
That’s all, now you’ve successfully created a Color Changing Shiny Loader using HTML & CSS. If your code not work or you’ve faced any errors/problems then please comment down or contact us from the contact page.
