in this case I will share the tutorial how to make colorful loading in header or anywhere according to your wish and I put it under my men you can see the demo on this blog
Here's how you live follow his tutorial
- Login to blogger
- Template
- Edit HTML
- Search code ]]></b:skin>
- put the css below before ]]></b:skin>
/ * Page Loader * /
.cssload-loader {position: absolute; bottom: 0; left: 0; right: 0; margin: auto; z-index: 1000}
myloader [role = "progressbar"] [aria-busy = "true"] {position: absolute; top; 0; left: 0; padding-bottom: 3px; width: 100%; background-color: # 159756; -webkit -animation: linear background preloader 3.5s infinite; animation: linear background preloader 3.5s infinite}
myforeer [role = "progressbar"] [aria-busy = "true"] :: before, myloader [role = "progressbar"] [after: display: block; position: absolute; top: 0; z-index: 2; width: 0; height: 3px; background: #afa; -webkit-animation: linear front preloader 3.5s infinite; animation: linear front preloader 3.5s infinite; content: '' }
myloader [role = "progressbar"] [aria-busy = "true"] :: before {right: 50%}
myloader [role = "progressbar"] [aria-busy = "true"] :: after {left: 50%}
@ -webkit-keyframes preloader-background {0%, 24.9% {background-color: # 159756} 25%, 49.9% {background-color: # da4733} 50%, 74.9% {background-color: # 3b78e7} 75% , 100% {background-color: # fdba2c}}
@keyframes preloader-background {0%, 24.9% {background-color: # 159756} 25%, 49.9% {background-color: # da4733} 50%, 74.9% {background-color: # 3b78e7} 75%, 100% {background-color: # fdba2c}}
@ -webkit-keyframes preloader-front {0% {width: 0; background-color: # da4733} 24.9% {width: 50%; background-color: # da4733} 25% {width: 0; background-color: # 3b78e7} 49.9% {width: 50%; background-color: # 3b78e7} 50% {width: 0; background-color: # fdba2c} 74.9% {width: 50%; background-color: # fdba2c} 75% {width : 0%; background-color: # 159756} 100% {width: 50%; background-color: # 159756}}
@keyframes preloader-front {0% {width: 0; background-color: # da4733} 24.9% {width: 50%; background-color: # da4733} 25% {width: 0; background-color: # 3b78e7} 49.9 % 75% {width: 50%; background-color: # fdba2c} 75% {width: 50%; ; background-color: # 159756} 100% {width: 50%; background-color: # 159756}}
- after that find the code </ body> and put the script below before the code </ body>
<script type = 'text / javascript'>
// <! [CDATA [
// Page Loader
$ (document) .ready (function () {$ ("body"). removeClass ("page-isload"), $ ("# pagingx"). fadeOut (8000), $ ("# loader"). fadeOut ( 8000)});
//]]>
</ script>
- Next find the code </ header> and place the HTML below before the code </ header>
<div class = 'cssload-loader' id = 'loader'> <myloader>
<div aria-busy = 'true' aria-label = 'Loading, please wait.' role = 'progressbar' />
</ myloader> </ div>
<div class = 'page-loader' id = 'pagingx' />
- Note: You can put HTML anywhere to your liking
EmoticonEmoticon