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/AVvXsEhb2uAkfRnQ6qXzK4pu6-gjM8VgBUSL15d-VO7QYMJ091W8sPpoKpcXyliPsayIr0SCopRjIaYiCWB8pFCy4Inf-1COc76zJDM-EMahbItKVkaFq9kOVm6SJfvOvmx-11EEqf1KoxjpIVFo/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!Rate This Article
Thanks for reading: Page Preloader Plugin For Blogger, Stay tune to get latest Blogging Tips.