Steps to add preloader Animation
Step-1 Go to your blog Dashboard and click Backup of your Theme.
Step-2 Press ctrl F and search ]]><b:skin> and paste the CSS code just above it.
/* Preloader Animation In Blogger */
.preloader {
position: fixed;
width: 100%;
height: 100vh;
background: #0f0f0f;
left: 0;
top: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: all 400ms;
z-index: 2000;
}
.preloader.hide {
opacity: 0;
pointer-events: none;
}
.preloader .preloader-text {
color: #838383;
text-transform: uppercase;
letter-spacing: 8px;
font-size: 15px;
}
.preloader .dots-container {
display: flex;
margin-bottom: 48px;
}
.preloader .dot {
background: red;
width: 20px;
height: 20px;
border-radius: 50%;
margin: 0 5px;
}
.preloader .dot.red {
background: #ef476f;
animation: bounce 1000ms infinite;
}
.preloader .dot.green {
background: #06d6a0;
animation: bounce 1000ms infinite;
animation-delay: 200ms;
}
.preloader .dot.yellow {
background: #ffd166;
animation: bounce 1000ms infinite;
animation-delay: 400ms;
}
@keyframes bounce {
50% {
transform: translateY(16px);
}
100% {
transform: translateY(0);
}
}
Step-3 Now search for </body> tag and paste the HTML and Java Script code above it.
<div class="preloader">
<div class="dots-container">
<div class="dot red"></div>
<div class="dot green"></div>
<div class="dot yellow"></div>
</div>
<div class="preloader-text">
Loading...
</div>
</div>
<script>
const preloader = document.querySelector(".preloader");
const preloaderDuration = 500;
const hidePreloader = () => {
setTimeout(() => {
preloader.classList.add("hide");
}, preloaderDuration);
}
window.addEventListener("load", hidePreloader);
</script>
Step-4 save your theme and the preload animation is added to your blog.
you can also add the preloading effect to the homepage only by adding if condition
wrapping both HTML and Java Script Code.
<b:if cond= 'data:blog.url == "URL"'> </b:if>
0 Comments