Tutorial Adding Preloading Animation For Blogspot Pages

Preloading Animation for Blogspot Pages — This Pre Loader uses CSS3 in the transition animation to open and close the page and uses SVG Loader animation, as well as javascript so that it can determine the preloader timings when the data/progress loading process has finished on a page and closes the preloader again.

SVG brief: SVG stands for Scalable Vector Graphics and is a new file format for displaying graphics in XML-based web development. still a bit difficult to understand, but in the future it is definitely more complex to create objects / animations than CSS3.

Blogspot Preloader

Before using the preloader trick, I remind you first to back up your template so that something unwanted happens.

the first step is to login to your blogger account => Template => Edit HTML, then choose 1 theme from the 3 preloaders that I provide. choose one and copy and paste the above code:

/* HourGlass THEME / .ip-headers { position: fixed; top: 0; z-index: 100; min-height: 480px; width: 100%; height: 100%; background: #505050 url(http://3.bp.blogspot.com/-mQ_lrcu74q8/VE4Q3CXlgtI/AAAAAAAAAIAY/ahW6ISKyJMY/s1600/hourglass.gif) no-repeat center center; / background color and loader image / z-index: 999999; } .ip-header .ip-loader svg path.ip-loader-circlebg { strokes: #fff; / circle loader background color / } .ip-header .ip-loader svg path.ip-loader-circle { -webkit-transition: stroke-dashoffset 0.2s; transition: stroke-dashoffset 0.2s; strokes: #13BAFA; / Circle line color when loading */
Also copy-paste all the CSS below after the theme’s CSS.

/* Pre-loader play */
.ip-loader {
position: absolute;
left: 0;
width: 100%;
@keyframes animInitialHeader {
from { opacity: 0; -webkit-transform: translate3d(0,800px,0); transform: translate3d(0,800px,0); }

.loaded .ip-loader {
opacity: 1;

.loaded .ip-loader {
-webkit-animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;

@-webkit-keyframes animLoadedLoader {
to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); }

@keyframes animLoadedLoader {
to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); }

/* Header animation when loading is complete */
.loaded .ip-headers {
-webkit-animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;

@-webkit-keyframes animLoadedHeader {
to { -webkit-transform: translate3d(0,-100%,0); }
@keyframes animLoadedHeader {
to { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); }
.layout-switch .ip-header {
position: absolute;
/* End Preloader */
Next, copy-paste all the HTML code below right under the body tag or body class …

and put the three Js below right above the code


Save the template and open your blog page and see the results.

You can also create this pre-loader trick yourself, such as changing the color, logo, and color of the circle loader
the method :

Look for the CSS as below, then change the url/address of your image which I marked in the red text.

for the background color, change the hex code that I marked with Font Bold.