SVG Loading Animation / Preloader in Blogger [CSS +HTML]

Introduction:

Hello,

Welcome to another article of blogger tutorial and today we are going to integrate a preloader in our blogger website which uses only CSS and simple HTML for its execution and you can change the style of preloader by using already available codes and also the codes which we have given in this article with your choice.

So let's start over tutorial by a small guides of what is preloader!

What is preloader?

A preloader is a static picture or animated css loaders displayed on-screen while the website is loading in the background. 

The preloader animation finishes when the time in your script runs out and the page is fully loaded and ready to be shown, and your page is displayed to visitors.

What Is Preloading Effect?

The workings of the Preloading Effect in Blogger are transitions that will appear automatically when loading pages on the blog and will disappear after the page is fully loaded.

The Preloading effect that I will share will not affect the speed of the blog because it is very light pure CSS and SVG without images.

Advantages of Preloader?

1. To tell customers that your website has not crashed but is simply loading.
2. To provide your consumers with something to watch while they wait for the website to load.
3. To provide your brand’s recognition and make an impression (some preloaders allow you to customize it so that your brand is front and center even before users see your content.)

CSS codes for some Loading Animation for BLOGGER

<style> .lds-dual-ring {width: auto;height: auto;}.lds-dual-ring:after { margin:50%; content: " "; display: block;  width: 40px;  height: 40px;  border-radius: 50%;  border: 6px solid #ffa500;  border-color: #ffa500 transparent #ffa500 transparent;  animation: lds-dual-ring 1.2s linear infinite;}@keyframes lds-dual-ring {  0% {    transform: rotate(0deg);  }  100% {    transform: rotate(360deg);  }      }<style/> 

<div class="lds-dual-ring"></div>

<style> .lds-circle{display:inline-block;transform:translateZ(1px)} .lds-circle> div{display:inline-block;width:64px;height:64px;margin:8px;border-radius:50%;background:#ffa500;animation:lds-circle 2.4s cubic-bezier(0,0.2,0.8,1) infinite}@keyframes lds-circle{0%,100%{animation-timing-function:cubic-bezier(0.5,0,1,0.5)} 0%{transform:rotateY(0deg)} 50%{transform:rotateY(1800deg);animation-timing-function:cubic-bezier(0,0.5,0.5,1)} 100%{transform:rotateY(3600deg)} }<style/> 

<div class="lds-circle"><div></div></div>

<style> .lds-ring {  position: relative;  width: 20px; height: 20px;}.lds-ring div {  box-sizing: border-box;  display: block;  position: absolute;  width: 20px;  height: 20px;  margin: 8px;  border: 8px solid #ffa500;  border-radius: 50%; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: #ffa500 transparent transparent transparent;}.lds-ring div:nth-child(1) {  animation-delay: -0.45s;}.lds-ring div:nth-child(2) {  animation-delay: -0.3s;}.lds-ring div:nth-child(3) {  animation-delay: -0.15s;} @keyframes lds-ring { 0% {    transform: rotate(0deg); } 100% { transform: rotate(360deg); }}<style/> 

<div class="lds-ring"><div></div><div></div><div></div></div>

<style> .lds-hourglass{display:inline-block;position:relative;width:30px;height:30px}.lds-hourglass:after{content:" ";display:block;border-radius:50%;width:0;height:0;margin:10px;box-sizing:border-box;border:16px solid orange;border-color:orange transparent;animation:lds-hourglass 1.2s infinite}@keyframes lds-hourglass{0%{transform:rotate(0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)} 50%{transform:rotate(900deg);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)} 100%{transform:rotate(1800deg)} }<style/> 

<div class="lds-hourglass"></div>

<style> .lds-heart{display:inline-block;width:10px;height:10px;transform:rotate(45deg);transform-origin:20px 20px}.lds-heart div{top:12px;left:12px;width:32px;height:32px;background:#ffa500;animation:lds-heart 1.2s infinite cubic-bezier(0.215,0.61,0.355,1)}.lds-heart div:after,.lds-heart div:before{content:" ";position:absolute;display:block;width:32px;height:32px;background:#ffa500}.lds-heart div:before{left:-24px;border-radius:50% 0 0 50%}.lds-heart div:after{top:-24px;border-radius:50% 50% 0 0}@keyframes lds-heart {0%{transform:scale(0.95)}5%{transform:scale(1.1)}39%{transform:scale(0.85)}45%{transform:scale(1)}60%{transform:scale(0.95)}100%{transform:scale(0.9)}} 

<div class="lds-heart"><div></div></div>

<style> .lds-facebook { display: inline-block;  position: relative;  width: 30px;  height: 30px;}.lds-facebook div {  display: inline-block;  position: absolute;  left: 8px;  width: 16px;  background: #ffa500;  animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;}.lds-facebook div:nth-child(1) {  left: 8px; animation-delay: -0.24s;}.lds-facebook div:nth-child(2) {  left: 32px;  animation-delay: -0.12s;}.lds-facebook div:nth-child(3) {  left: 56px;  animation-delay: 0;}@keyframes lds-facebook {  0% {   top: 8px;    height: 20px;  } 50%, 100% {    top: 24px;    height: 20px;  }}<style/> 

<div class="lds-facebook"><div></div><div></div><div></div></div>

<style> .lds-ellipsis {  display: inline-block;  position: relative;  width: 30px;  height: 30px;}.lds-ellipsis div {  position: absolute;  top: 33px; width: 13px; height: 13px;  border-radius: 50%;  background: #ffa500;  animation-timing-function: cubic-bezier(0, 1, 1, 0);}.lds-ellipsis div:nth-child(1) {  left: 8px;  animation: lds-ellipsis1 0.6s infinite;}.lds-ellipsis div:nth-child(2) {  left: 8px;  animation: lds-ellipsis2 0.6s infinite;}.lds-ellipsis div:nth-child(3) {  left: 32px;  animation: lds-ellipsis2 0.6s infinite;}.lds-ellipsis div:nth-child(4) {  left: 56px;  animation: lds-ellipsis3 0.6s infinite;}@keyframes lds-ellipsis1 {  0% {    transform: scale(0);  }  100% {   transform: scale(1);  }}@keyframes lds-ellipsis3 {  0% {    transform: scale(1);  }  100% {    transform: scale(0);  }}@keyframes lds-ellipsis2 {  0% {    transform: translate(0, 0);  }  100% {    transform: translate(24px, 0);  }}<style/> 

<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>

<style> .lds-grid {  display: inline-block;  position: relative;  width: 30px;  height: 30px;}.lds-grid div {  position: absolute;  width: 16px;  height: 16px;  border-radius: 50%;  background: #ffa500;  animation: lds-grid 1.2s linearinfinite;}.lds-grid div:nth-child(1) {  top: 8px;  left: 8px;  animation-delay: 0s;}.lds-grid div:nth-child(2) {  top: 8px;left: 32px;  animation-delay: -0.4s;}.lds-grid div:nth-child(3) {  top: 8px;  left: 56px; animation-delay: -0.8s;}.lds-grid div:nth-child(4) {  top: 32px;  left: 8px; animation-delay: -0.4s;}.lds-grid div:nth-child(5) { top: 32px;  left: 32px;  animation-delay: -0.8s;}.lds-grid div:nth-child(6) {  top: 32px;  left: 56px; animation-delay: -1.2s;}.lds-grid div:nth-child(7) {  top: 56px; left: 8px;  animation-delay: -0.8s;}.lds-grid div:nth-child(8) { top: 56px;  left: 32px;  animation-delay: -1.2s;}.lds-grid div:nth-child(9) {  top: 56px;  left: 56px;  animation-delay: -1.6s;}@keyframes lds-grid {  0%, 100% {    opacity: 1;  }  50% {    opacity: 0.5;  }}<style/> 

<div class="lds-grid"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div> 

<style> .lds-spinner{color:official;display:inline-block;position:relative;width:30px;height:30px}.lds-spinner div{transform-origin:40px 40px;animation:lds-spinner 1.2s linear infinite}.lds-spinner div:after{content:" ";display:block;position:absolute;top:3px;left:37px;width:6px;height:18px;border-radius:20%;background:#ffa500}.lds-spinner div:nth-child(1){transform:rotate(0deg);animation-delay:-1.1s}.lds-spinner div:nth-child(2){transform:rotate(30deg);animation-delay:-1s}.lds-spinner div:nth-child(3){transform:rotate(60deg);animation-delay:-0.9s}.lds-spinner div:nth-child(4){transform:rotate(90deg);animation-delay:-0.8s}.lds-spinner div:nth-child(5){transform:rotate(120deg);animation-delay:-0.7s}.lds-spinner div:nth-child(6){transform:rotate(150deg);animation-delay:-0.6s}.lds-spinner div:nth-child(7){transform:rotate(180deg);animation-delay:-0.5s}.lds-spinner div:nth-child(8){transform:rotate(210deg);animation-delay:-0.4s}.lds-spinner div:nth-child(9){transform:rotate(240deg);animation-delay:-0.3s}.lds-spinner div:nth-child(10){transform:rotate(270deg);animation-delay:-0.2s}.lds-spinner div:nth-child(11){transform:rotate(300deg);animation-delay:-0.1s}.lds-spinner div:nth-child(12){transform:rotate(330deg);animation-delay:0s}@keyframes lds-spinner{0%{opacity:1}100%{opacity:0}}<style/> 

<div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

<style> .lds-ripple{display:inline-block;position:relative;width:30px;height:30px}.lds-ripple div{position:absolute;border:4px solid #ffa500;opacity:1;border-radius:50%;animation:lds-ripple 1s cubic-bezier(0,0.2,0.8,1) infinite}.lds-ripple div:nth-child(2){animation-delay:-0.5s}@keyframes lds-ripple{0%{top:36px;left:36px;width:0;height:0;opacity:1}100%{top:0;left:0;width:72px;height:72px;opacity:0}}<style/> 

<div class="lds-ripple"><div></div><div></div></div>

<style> .lds-roller{display:inline-block;position:relative;width:30px;height:30px}.lds-roller div{animation:lds-roller 1.2s cubic-bezier(0.5,0,0.5,1) infinite;transform-origin:40px 40px}.lds-roller div:after{content:" ";display:block;position:absolute;width:7px;height:7px;border-radius:50%;background:#ffa500;margin:-4px 0 0 -4px}.lds-roller div:nth-child(1){animation-delay:-0.036s}.lds-roller div:nth-child(1):after{top:63px;left:63px}.lds-roller div:nth-child(2){animation-delay:-0.072s}.lds-roller div:nth-child(2):after{top:68px;left:56px}.lds-roller div:nth-child(3){animation-delay:-0.108s}.lds-roller div:nth-child(3):after{top:71px;left:48px}.lds-roller div:nth-child(4){animation-delay:-0.144s}.lds-roller div:nth-child(4):after{top:72px;left:40px}.lds-roller div:nth-child(5){animation-delay:-0.18s}.lds-roller div:nth-child(5):after{top:71px;left:32px}.lds-roller div:nth-child(6){animation-delay:-0.216s}.lds-roller div:nth-child(6):after{top:68px;left:24px}.lds-roller div:nth-child(7){animation-delay:-0.252s}.lds-roller div:nth-child(7):after{top:63px;left:17px}.lds-roller div:nth-child(8){animation-delay:-0.288s}.lds-roller div:nth-child(8):after{top:56px;left:12px}@keyframes lds-roller{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}<style/> 

<div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

<style> .lds-default{display:inline-block;position:relative;width:30px;height:30px}.lds-default div{position:absolute;width:6px;height:6px;background:#ffa500;border-radius:50%;animation:lds-default 1.2s linear infinite}.lds-default div:nth-child(1){animation-delay:0s;top:37px;left:66px}.lds-default div:nth-child(2){animation-delay:-0.1s;top:22px;left:62px}.lds-default div:nth-child(3){animation-delay:-0.2s;top:11px;left:52px}.lds-default div:nth-child(4){animation-delay:-0.3s;top:7px;left:37px}.lds-default div:nth-child(5){animation-delay:-0.4s;top:11px;left:22px}.lds-default div:nth-child(6){animation-delay:-0.5s;top:22px;left:11px}.lds-default div:nth-child(7){animation-delay:-0.6s;top:37px;left:7px}.lds-default div:nth-child(8){animation-delay:-0.7s;top:52px;left:11px}.lds-default div:nth-child(9){animation-delay:-0.8s;top:62px;left:22px}.lds-default div:nth-child(10){animation-delay:-0.9s;top:66px;left:37px}.lds-default div:nth-child(11){animation-delay:-1s;top:62px;left:52px}.lds-default div:nth-child(12){animation-delay:-1.1s;top:52px;left:62px}@keyframes lds-default{0%,20%,80%,100%{transform:scale(1)}50%{transform:scale(1.5)}}<style/> 

<div class="lds-default"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

How to add a preloader to our Blogger website?

So it is very easy to add a preloader to a Blogger website .

You just have to follow the below steps and at the following codes which will add preloader to your website.

Steps to add the preloader to Blogger Website:

1. Copy the code below this guide
2. Go to Blogger.com > Themes > Edit HTML > Search for </body> and paste it above the </body>.
3. Change the style and loading time from below code to customise as per your need.
4. Save the template and see the results 😌.

<style>.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:#ffa500;text-transform:uppercase;letter-spacing:8px;font-size:15px}.preloader .dots-container{display:flex;margin-bottom:50px;margin-right:20%;text-align:center}.dots-container .lds-spinner{color:official;display:inline-block;position:relative;width:30px;height:30px}.lds-spinner div{transform-origin:40px 40px;animation:lds-spinner 1.2s linear infinite}.lds-spinner div:after{content:" ";display:block;position:absolute;top:3px;left:37px;width:6px;height:18px;border-radius:20%;background:#ffa500}.lds-spinner div:nth-child(1){transform:rotate(0deg);animation-delay:-1.1s}.lds-spinner div:nth-child(2){transform:rotate(30deg);animation-delay:-1s}.lds-spinner div:nth-child(3){transform:rotate(60deg);animation-delay:-0.9s}.lds-spinner div:nth-child(4){transform:rotate(90deg);animation-delay:-0.8s}.lds-spinner div:nth-child(5){transform:rotate(120deg);animation-delay:-0.7s}.lds-spinner div:nth-child(6){transform:rotate(150deg);animation-delay:-0.6s}.lds-spinner div:nth-child(7){transform:rotate(180deg);animation-delay:-0.5s}.lds-spinner div:nth-child(8){transform:rotate(210deg);animation-delay:-0.4s}.lds-spinner div:nth-child(9){transform:rotate(240deg);animation-delay:-0.3s}.lds-spinner div:nth-child(10){transform:rotate(270deg);animation-delay:-0.2s}.lds-spinner div:nth-child(11){transform:rotate(300deg);animation-delay:-0.1s}.lds-spinner div:nth-child(12){transform:rotate(330deg);animation-delay:0s}@keyframes lds-spinner{0%{opacity:1}100%{opacity:0}}@keyframes bounce{50%{transform:translateY(16px)}100%{transform:translateY(0)}}</style>
<center>
<div class="preloader">
<div class="dots-container">
<div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
</div>
<div class="preloader-text">
Loading...
</div>
</div>
</center>
<script>const preloader=document.querySelector(".preloader");const preloaderDuration=700;const hidePreloader=()=>{setTimeout(()=>{preloader.classList.add("hide");},preloaderDuration);}
window.addEventListener("load",hidePreloader);</script>

Conclusion :

In conclusion I would like to conclude that I had give only css and html and hope you are using it easily without any problems.

But if it not working then please do comment below to let me know and I will reply to you as soon as possible.

Thanks

www.AnandNawal.com

Go to Link