Css preloader

Developer

Size

3,888 Kb

Views

44,528

Css preloader Previews
Css preloader HTML Codes
Css preloader CSS Codes

How do I make an css preloader?

What is a css preloader? How do you make a css preloader? This script and codes were developed by Massimo on 17 September 2022, Saturday.

Css preloader Previews

Css preloader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>css preloader</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="outer"> <div class="inner"> <div class="small"></div> <div class="small"></div> <div class="small"></div> <div class="small"></div> </div> <div class="big"> <div class="small"></div> </div> <div class="big"> <div class="small"></div> </div>
</div>
</body>
</html>

Css preloader - Script Codes CSS Codes

@-webkit-keyframes left { 20% { -webkit-transform: translate(0, 0) rotate(-0.5turn); -ms-transform: translate(0, 0) rotate(-0.5turn); transform: translate(0, 0) rotate(-0.5turn); } 20.00001% { -webkit-transform: translate(120px, 0) rotate(0); -ms-transform: translate(120px, 0) rotate(0); transform: translate(120px, 0) rotate(0); } 40% { -webkit-transform: translate(120px, 0) rotate(0.5turn); -ms-transform: translate(120px, 0) rotate(0.5turn); transform: translate(120px, 0) rotate(0.5turn); } 40.00001% { -webkit-transform: translate(240px, 0) rotate(0); -ms-transform: translate(240px, 0) rotate(0); transform: translate(240px, 0) rotate(0); } 60% { -webkit-transform: translate(240px, 0) rotate(-1turn); -ms-transform: translate(240px, 0) rotate(-1turn); transform: translate(240px, 0) rotate(-1turn); } 60.00001% { -webkit-transform: translate(120px, 0) rotate(-0.5turn); -ms-transform: translate(120px, 0) rotate(-0.5turn); transform: translate(120px, 0) rotate(-0.5turn); } 80% { -webkit-transform: translate(120px, 0) rotate(0); -ms-transform: translate(120px, 0) rotate(0); transform: translate(120px, 0) rotate(0); } 80.00001% { -webkit-transform: translate(0, 0) rotate(0.5turn); -ms-transform: translate(0, 0) rotate(0.5turn); transform: translate(0, 0) rotate(0.5turn); } 100% { -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); }
}
@-moz-keyframes left { 20% { -webkit-transform: translate(0, 0) rotate(-0.5turn); -ms-transform: translate(0, 0) rotate(-0.5turn); transform: translate(0, 0) rotate(-0.5turn); } 20.00001% { -webkit-transform: translate(120px, 0) rotate(0); -ms-transform: translate(120px, 0) rotate(0); transform: translate(120px, 0) rotate(0); } 40% { -webkit-transform: translate(120px, 0) rotate(0.5turn); -ms-transform: translate(120px, 0) rotate(0.5turn); transform: translate(120px, 0) rotate(0.5turn); } 40.00001% { -webkit-transform: translate(240px, 0) rotate(0); -ms-transform: translate(240px, 0) rotate(0); transform: translate(240px, 0) rotate(0); } 60% { -webkit-transform: translate(240px, 0) rotate(-1turn); -ms-transform: translate(240px, 0) rotate(-1turn); transform: translate(240px, 0) rotate(-1turn); } 60.00001% { -webkit-transform: translate(120px, 0) rotate(-0.5turn); -ms-transform: translate(120px, 0) rotate(-0.5turn); transform: translate(120px, 0) rotate(-0.5turn); } 80% { -webkit-transform: translate(120px, 0) rotate(0); -ms-transform: translate(120px, 0) rotate(0); transform: translate(120px, 0) rotate(0); } 80.00001% { -webkit-transform: translate(0, 0) rotate(0.5turn); -ms-transform: translate(0, 0) rotate(0.5turn); transform: translate(0, 0) rotate(0.5turn); } 100% { -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); }
}
@-o-keyframes left { 20% { -webkit-transform: translate(0, 0) rotate(-0.5turn); -ms-transform: translate(0, 0) rotate(-0.5turn); transform: translate(0, 0) rotate(-0.5turn); } 20.00001% { -webkit-transform: translate(120px, 0) rotate(0); -ms-transform: translate(120px, 0) rotate(0); transform: translate(120px, 0) rotate(0); } 40% { -webkit-transform: translate(120px, 0) rotate(0.5turn); -ms-transform: translate(120px, 0) rotate(0.5turn); transform: translate(120px, 0) rotate(0.5turn); } 40.00001% { -webkit-transform: translate(240px, 0) rotate(0); -ms-transform: translate(240px, 0) rotate(0); transform: translate(240px, 0) rotate(0); } 60% { -webkit-transform: translate(240px, 0) rotate(-1turn); -ms-transform: translate(240px, 0) rotate(-1turn); transform: translate(240px, 0) rotate(-1turn); } 60.00001% { -webkit-transform: translate(120px, 0) rotate(-0.5turn); -ms-transform: translate(120px, 0) rotate(-0.5turn); transform: translate(120px, 0) rotate(-0.5turn); } 80% { -webkit-transform: translate(120px, 0) rotate(0); -ms-transform: translate(120px, 0) rotate(0); transform: translate(120px, 0) rotate(0); } 80.00001% { -webkit-transform: translate(0, 0) rotate(0.5turn); -ms-transform: translate(0, 0) rotate(0.5turn); transform: translate(0, 0) rotate(0.5turn); } 100% { -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); }
}
@keyframes left { 20% { -webkit-transform: translate(0, 0) rotate(-0.5turn); -ms-transform: translate(0, 0) rotate(-0.5turn); transform: translate(0, 0) rotate(-0.5turn); } 20.00001% { -webkit-transform: translate(120px, 0) rotate(0); -ms-transform: translate(120px, 0) rotate(0); transform: translate(120px, 0) rotate(0); } 40% { -webkit-transform: translate(120px, 0) rotate(0.5turn); -ms-transform: translate(120px, 0) rotate(0.5turn); transform: translate(120px, 0) rotate(0.5turn); } 40.00001% { -webkit-transform: translate(240px, 0) rotate(0); -ms-transform: translate(240px, 0) rotate(0); transform: translate(240px, 0) rotate(0); } 60% { -webkit-transform: translate(240px, 0) rotate(-1turn); -ms-transform: translate(240px, 0) rotate(-1turn); transform: translate(240px, 0) rotate(-1turn); } 60.00001% { -webkit-transform: translate(120px, 0) rotate(-0.5turn); -ms-transform: translate(120px, 0) rotate(-0.5turn); transform: translate(120px, 0) rotate(-0.5turn); } 80% { -webkit-transform: translate(120px, 0) rotate(0); -ms-transform: translate(120px, 0) rotate(0); transform: translate(120px, 0) rotate(0); } 80.00001% { -webkit-transform: translate(0, 0) rotate(0.5turn); -ms-transform: translate(0, 0) rotate(0.5turn); transform: translate(0, 0) rotate(0.5turn); } 100% { -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); }
}
@-webkit-keyframes right { 20% { -webkit-transform: translate(0, 0) rotate(-0.5turn); -ms-transform: translate(0, 0) rotate(-0.5turn); transform: translate(0, 0) rotate(-0.5turn); } 20.00001% { -webkit-transform: translate(-120px, 0) rotate(0); -ms-transform: translate(-120px, 0) rotate(0); transform: translate(-120px, 0) rotate(0); } 40% { -webkit-transform: translate(-120px, 0) rotate(0.5turn); -ms-transform: translate(-120px, 0) rotate(0.5turn); transform: translate(-120px, 0) rotate(0.5turn); } 40.00001% { -webkit-transform: translate(-240px, 0) rotate(0); -ms-transform: translate(-240px, 0) rotate(0); transform: translate(-240px, 0) rotate(0); } 60% { -webkit-transform: translate(-240px, 0) rotate(-1turn); -ms-transform: translate(-240px, 0) rotate(-1turn); transform: translate(-240px, 0) rotate(-1turn); } 60.00001% { -webkit-transform: translate(-120px, 0) rotate(-0.5turn); -ms-transform: translate(-120px, 0) rotate(-0.5turn); transform: translate(-120px, 0) rotate(-0.5turn); } 80% { -webkit-transform: translate(-120px, 0) rotate(0); -ms-transform: translate(-120px, 0) rotate(0); transform: translate(-120px, 0) rotate(0); } 80.00001% { -webkit-transform: translate(0, 0) rotate(0.5turn); -ms-transform: translate(0, 0) rotate(0.5turn); transform: translate(0, 0) rotate(0.5turn); } 100% { -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); }
}
@-moz-keyframes right { 20% { -webkit-transform: translate(0, 0) rotate(-0.5turn); -ms-transform: translate(0, 0) rotate(-0.5turn); transform: translate(0, 0) rotate(-0.5turn); } 20.00001% { -webkit-transform: translate(-120px, 0) rotate(0); -ms-transform: translate(-120px, 0) rotate(0); transform: translate(-120px, 0) rotate(0); } 40% { -webkit-transform: translate(-120px, 0) rotate(0.5turn); -ms-transform: translate(-120px, 0) rotate(0.5turn); transform: translate(-120px, 0) rotate(0.5turn); } 40.00001% { -webkit-transform: translate(-240px, 0) rotate(0); -ms-transform: translate(-240px, 0) rotate(0); transform: translate(-240px, 0) rotate(0); } 60% { -webkit-transform: translate(-240px, 0) rotate(-1turn); -ms-transform: translate(-240px, 0) rotate(-1turn); transform: translate(-240px, 0) rotate(-1turn); } 60.00001% { -webkit-transform: translate(-120px, 0) rotate(-0.5turn); -ms-transform: translate(-120px, 0) rotate(-0.5turn); transform: translate(-120px, 0) rotate(-0.5turn); } 80% { -webkit-transform: translate(-120px, 0) rotate(0); -ms-transform: translate(-120px, 0) rotate(0); transform: translate(-120px, 0) rotate(0); } 80.00001% { -webkit-transform: translate(0, 0) rotate(0.5turn); -ms-transform: translate(0, 0) rotate(0.5turn); transform: translate(0, 0) rotate(0.5turn); } 100% { -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); }
}
@-o-keyframes right { 20% { -webkit-transform: translate(0, 0) rotate(-0.5turn); -ms-transform: translate(0, 0) rotate(-0.5turn); transform: translate(0, 0) rotate(-0.5turn); } 20.00001% { -webkit-transform: translate(-120px, 0) rotate(0); -ms-transform: translate(-120px, 0) rotate(0); transform: translate(-120px, 0) rotate(0); } 40% { -webkit-transform: translate(-120px, 0) rotate(0.5turn); -ms-transform: translate(-120px, 0) rotate(0.5turn); transform: translate(-120px, 0) rotate(0.5turn); } 40.00001% { -webkit-transform: translate(-240px, 0) rotate(0); -ms-transform: translate(-240px, 0) rotate(0); transform: translate(-240px, 0) rotate(0); } 60% { -webkit-transform: translate(-240px, 0) rotate(-1turn); -ms-transform: translate(-240px, 0) rotate(-1turn); transform: translate(-240px, 0) rotate(-1turn); } 60.00001% { -webkit-transform: translate(-120px, 0) rotate(-0.5turn); -ms-transform: translate(-120px, 0) rotate(-0.5turn); transform: translate(-120px, 0) rotate(-0.5turn); } 80% { -webkit-transform: translate(-120px, 0) rotate(0); -ms-transform: translate(-120px, 0) rotate(0); transform: translate(-120px, 0) rotate(0); } 80.00001% { -webkit-transform: translate(0, 0) rotate(0.5turn); -ms-transform: translate(0, 0) rotate(0.5turn); transform: translate(0, 0) rotate(0.5turn); } 100% { -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); }
}
@keyframes right { 20% { -webkit-transform: translate(0, 0) rotate(-0.5turn); -ms-transform: translate(0, 0) rotate(-0.5turn); transform: translate(0, 0) rotate(-0.5turn); } 20.00001% { -webkit-transform: translate(-120px, 0) rotate(0); -ms-transform: translate(-120px, 0) rotate(0); transform: translate(-120px, 0) rotate(0); } 40% { -webkit-transform: translate(-120px, 0) rotate(0.5turn); -ms-transform: translate(-120px, 0) rotate(0.5turn); transform: translate(-120px, 0) rotate(0.5turn); } 40.00001% { -webkit-transform: translate(-240px, 0) rotate(0); -ms-transform: translate(-240px, 0) rotate(0); transform: translate(-240px, 0) rotate(0); } 60% { -webkit-transform: translate(-240px, 0) rotate(-1turn); -ms-transform: translate(-240px, 0) rotate(-1turn); transform: translate(-240px, 0) rotate(-1turn); } 60.00001% { -webkit-transform: translate(-120px, 0) rotate(-0.5turn); -ms-transform: translate(-120px, 0) rotate(-0.5turn); transform: translate(-120px, 0) rotate(-0.5turn); } 80% { -webkit-transform: translate(-120px, 0) rotate(0); -ms-transform: translate(-120px, 0) rotate(0); transform: translate(-120px, 0) rotate(0); } 80.00001% { -webkit-transform: translate(0, 0) rotate(0.5turn); -ms-transform: translate(0, 0) rotate(0.5turn); transform: translate(0, 0) rotate(0.5turn); } 100% { -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); }
}
@-webkit-keyframes first { 0%, 39% { background: #87db96; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 40% { background: #ca4f4f; -webkit-transform: translate(0, -5px) rotate(0); -ms-transform: translate(0, -5px) rotate(0); transform: translate(0, -5px) rotate(0); } 45%, 59% { background: #ca4f4f; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 60% { background: #87db96; -webkit-transform: translate(0, -5px) rotate(0); -ms-transform: translate(0, -5px) rotate(0); transform: translate(0, -5px) rotate(0); } 65% { background: #87db96; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); }
}
@-moz-keyframes first { 0%, 39% { background: #87db96; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 40% { background: #ca4f4f; -webkit-transform: translate(0, -5px) rotate(0); -ms-transform: translate(0, -5px) rotate(0); transform: translate(0, -5px) rotate(0); } 45%, 59% { background: #ca4f4f; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 60% { background: #87db96; -webkit-transform: translate(0, -5px) rotate(0); -ms-transform: translate(0, -5px) rotate(0); transform: translate(0, -5px) rotate(0); } 65% { background: #87db96; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); }
}
@-o-keyframes first { 0%, 39% { background: #87db96; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 40% { background: #ca4f4f; -webkit-transform: translate(0, -5px) rotate(0); -ms-transform: translate(0, -5px) rotate(0); transform: translate(0, -5px) rotate(0); } 45%, 59% { background: #ca4f4f; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 60% { background: #87db96; -webkit-transform: translate(0, -5px) rotate(0); -ms-transform: translate(0, -5px) rotate(0); transform: translate(0, -5px) rotate(0); } 65% { background: #87db96; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); }
}
@keyframes first { 0%, 39% { background: #87db96; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 40% { background: #ca4f4f; -webkit-transform: translate(0, -5px) rotate(0); -ms-transform: translate(0, -5px) rotate(0); transform: translate(0, -5px) rotate(0); } 45%, 59% { background: #ca4f4f; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 60% { background: #87db96; -webkit-transform: translate(0, -5px) rotate(0); -ms-transform: translate(0, -5px) rotate(0); transform: translate(0, -5px) rotate(0); } 65% { background: #87db96; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); }
}
@-webkit-keyframes fourth { 0%, 39% { background: #87db96; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 40% { background: #ca4f4f; -webkit-transform: translate(0, 5px) rotate(0); -ms-transform: translate(0, 5px) rotate(0); transform: translate(0, 5px) rotate(0); } 45%, 59% { background: #ca4f4f; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 60% { background: #87db96; -webkit-transform: translate(0, 5px) rotate(0); -ms-transform: translate(0, 5px) rotate(0); transform: translate(0, 5px) rotate(0); } 65% { background: #87db96; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); }
}
@-moz-keyframes fourth { 0%, 39% { background: #87db96; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 40% { background: #ca4f4f; -webkit-transform: translate(0, 5px) rotate(0); -ms-transform: translate(0, 5px) rotate(0); transform: translate(0, 5px) rotate(0); } 45%, 59% { background: #ca4f4f; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 60% { background: #87db96; -webkit-transform: translate(0, 5px) rotate(0); -ms-transform: translate(0, 5px) rotate(0); transform: translate(0, 5px) rotate(0); } 65% { background: #87db96; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); }
}
@-o-keyframes fourth { 0%, 39% { background: #87db96; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 40% { background: #ca4f4f; -webkit-transform: translate(0, 5px) rotate(0); -ms-transform: translate(0, 5px) rotate(0); transform: translate(0, 5px) rotate(0); } 45%, 59% { background: #ca4f4f; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 60% { background: #87db96; -webkit-transform: translate(0, 5px) rotate(0); -ms-transform: translate(0, 5px) rotate(0); transform: translate(0, 5px) rotate(0); } 65% { background: #87db96; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); }
}
@keyframes fourth { 0%, 39% { background: #87db96; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 40% { background: #ca4f4f; -webkit-transform: translate(0, 5px) rotate(0); -ms-transform: translate(0, 5px) rotate(0); transform: translate(0, 5px) rotate(0); } 45%, 59% { background: #ca4f4f; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 60% { background: #87db96; -webkit-transform: translate(0, 5px) rotate(0); -ms-transform: translate(0, 5px) rotate(0); transform: translate(0, 5px) rotate(0); } 65% { background: #87db96; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); }
}
@-webkit-keyframes second { 0%, 19% { background: #ca4f4f; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 20% { background: #efc247; -webkit-transform: translate(0, -5px) rotate(0); -ms-transform: translate(0, -5px) rotate(0); transform: translate(0, -5px) rotate(0); } 25%, 79% { background: #efc247; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 80% { background: #ca4f4f; -webkit-transform: translate(0, -5px) rotate(0); -ms-transform: translate(0, -5px) rotate(0); transform: translate(0, -5px) rotate(0); } 85% { background: #ca4f4f; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); }
}
@-moz-keyframes second { 0%, 19% { background: #ca4f4f; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 20% { background: #efc247; -webkit-transform: translate(0, -5px) rotate(0); -ms-transform: translate(0, -5px) rotate(0); transform: translate(0, -5px) rotate(0); } 25%, 79% { background: #efc247; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 80% { background: #ca4f4f; -webkit-transform: translate(0, -5px) rotate(0); -ms-transform: translate(0, -5px) rotate(0); transform: translate(0, -5px) rotate(0); } 85% { background: #ca4f4f; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); }
}
@-o-keyframes second { 0%, 19% { background: #ca4f4f; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 20% { background: #efc247; -webkit-transform: translate(0, -5px) rotate(0); -ms-transform: translate(0, -5px) rotate(0); transform: translate(0, -5px) rotate(0); } 25%, 79% { background: #efc247; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 80% { background: #ca4f4f; -webkit-transform: translate(0, -5px) rotate(0); -ms-transform: translate(0, -5px) rotate(0); transform: translate(0, -5px) rotate(0); } 85% { background: #ca4f4f; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); }
}
@keyframes second { 0%, 19% { background: #ca4f4f; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 20% { background: #efc247; -webkit-transform: translate(0, -5px) rotate(0); -ms-transform: translate(0, -5px) rotate(0); transform: translate(0, -5px) rotate(0); } 25%, 79% { background: #efc247; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 80% { background: #ca4f4f; -webkit-transform: translate(0, -5px) rotate(0); -ms-transform: translate(0, -5px) rotate(0); transform: translate(0, -5px) rotate(0); } 85% { background: #ca4f4f; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); }
}
@-webkit-keyframes third { 0%, 19% { background: #ca4f4f; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 20% { background: #efc247; -webkit-transform: translate(0, 5px) rotate(0); -ms-transform: translate(0, 5px) rotate(0); transform: translate(0, 5px) rotate(0); } 25%, 79% { background: #efc247; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 80% { background: #ca4f4f; -webkit-transform: translate(0, 5px) rotate(0); -ms-transform: translate(0, 5px) rotate(0); transform: translate(0, 5px) rotate(0); } 85% { background: #ca4f4f; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); }
}
@-moz-keyframes third { 0%, 19% { background: #ca4f4f; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 20% { background: #efc247; -webkit-transform: translate(0, 5px) rotate(0); -ms-transform: translate(0, 5px) rotate(0); transform: translate(0, 5px) rotate(0); } 25%, 79% { background: #efc247; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 80% { background: #ca4f4f; -webkit-transform: translate(0, 5px) rotate(0); -ms-transform: translate(0, 5px) rotate(0); transform: translate(0, 5px) rotate(0); } 85% { background: #ca4f4f; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); }
}
@-o-keyframes third { 0%, 19% { background: #ca4f4f; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 20% { background: #efc247; -webkit-transform: translate(0, 5px) rotate(0); -ms-transform: translate(0, 5px) rotate(0); transform: translate(0, 5px) rotate(0); } 25%, 79% { background: #efc247; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 80% { background: #ca4f4f; -webkit-transform: translate(0, 5px) rotate(0); -ms-transform: translate(0, 5px) rotate(0); transform: translate(0, 5px) rotate(0); } 85% { background: #ca4f4f; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); }
}
@keyframes third { 0%, 19% { background: #ca4f4f; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 20% { background: #efc247; -webkit-transform: translate(0, 5px) rotate(0); -ms-transform: translate(0, 5px) rotate(0); transform: translate(0, 5px) rotate(0); } 25%, 79% { background: #efc247; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 80% { background: #ca4f4f; -webkit-transform: translate(0, 5px) rotate(0); -ms-transform: translate(0, 5px) rotate(0); transform: translate(0, 5px) rotate(0); } 85% { background: #ca4f4f; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); }
}
@-webkit-keyframes main { 0%, 19% { background: #efc247; } 20%, 39% { background: #ca4f4f; } 40%, 59% { background: #87db96; } 60%, 79% { background: #ca4f4f; } 80% { background: #efc247; }
}
@-moz-keyframes main { 0%, 19% { background: #efc247; } 20%, 39% { background: #ca4f4f; } 40%, 59% { background: #87db96; } 60%, 79% { background: #ca4f4f; } 80% { background: #efc247; }
}
@-o-keyframes main { 0%, 19% { background: #efc247; } 20%, 39% { background: #ca4f4f; } 40%, 59% { background: #87db96; } 60%, 79% { background: #ca4f4f; } 80% { background: #efc247; }
}
@keyframes main { 0%, 19% { background: #efc247; } 20%, 39% { background: #ca4f4f; } 40%, 59% { background: #87db96; } 60%, 79% { background: #ca4f4f; } 80% { background: #efc247; }
}
body { margin: 0; background: #4f3c35; overflow: hidden;
}
body .outer { position: absolute; top: 50%; left: 50%; width: 300px; height: 120px; margin: -60px -150px;
}
body .outer .small { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin: -6px -6px; border-radius: 50%; background: #efc247; box-shadow: 0 0 2px #000;
}
body .outer .big { position: absolute; width: 120px; height: 120px; border-radius: 50%; -webkit-animation: left 4s infinite linear; -moz-animation: left 4s infinite linear; -o-animation: left 4s infinite linear; animation: left 4s infinite linear;
}
body .outer .big .small { -webkit-animation: main 4s infinite linear; -moz-animation: main 4s infinite linear; -o-animation: main 4s infinite linear; animation: main 4s infinite linear;
}
body .outer .big:last-child { right: 0; -webkit-animation: right 4s infinite linear; -moz-animation: right 4s infinite linear; -o-animation: right 4s infinite linear; animation: right 4s infinite linear;
}
body .outer .big:last-child .small { left: 100%;
}
body .outer .inner { position: absolute; top: 50%; left: 50%; width: 180px; height: 60px; margin: -30px -90px;
}
body .outer .inner .small:nth-child(1) { left: 0%; background: #87db96;
}
body .outer .inner .small:nth-child(2) { left: 33.33333%; background: #ca4f4f;
}
body .outer .inner .small:nth-child(3) { left: 66.66667%; background: #ca4f4f;
}
body .outer .inner .small:nth-child(4) { left: 100%; background: #87db96;
}
body .outer .inner .small:nth-child(1) { -webkit-animation: first 4s infinite linear; -moz-animation: first 4s infinite linear; -o-animation: first 4s infinite linear; animation: first 4s infinite linear;
}
body .outer .inner .small:nth-child(2) { -webkit-animation: second 4s infinite linear; -moz-animation: second 4s infinite linear; -o-animation: second 4s infinite linear; animation: second 4s infinite linear;
}
body .outer .inner .small:nth-child(3) { -webkit-animation: third 4s infinite linear; -moz-animation: third 4s infinite linear; -o-animation: third 4s infinite linear; animation: third 4s infinite linear;
}
body .outer .inner .small:nth-child(4) { -webkit-animation: fourth 4s infinite linear; -moz-animation: fourth 4s infinite linear; -o-animation: fourth 4s infinite linear; animation: fourth 4s infinite linear;
}

Home Page	Home
Developer	Massimo
Username	_massimo
Uploaded	September 17, 2022
Rating	4.5
Size	3,888 Kb
Views	44,528

Do you need developer help for Css preloader?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Massimo (_massimo) Script Codes

Name	Size
Shovel knight	35,694 Kb
ASCII art	2,756 Kb
Underwater particles	3,401 Kb
Pathfinder	5,360 Kb
Mandala drawing concept	3,474 Kb
Melting ice cream	3,839 Kb
Css spirals	5,074 Kb
Svg penguin	2,990 Kb
Spinner	3,072 Kb
Css carousel	2,977 Kb

Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
Project MMetro beta	Atomicsong	5,157 Kb
Free css icon set v2 - one div	Ben_jammin	0 Kb
Day 11 - Calendar Card	Arnellebalane	6,984 Kb
Review test	Otro_user_gil	4,054 Kb
Part 19 Bootstrap split button dropdown	Venkatesha	1,601 Kb
Cofee and sugar	Tripack	2,094 Kb
Awesome textarea	Ayoungh	1,977 Kb
CSS Donut Charts	Seanstopnik	2,908 Kb
Resume	Rottingroom	5,483 Kb
Table border-collapse property	Maxds	1,672 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!