Color Changing Shiny Loader using CSS | Loader CSS, this shiny CSS spinner make your website awesome.
Colorful Shiny Loader CSS
Loader.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Loader</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="center">
<div class="text">LOADING</div>
<div class="ring">
</div>
</div>
</body>
</html>
Style.css
*
{
margin: 0;
padding: 0;
font-family: verdana;
background: #262626;
}
.center{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
}
.ring
{
width: 300px;
height: 300px;
border-radius: 50%;
/*box-shadow:1px 5px 2px #ff002e;*/
background: transparent;
animation: ani 2s linear infinite;
}
.text
{
width: 300px;
height: 300px;
border-radius: 50%;
color:#fff;
position: absolute;
text-align: center;
line-height: 300px;
top:0;
left: 0;
font-size:2em;
background: transparent;
box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}
@keyframes ani {
0%{
transform: rotate(0deg);
box-shadow:1px 5px 2px #ff002e;
}
50%{
transform: rotate(180deg);
box-shadow:1px 5px 2px #18a401;
}
100%{
transform: rotate(360deg);
box-shadow:1px 5px 2px #033e8e;
}
}
Output
(this image is not animated just an image, try yourself to see animation)
Download Code: Download
This Animated CSS Shiny Loader helps you to understand Pure CSS Animation.
Hello sir I am also the blogger and I want to publish post on your site.
ok, what's your topic. Msg me on my instagram account: @code_snail
Right away I am going away to do my breakfast, later than having
my breakfast coming again to read more news.
It's an amazing post in support of all the internet users; they will obtain advantage from it I am sure.