Page Preloader Plugin For Blogger
When I visited Djogzs yesterday, I was amazed by his blog's new interface which is really stunning. But what really piqued my interest was his new Preloader.
Introduction
This plugin is created by Djogzs which uses CSS3 and SVG to create an effect for the page preloader, you can check his blog post for a complete tutorial here.HTML
Go to Blogger » Template » Backup your Template » and Edit HTMLSearch for <body> then copy the following code right after it
<div class="ip-container" id="ip-container">
<div class="ip-header"><div class="ip-loader">
<svg class="ip-inner" height="60px" viewbox="0 0 80 80" width="60px">
<path class="ip-loader-circlebg" d="M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z">
<path class="ip-loader-circle" d="M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z" id="ip-loader-circle"></path></path></svg></div></div></div>
CSS
Search for ]]></b:skin> then copy the following code above it/* HourGlass THEME */
.ip-header{position:fixed;top:0;min-height:480px;width:100%;height:100%;background:#505050 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI2qwdP36gTDK6LhCcz9HY4XwoQ4z_7Cy2ZrZ-1cINX_hklcSLVM4coKM5TDI4-PyAfpKBuVEqG6-0vIBkkKE5wDbn4fsYzTvechvkHbfZ4kPDDJwv1L7_Lk-vU5pCmzVqGqvSJr6dnGMP/s1600/hourglass.gif) no-repeat center center;z-index:999999}.ip-header .ip-loader svg path.ip-loader-circlebg{stroke:#fff}.ip-header .ip-loader svg path.ip-loader-circle{-webkit-transition:stroke-dashoffset .2s;transition:stroke-dashoffset .2s;stroke:#13bafa}.ip-loader{position:absolute;left:0;width:100%;opacity:0;cursor:default;pointer-events:none;bottom:20%}.ip-header .ip-inner{display:block;margin:0 auto}.ip-header .ip-loader svg path{fill:none;stroke-width:6}.loading .ip-loader{opacity:1;-webkit-animation:animInitialHeader 1s cubic-bezier(.7,0,.3,1) both;animation:animInitialHeader 1s cubic-bezier(.7,0,.3,1) both;-webkit-animation-delay:.2s;animation-delay:.2s}@-webkit-keyframes animInitialHeader{0%{opacity:0;-webkit-transform:translate3d(0,800px,0)}}@keyframes animInitialHeader{0%{opacity:0;-webkit-transform:translate3d(0,800px,0);transform:translate3d(0,800px,0)}}.loaded .ip-loader{opacity:1;-webkit-animation:animLoadedLoader .5s cubic-bezier(.7,0,.3,1) forwards;animation:animLoadedLoader .5s cubic-bezier(.7,0,.3,1) forwards}@-webkit-keyframes animLoadedLoader{to{opacity:0;-webkit-transform:translate3d(0,-100%,0) scale3d(.3,.3,1)}}@keyframes animLoadedLoader{to{opacity:0;-webkit-transform:translate3d(0,-100%,0) scale3d(.3,.3,1);transform:translate3d(0,-100%,0) scale3d(.3,.3,1)}}.loaded .ip-header{-webkit-animation:animLoadedHeader 1s cubic-bezier(.7,0,.3,1) forwards;animation:animLoadedHeader 1s cubic-bezier(.7,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}
JScript
Search for </body> and copy the following code before it<script type="text/javascript" async="async" src="https://4c346941eb9e6f9419cc82ca54cebbe813b639a6.googledrive.com/host/0B6G3XEDWZaMaTUFNbmtWeHpzOTQ"></script>
<script type="text/javascript" async="async" src="https://de7ac2f094863d51841b7c5664d1b8ca50fe8436.googledrive.com/host/0B6G3XEDWZaMaUWZGRkJNdGg2bWM"></script>
<script type="text/javascript" async="async" src="https://09d01ff7c74116fe7d2fbe5ba0d7a464c36792ff.googledrive.com/host/0B6G3XEDWZaMaOFRtR2kzckx6bkE"></script>
<script type="text/javascript" async="async" src="https://e98405a16704d397bb91d5775ea53997788d4ca9.googledrive.com/host/0B6G3XEDWZaMaRy1Qa1RiTDl6T0E"></script>
Final Words
Visit Djogzs for more theme! If you find this plugin useful don't hesitate to leave a comment! Having trouble installing this plugin? Leave a question below or you can directly go to Djogzs.com for queries. Until next time!You might also like
- Comments
- 10 Blogger
- Disqus
This comment has been removed by the author.
ReplyDeleteIt does work on PC but on mobile phones the page just stuck @ the preloading page........... I need an urgent help.........
ReplyDeleteHi Jacob, I wasn't the one who created this widget but I'll try to help you out, please keep in touch!
Deletecan you provide me a link of your blog?
DeleteThanks... mytutorialarena.blogspot.com
ReplyDeletehmm, i can't see any loading effect in your blog except for the white background fading out? maybe you didn't followed the steps properly or the problem is in your template, download and try a different template if you badly want this plugin! and also i cant see any problem with this plugin using a phone, everything works perfectly :)
Deleteok, so i gave it a try, i applied this plugin to one of my dummy blog using the same template as your blog does, and it worked perfectly fine, i only noticed that the loading effcet takes more time than in pc, but it's just 1-3seconds, here's the link > http://otakumodeph.blogspot.com/
DeleteThanks for your time
ReplyDeletenice.. very good :) GO AHEAD
ReplyDeleteWork perfectly on my blog. Thanks for your sharing.
ReplyDeleteCatering Jakarta