How to add a custom preloader animation in website?
Q: why to add a custom preloader animation in website?
There are several reasons why you might want to add a custom preloader animation to your website:
To improve the user experience: A preloader animation can help keep users engaged while the website is loading, rather than leaving them staring at a blank screen. This can help reduce bounce rates and improve overall user satisfaction.
To signal that the website is loading: Preloader animations can help users understand that the website is still loading, rather than appearing to be stuck or broken.
To add a touch of personality: Preloader animations can be a fun way to add some personality to your website and make it more memorable for users.
To improve the overall design: Preloader animations can be a creative and visually appealing element of your website's design.
Overall, adding a custom preloader animation can help improve the user experience and add a touch of personality to your website.
- i. Copy HTML and CSS code from pre-loader generator sites.
- ii. Paste HTML and CSS code in your project.
- iii. Copy and paste the below javascript code inside script tag.
- iv. Rename .preloading class by given top html tag's class name of preloader.
- i. What is a preloader animation?
- ii. Can I customize the preloader animation for my website?
- iii. Are preloader animations necessary for my website?
- iv. How do I add a preloader animation to my website?
>>Two ways to create a preloader.
> First: Use preloader GIF (Graphics Interchange Format):
Note: Just google search for preloader gif, and you'll find tons of preloading gif. Download your favorite gif by right click and save as image.
>Second: Create a preloader by HTML and CSS:
Some of the best preloader generator sites are:
Copy HTML and CSS code from these sites.
>>JavaScript of preloader.
Note: Copy and paste inside the script tag.
window.addEventListener("load", () => { document.querySelector(".preloading").style.display = "none"; });
What the above JS code does.
=>When the website is successfully loaded, hide the preloader or .preloading class.
> source code:
>>How to add any GIF as a pre-loader on the website?
Step 1: Download your GIf.
Step 2: Put your GIF name in yellow highlighted place.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 100%;
height: 100vh;
}
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
/* ------------------ preloader -------------------- */
.preloading {
position: fixed;
z-index: 2147483647;
height: 100vh;
width: 100%;
background-image: url(./pro.gif);
background-position: center;
}
/* ------------------ end ------------- */
</style>
</head>
<body>
<!-- ------------ pre loader ---------------- -->
<div class="preloading"> </div>
<!-- ---------------- end -------------------------- -->
<div class="container">
<iframe class="responsive-iframe"
src="https://drive.google.com/embeddedfolderview?id=1AZLNtJKkOG9HWcaVb9-swV3j2lN_XtOA#grid"></iframe>
</div>
<script>
window.addEventListener("load", () => { document.querySelector(".preloading").style.display = "none"; });
</script>
</body>
</html>
>>How to add any Degine(HTML & CSS) as a pre-loader on the website?
Step 1: Copy HTML and CSS code from pre-loader generator sites.
step 2: Paste HTML and CSS code in your project.
step 3: Copy and paste the below javascript code inside <script> tag.
window.addEventListener("load", () => { document.querySelector(".preloading").style.display = "none"; });
Step 4: Rename .preloading class by given top html tag's class name of preloader. > like:
<div class="windows8">
<div class="wBall" id="wBall_1">
<div class="wInnerBall"></div>
</div>
<div class="wBall" id="wBall_2">
<div class="wInnerBall"></div>
</div>
<div class="wBall" id="wBall_3">
<div class="wInnerBall"></div>
</div>
<div class="wBall" id="wBall_4">
<div class="wInnerBall"></div>
</div>
<div class="wBall" id="wBall_5">
<div class="wInnerBall"></div>
</div>
</div>
Examples: Of preloader.
</html>
<div class="cssload-preloader">
<div class="cssload-preloader-box">
<div>L</div>
<div>o</div>
<div>a</div>
<div>d</div>
<div>i</div>
<div>n</div>
<div>g</div>
</div>
</div>
.cssload-preloader {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 10;
}
.cssload-preloader > .cssload-preloader-box {
position: absolute;
height: 29px;
top: 50%;
left: 50%;
margin: -15px 0 0 -146px;
perspective: 195px;
-o-perspective: 195px;
-ms-perspective: 195px;
-webkit-perspective: 195px;
-moz-perspective: 195px;
}
.cssload-preloader .cssload-preloader-box > div {
position: relative;
width: 29px;
height: 29px;
background: rgb(204,204,204);
float: left;
text-align: center;
line-height: 29px;
font-family: Verdana;
font-size: 19px;
color: rgb(255,255,255);
}.cssload-preloader .cssload-preloader-box > div:nth-child(1) {
background: rgb(51,102,255);
margin-right: 15px;
animation: cssload-movement 690ms ease 0ms infinite alternate;
-o-animation: cssload-movement 690ms ease 0ms infinite alternate;
-ms-animation: cssload-movement 690ms ease 0ms infinite alternate;
-webkit-animation: cssload-movement 690ms ease 0ms infinite alternate;
-moz-animation: cssload-movement 690ms ease 0ms infinite alternate;
}
.cssload-preloader .cssload-preloader-box > div:nth-child(2) {
background: rgb(51,102,255);
margin-right: 15px;
animation: cssload-movement 690ms ease 86.25ms infinite alternate;
-o-animation: cssload-movement 690ms ease 86.25ms infinite alternate;
-ms-animation: cssload-movement 690ms ease 86.25ms infinite alternate;
-webkit-animation: cssload-movement 690ms ease 86.25ms infinite alternate;
-moz-animation: cssload-movement 690ms ease 86.25ms infinite alternate;
}
.cssload-preloader .cssload-preloader-box > div:nth-child(3) {
background: rgb(51,102,255);
margin-right: 15px;
animation: cssload-movement 690ms ease 172.5ms infinite alternate;
-o-animation: cssload-movement 690ms ease 172.5ms infinite alternate;
-ms-animation: cssload-movement 690ms ease 172.5ms infinite alternate;
-webkit-animation: cssload-movement 690ms ease 172.5ms infinite alternate;
-moz-animation: cssload-movement 690ms ease 172.5ms infinite alternate;
}
.cssload-preloader .cssload-preloader-box > div:nth-child(4) {
background: rgb(51,102,255);
margin-right: 15px;
animation: cssload-movement 690ms ease 258.75ms infinite alternate;
-o-animation: cssload-movement 690ms ease 258.75ms infinite alternate;
-ms-animation: cssload-movement 690ms ease 258.75ms infinite alternate;
-webkit-animation: cssload-movement 690ms ease 258.75ms infinite alternate;
-moz-animation: cssload-movement 690ms ease 258.75ms infinite alternate;
}
.cssload-preloader .cssload-preloader-box > div:nth-child(5) {
background: rgb(51,102,255);
margin-right: 15px;
animation: cssload-movement 690ms ease 345ms infinite alternate;
-o-animation: cssload-movement 690ms ease 345ms infinite alternate;
-ms-animation: cssload-movement 690ms ease 345ms infinite alternate;
-webkit-animation: cssload-movement 690ms ease 345ms infinite alternate;
-moz-animation: cssload-movement 690ms ease 345ms infinite alternate;
}
.cssload-preloader .cssload-preloader-box > div:nth-child(6) {
background: rgb(51,102,255);
margin-right: 15px;
animation: cssload-movement 690ms ease 431.25ms infinite alternate;
-o-animation: cssload-movement 690ms ease 431.25ms infinite alternate;
-ms-animation: cssload-movement 690ms ease 431.25ms infinite alternate;
-webkit-animation: cssload-movement 690ms ease 431.25ms infinite alternate;
-moz-animation: cssload-movement 690ms ease 431.25ms infinite alternate;
}
.cssload-preloader .cssload-preloader-box > div:nth-child(7) {
background: rgb(51,102,255);
margin-right: 15px;
animation: cssload-movement 690ms ease 517.5ms infinite alternate;
-o-animation: cssload-movement 690ms ease 517.5ms infinite alternate;
-ms-animation: cssload-movement 690ms ease 517.5ms infinite alternate;
-webkit-animation: cssload-movement 690ms ease 517.5ms infinite alternate;
-moz-animation: cssload-movement 690ms ease 517.5ms infinite alternate;
}
@keyframes cssload-movement {
from {
transform: scale(1.0) translateY(0px) rotateX(0deg);
box-shadow: 0 0 0 rgba(0,0,0,0);
}
to {
transform: scale(1.5) translateY(-24px) rotateX(45deg);
box-shadow: 0 24px 39px rgb(51,102,255);
background: rgb(51,102,255);
}
}
@-o-keyframes cssload-movement {
from {
-o-transform: scale(1.0) translateY(0px) rotateX(0deg);
box-shadow: 0 0 0 rgba(0,0,0,0);
}
to {
-o-transform: scale(1.5) translateY(-24px) rotateX(45deg);
box-shadow: 0 24px 39px rgb(51,102,255);
background: rgb(51,102,255);
}
}
@-ms-keyframes cssload-movement {
from {
-ms-transform: scale(1.0) translateY(0px) rotateX(0deg);
box-shadow: 0 0 0 rgba(0,0,0,0);
}
to {
-ms-transform: scale(1.5) translateY(-24px) rotateX(45deg);
box-shadow: 0 24px 39px rgb(51,102,255);
background: rgb(51,102,255);
}
}
@-webkit-keyframes cssload-movement {
from {
-webkit-transform: scale(1.0) translateY(0px) rotateX(0deg);
box-shadow: 0 0 0 rgba(0,0,0,0);
}
to {
-webkit-transform: scale(1.5) translateY(-24px) rotateX(45deg);
box-shadow: 0 24px 39px rgb(51,102,255);
background: rgb(51,102,255);
}
}
@-moz-keyframes cssload-movement {
from {
-moz-transform: scale(1.0) translateY(0px) rotateX(0deg);
box-shadow: 0 0 0 rgba(0,0,0,0);
}
to {
-moz-transform: scale(1.5) translateY(-24px) rotateX(45deg);
box-shadow: 0 24px 39px rgb(51,102,255);
background: rgb(51,102,255);
}
}
HTML Code :
<div class="cssload-wrap">
<div class="cssload-container">
<span class="cssload-dots"></span>
<span class="cssload-dots"></span>
<span class="cssload-dots"></span>
<span class="cssload-dots"></span>
<span class="cssload-dots"></span>
<span class="cssload-dots"></span>
<span class="cssload-dots"></span>
<span class="cssload-dots"></span>
<span class="cssload-dots"></span>
<span class="cssload-dots"></span>
</div>
</div>
CSS code:
.cssload-wrap {
text-align: center;
line-height: 195px;
}
.cssload-container {
display: inline-block;
}
.cssload-dots {
display: inline-block;
position: relative;
}
.cssload-dots:not(:last-child) {
margin-right: 9px;
}
.cssload-dots:before, .cssload-dots:after {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
position: absolute;
}
.cssload-dots:nth-child(1):before {
transform: translateY(-200%);
-o-transform: translateY(-200%);
-ms-transform: translateY(-200%);
-webkit-transform: translateY(-200%);
-moz-transform: translateY(-200%);
animation: cssload-animBefore 1.15s linear infinite;
-o-animation: cssload-animBefore 1.15s linear infinite;
-ms-animation: cssload-animBefore 1.15s linear infinite;
-webkit-animation: cssload-animBefore 1.15s linear infinite;
-moz-animation: cssload-animBefore 1.15s linear infinite;
animation-delay: -1.04s;
-o-animation-delay: -1.04s;
-ms-animation-delay: -1.04s;
-webkit-animation-delay: -1.04s;
-moz-animation-delay: -1.04s;
background-color: rgb(255,0,0);
}
.cssload-dots:nth-child(1):after {
transform: translateY(200%);
-o-transform: translateY(200%);
-ms-transform: translateY(200%);
-webkit-transform: translateY(200%);
-moz-transform: translateY(200%);
animation: cssload-animAfter 1.15s linear infinite;
-o-animation: cssload-animAfter 1.15s linear infinite;
-ms-animation: cssload-animAfter 1.15s linear infinite;
-webkit-animation: cssload-animAfter 1.15s linear infinite;
-moz-animation: cssload-animAfter 1.15s linear infinite;
animation-delay: -1.04s;
-o-animation-delay: -1.04s;
-ms-animation-delay: -1.04s;
-webkit-animation-delay: -1.04s;
-moz-animation-delay: -1.04s;
background-color: rgb(119,119,119);
}
.cssload-dots:nth-child(2):before {
transform: translateY(-200%);
-o-transform: translateY(-200%);
-ms-transform: translateY(-200%);
-webkit-transform: translateY(-200%);
-moz-transform: translateY(-200%);
animation: cssload-animBefore 1.15s linear infinite;
-o-animation: cssload-animBefore 1.15s linear infinite;
-ms-animation: cssload-animBefore 1.15s linear infinite;
-webkit-animation: cssload-animBefore 1.15s linear infinite;
-moz-animation: cssload-animBefore 1.15s linear infinite;
animation-delay: -2.07s;
-o-animation-delay: -2.07s;
-ms-animation-delay: -2.07s;
-webkit-animation-delay: -2.07s;
-moz-animation-delay: -2.07s;
background-color: rgb(255,0,0);
}
.cssload-dots:nth-child(2):after {
transform: translateY(200%);
-o-transform: translateY(200%);
-ms-transform: translateY(200%);
-webkit-transform: translateY(200%);
-moz-transform: translateY(200%);
animation: cssload-animAfter 1.15s linear infinite;
-o-animation: cssload-animAfter 1.15s linear infinite;
-ms-animation: cssload-animAfter 1.15s linear infinite;
-webkit-animation: cssload-animAfter 1.15s linear infinite;
-moz-animation: cssload-animAfter 1.15s linear infinite;
animation-delay: -2.07s;
-o-animation-delay: -2.07s;
-ms-animation-delay: -2.07s;
-webkit-animation-delay: -2.07s;
-moz-animation-delay: -2.07s;
background-color: rgb(119,119,119);
}
.cssload-dots:nth-child(3):before {
transform: translateY(-200%);
-o-transform: translateY(-200%);
-ms-transform: translateY(-200%);
-webkit-transform: translateY(-200%);
-moz-transform: translateY(-200%);
animation: cssload-animBefore 1.15s linear infinite;
-o-animation: cssload-animBefore 1.15s linear infinite;
-ms-animation: cssload-animBefore 1.15s linear infinite;
-webkit-animation: cssload-animBefore 1.15s linear infinite;
-moz-animation: cssload-animBefore 1.15s linear infinite;
animation-delay: -3.11s;
-o-animation-delay: -3.11s;
-ms-animation-delay: -3.11s;
-webkit-animation-delay: -3.11s;
-moz-animation-delay: -3.11s;
background-color: rgb(255,0,0);
}
.cssload-dots:nth-child(3):after {
transform: translateY(200%);
-o-transform: translateY(200%);
-ms-transform: translateY(200%);
-webkit-transform: translateY(200%);
-moz-transform: translateY(200%);
animation: cssload-animAfter 1.15s linear infinite;
-o-animation: cssload-animAfter 1.15s linear infinite;
-ms-animation: cssload-animAfter 1.15s linear infinite;
-webkit-animation: cssload-animAfter 1.15s linear infinite;
-moz-animation: cssload-animAfter 1.15s linear infinite;
animation-delay: -3.11s;
-o-animation-delay: -3.11s;
-ms-animation-delay: -3.11s;
-webkit-animation-delay: -3.11s;
-moz-animation-delay: -3.11s;
background-color: rgb(119,119,119);
}
.cssload-dots:nth-child(4):before {
transform: translateY(-200%);
-o-transform: translateY(-200%);
-ms-transform: translateY(-200%);
-webkit-transform: translateY(-200%);
-moz-transform: translateY(-200%);
animation: cssload-animBefore 1.15s linear infinite;
-o-animation: cssload-animBefore 1.15s linear infinite;
-ms-animation: cssload-animBefore 1.15s linear infinite;
-webkit-animation: cssload-animBefore 1.15s linear infinite;
-moz-animation: cssload-animBefore 1.15s linear infinite;
animation-delay: -4.14s;
-o-animation-delay: -4.14s;
-ms-animation-delay: -4.14s;
-webkit-animation-delay: -4.14s;
-moz-animation-delay: -4.14s;
background-color: rgb(255,0,0);
}
.cssload-dots:nth-child(4):after {
transform: translateY(200%);
-o-transform: translateY(200%);
-ms-transform: translateY(200%);
-webkit-transform: translateY(200%);
-moz-transform: translateY(200%);
animation: cssload-animAfter 1.15s linear infinite;
-o-animation: cssload-animAfter 1.15s linear infinite;
-ms-animation: cssload-animAfter 1.15s linear infinite;
-webkit-animation: cssload-animAfter 1.15s linear infinite;
-moz-animation: cssload-animAfter 1.15s linear infinite;
animation-delay: -4.14s;
-o-animation-delay: -4.14s;
-ms-animation-delay: -4.14s;
-webkit-animation-delay: -4.14s;
-moz-animation-delay: -4.14s;
background-color: rgb(119,119,119);
}
.cssload-dots:nth-child(5):before {
transform: translateY(-200%);
-o-transform: translateY(-200%);
-ms-transform: translateY(-200%);
-webkit-transform: translateY(-200%);
-moz-transform: translateY(-200%);
animation: cssload-animBefore 1.15s linear infinite;
-o-animation: cssload-animBefore 1.15s linear infinite;
-ms-animation: cssload-animBefore 1.15s linear infinite;
-webkit-animation: cssload-animBefore 1.15s linear infinite;
-moz-animation: cssload-animBefore 1.15s linear infinite;
animation-delay: -5.18s;
-o-animation-delay: -5.18s;
-ms-animation-delay: -5.18s;
-webkit-animation-delay: -5.18s;
-moz-animation-delay: -5.18s;
background-color: rgb(255,0,0);
}
.cssload-dots:nth-child(5):after {
transform: translateY(200%);
-o-transform: translateY(200%);
-ms-transform: translateY(200%);
-webkit-transform: translateY(200%);
-moz-transform: translateY(200%);
animation: cssload-animAfter 1.15s linear infinite;
-o-animation: cssload-animAfter 1.15s linear infinite;
-ms-animation: cssload-animAfter 1.15s linear infinite;
-webkit-animation: cssload-animAfter 1.15s linear infinite;
-moz-animation: cssload-animAfter 1.15s linear infinite;
animation-delay: -5.18s;
-o-animation-delay: -5.18s;
-ms-animation-delay: -5.18s;
-webkit-animation-delay: -5.18s;
-moz-animation-delay: -5.18s;
background-color: rgb(119,119,119);
}
.cssload-dots:nth-child(6):before {
transform: translateY(-200%);
-o-transform: translateY(-200%);
-ms-transform: translateY(-200%);
-webkit-transform: translateY(-200%);
-moz-transform: translateY(-200%);
animation: cssload-animBefore 1.15s linear infinite;
-o-animation: cssload-animBefore 1.15s linear infinite;
-ms-animation: cssload-animBefore 1.15s linear infinite;
-webkit-animation: cssload-animBefore 1.15s linear infinite;
-moz-animation: cssload-animBefore 1.15s linear infinite;
animation-delay: -6.21s;
-o-animation-delay: -6.21s;
-ms-animation-delay: -6.21s;
-webkit-animation-delay: -6.21s;
-moz-animation-delay: -6.21s;
background-color: rgb(255,0,0);
}
.cssload-dots:nth-child(6):after {
transform: translateY(200%);
-o-transform: translateY(200%);
-ms-transform: translateY(200%);
-webkit-transform: translateY(200%);
-moz-transform: translateY(200%);
animation: cssload-animAfter 1.15s linear infinite;
-o-animation: cssload-animAfter 1.15s linear infinite;
-ms-animation: cssload-animAfter 1.15s linear infinite;
-webkit-animation: cssload-animAfter 1.15s linear infinite;
-moz-animation: cssload-animAfter 1.15s linear infinite;
animation-delay: -6.21s;
-o-animation-delay: -6.21s;
-ms-animation-delay: -6.21s;
-webkit-animation-delay: -6.21s;
-moz-animation-delay: -6.21s;
background-color: rgb(119,119,119);
}
.cssload-dots:nth-child(7):before {
transform: translateY(-200%);
-o-transform: translateY(-200%);
-ms-transform: translateY(-200%);
-webkit-transform: translateY(-200%);
-moz-transform: translateY(-200%);
animation: cssload-animBefore 1.15s linear infinite;
-o-animation: cssload-animBefore 1.15s linear infinite;
-ms-animation: cssload-animBefore 1.15s linear infinite;
-webkit-animation: cssload-animBefore 1.15s linear infinite;
-moz-animation: cssload-animBefore 1.15s linear infinite;
animation-delay: -7.25s;
-o-animation-delay: -7.25s;
-ms-animation-delay: -7.25s;
-webkit-animation-delay: -7.25s;
-moz-animation-delay: -7.25s;
background-color: rgb(255,0,0);
}
.cssload-dots:nth-child(7):after {
transform: translateY(200%);
-o-transform: translateY(200%);
-ms-transform: translateY(200%);
-webkit-transform: translateY(200%);
-moz-transform: translateY(200%);
animation: cssload-animAfter 1.15s linear infinite;
-o-animation: cssload-animAfter 1.15s linear infinite;
-ms-animation: cssload-animAfter 1.15s linear infinite;
-webkit-animation: cssload-animAfter 1.15s linear infinite;
-moz-animation: cssload-animAfter 1.15s linear infinite;
animation-delay: -7.25s;
-o-animation-delay: -7.25s;
-ms-animation-delay: -7.25s;
-webkit-animation-delay: -7.25s;
-moz-animation-delay: -7.25s;
background-color: rgb(119,119,119);
}
.cssload-dots:nth-child(8):before {
transform: translateY(-200%);
-o-transform: translateY(-200%);
-ms-transform: translateY(-200%);
-webkit-transform: translateY(-200%);
-moz-transform: translateY(-200%);
animation: cssload-animBefore 1.15s linear infinite;
-o-animation: cssload-animBefore 1.15s linear infinite;
-ms-animation: cssload-animBefore 1.15s linear infinite;
-webkit-animation: cssload-animBefore 1.15s linear infinite;
-moz-animation: cssload-animBefore 1.15s linear infinite;
animation-delay: -8.28s;
-o-animation-delay: -8.28s;
-ms-animation-delay: -8.28s;
-webkit-animation-delay: -8.28s;
-moz-animation-delay: -8.28s;
background-color: rgb(255,0,0);
}
.cssload-dots:nth-child(8):after {
transform: translateY(200%);
-o-transform: translateY(200%);
-ms-transform: translateY(200%);
-webkit-transform: translateY(200%);
-moz-transform: translateY(200%);
animation: cssload-animAfter 1.15s linear infinite;
-o-animation: cssload-animAfter 1.15s linear infinite;
-ms-animation: cssload-animAfter 1.15s linear infinite;
-webkit-animation: cssload-animAfter 1.15s linear infinite;
-moz-animation: cssload-animAfter 1.15s linear infinite;
animation-delay: -8.28s;
-o-animation-delay: -8.28s;
-ms-animation-delay: -8.28s;
-webkit-animation-delay: -8.28s;
-moz-animation-delay: -8.28s;
background-color: rgb(119,119,119);
}
.cssload-dots:nth-child(9):before {
transform: translateY(-200%);
-o-transform: translateY(-200%);
-ms-transform: translateY(-200%);
-webkit-transform: translateY(-200%);
-moz-transform: translateY(-200%);
animation: cssload-animBefore 1.15s linear infinite;
-o-animation: cssload-animBefore 1.15s linear infinite;
-ms-animation: cssload-animBefore 1.15s linear infinite;
-webkit-animation: cssload-animBefore 1.15s linear infinite;
-moz-animation: cssload-animBefore 1.15s linear infinite;
animation-delay: -9.32s;
-o-animation-delay: -9.32s;
-ms-animation-delay: -9.32s;
-webkit-animation-delay: -9.32s;
-moz-animation-delay: -9.32s;
background-color: #F00;
}
.cssload-dots:nth-child(9):after {
transform: translateY(200%);
-o-transform: translateY(200%);
-ms-transform: translateY(200%);
-webkit-transform: translateY(200%);
-moz-transform: translateY(200%);
animation: cssload-animAfter 1.15s linear infinite;
-o-animation: cssload-animAfter 1.15s linear infinite;
-ms-animation: cssload-animAfter 1.15s linear infinite;
-webkit-animation: cssload-animAfter 1.15s linear infinite;
-moz-animation: cssload-animAfter 1.15s linear infinite;
animation-delay: -9.32s;
-o-animation-delay: -9.32s;
-ms-animation-delay: -9.32s;
-webkit-animation-delay: -9.32s;
-moz-animation-delay: -9.32s;
background-color: #777;
}
.cssload-dots:nth-child(10):before {
transform: translateY(-200%);
-o-transform: translateY(-200%);
-ms-transform: translateY(-200%);
-webkit-transform: translateY(-200%);
-moz-transform: translateY(-200%);
animation: cssload-animBefore 1.15s linear infinite;
-o-animation: cssload-animBefore 1.15s linear infinite;
-ms-animation: cssload-animBefore 1.15s linear infinite;
-webkit-animation: cssload-animBefore 1.15s linear infinite;
-moz-animation: cssload-animBefore 1.15s linear infinite;
animation-delay: -10.35s;
-o-animation-delay: -10.35s;
-ms-animation-delay: -10.35s;
-webkit-animation-delay: -10.35s;
-moz-animation-delay: -10.35s;
background-color: #F00;
}
.cssload-dots:nth-child(10):after {
transform: translateY(200%);
-o-transform: translateY(200%);
-ms-transform: translateY(200%);
-webkit-transform: translateY(200%);
-moz-transform: translateY(200%);
animation: cssload-animAfter 1.15s linear infinite;
-o-animation: cssload-animAfter 1.15s linear infinite;
-ms-animation: cssload-animAfter 1.15s linear infinite;
-webkit-animation: cssload-animAfter 1.15s linear infinite;
-moz-animation: cssload-animAfter 1.15s linear infinite;
animation-delay: -10.35s;
-o-animation-delay: -10.35s;
-ms-animation-delay: -10.35s;
-webkit-animation-delay: -10.35s;
-moz-animation-delay: -10.35s;
background-color: #777;
}
@keyframes cssload-animBefore {
0% {
transform: scale(1) translateY(-200%);
z-index: 1;
}
25% {
transform: scale(1.3) translateY(0);
z-index: 1;
}
50% {
transform: scale(1) translateY(200%);
z-index: -1;
}
75% {
transform: scale(0.7) translateY(0);
z-index: -1;
}
100% {
transform: scale(1) translateY(-200%);
z-index: -1;
}
}
@-o-keyframes cssload-animBefore {
0% {
-o-transform: scale(1) translateY(-200%);
z-index: 1;
}
25% {
-o-transform: scale(1.3) translateY(0);
z-index: 1;
}
50% {
-o-transform: scale(1) translateY(200%);
z-index: -1;
}
75% {
-o-transform: scale(0.7) translateY(0);
z-index: -1;
}
100% {
-o-transform: scale(1) translateY(-200%);
z-index: -1;
}
}
@-ms-keyframes cssload-animBefore {
0% {
-ms-transform: scale(1) translateY(-200%);
z-index: 1;
}
25% {
-ms-transform: scale(1.3) translateY(0);
z-index: 1;
}
50% {
-ms-transform: scale(1) translateY(200%);
z-index: -1;
}
75% {
-ms-transform: scale(0.7) translateY(0);
z-index: -1;
}
100% {
-ms-transform: scale(1) translateY(-200%);
z-index: -1;
}
}
@-webkit-keyframes cssload-animBefore {
0% {
-webkit-transform: scale(1) translateY(-200%);
z-index: 1;
}
25% {
-webkit-transform: scale(1.3) translateY(0);
z-index: 1;
}
50% {
-webkit-transform: scale(1) translateY(200%);
z-index: -1;
}
75% {
-webkit-transform: scale(0.7) translateY(0);
z-index: -1;
}
100% {
-webkit-transform: scale(1) translateY(-200%);
z-index: -1;
}
}
@-moz-keyframes cssload-animBefore {
0% {
-moz-transform: scale(1) translateY(-200%);
z-index: 1;
}
25% {
-moz-transform: scale(1.3) translateY(0);
z-index: 1;
}
50% {
-moz-transform: scale(1) translateY(200%);
z-index: -1;
}
75% {
-moz-transform: scale(0.7) translateY(0);
z-index: -1;
}
100% {
-moz-transform: scale(1) translateY(-200%);
z-index: -1;
}
}
@keyframes cssload-animAfter {
0% {
transform: scale(1) translateY(200%);
z-index: -1;
}
25% {
transform: scale(0.7) translateY(0);
z-index: -1;
}
50% {
transform: scale(1) translateY(-200%);
z-index: 1;
}
75% {
transform: scale(1.3) translateY(0);
z-index: 1;
}
100% {
transform: scale(1) translateY(200%);
z-index: 1;
}
}
@-o-keyframes cssload-animAfter {
0% {
-o-transform: scale(1) translateY(200%);
z-index: -1;
}
25% {
-o-transform: scale(0.7) translateY(0);
z-index: -1;
}
50% {
-o-transform: scale(1) translateY(-200%);
z-index: 1;
}
75% {
-o-transform: scale(1.3) translateY(0);
z-index: 1;
}
100% {
-o-transform: scale(1) translateY(200%);
z-index: 1;
}
}
@-ms-keyframes cssload-animAfter {
0% {
-ms-transform: scale(1) translateY(200%);
z-index: -1;
}
25% {
-ms-transform: scale(0.7) translateY(0);
z-index: -1;
}
50% {
-ms-transform: scale(1) translateY(-200%);
z-index: 1;
}
75% {
-ms-transform: scale(1.3) translateY(0);
z-index: 1;
}
100% {
-ms-transform: scale(1) translateY(200%);
z-index: 1;
}
}
@-webkit-keyframes cssload-animAfter {
0% {
-webkit-transform: scale(1) translateY(200%);
z-index: -1;
}
25% {
-webkit-transform: scale(0.7) translateY(0);
z-index: -1;
}
50% {
-webkit-transform: scale(1) translateY(-200%);
z-index: 1;
}
75% {
-webkit-transform: scale(1.3) translateY(0);
z-index: 1;
}
100% {
-webkit-transform: scale(1) translateY(200%);
z-index: 1;
}
}
@-moz-keyframes cssload-animAfter {
0% {
-moz-transform: scale(1) translateY(200%);
z-index: -1;
}
25% {
-moz-transform: scale(0.7) translateY(0);
z-index: -1;
}
50% {
-moz-transform: scale(1) translateY(-200%);
z-index: 1;
}
75% {
-moz-transform: scale(1.3) translateY(0);
z-index: 1;
}
100% {
-moz-transform: scale(1) translateY(200%);
z-index: 1;
}
}
FAQs: of
+= -= *= /= %= &= ^= |= <<= >>= >>>=
A preloader animation is a visual element that is displayed while a website is loading. It is typically a short animation or graphic that is meant to keep the user entertained or engaged while the website loads in the background.
To add a preloader animation to your website, you will need to first create the animation or design the graphic you want to use. Then, you will need to use HTML, CSS, and possibly JavaScript to create the preloader element and specify when it should be displayed on your website.
Preloader animations are not necessary for every website, but they can be a useful tool for improving the user experience. If your website takes a long time to load, or if it has a lot of large media files, a preloader animation can help keep the user engaged while they wait for the content to fully load.
Yes, you can customize the preloader animation for your website by creating your own design or using a pre-made animation. You can also customize the duration of the animation and when it is displayed on your website using HTML, CSS, and JavaScript
