Animasi CSS Loading Blog

1. Login ke akun blogger anda

2. Klik Template » Edit HTML » Lanjutkan »  Klik  Expand Template Widget

3. Tambahkan kode CSS berikut ini diatas ]]></b:skin>

.circlewrapper { width: 98px; height: 98px; float: right; font-size: 14px; text-align: center; text-shadow: 0 1px 1px black; } .circle { background-color: rgba(0,0,0,0); border:5px solid rgba(255,0,0,0.9); opacity:.9; border-right:5px solid rgba(0,0,0,0); border-left:5px solid rgba(0,0,0,0); border-radius:50px; box-shadow: 0 0 35px #ff0000; width:70px; height:70px; margin:0 auto; -moz-animation:spin1Pulse 1s infinite ease-in-out; -webkit-animation:spin1Pulse 1s infinite linear; } .circle1 { background-color: rgba(0,0,0,0); border:5px solid rgba(255,0,0,0.9); opacity:.9; border-left:5px solid rgba(0,0,0,0); border-right:5px solid rgba(0,0,0,0); border-radius:50px; box-shadow: 0 0 15px #ff0000; width:50px; height:50px; margin:0 auto; position:relative; top:-70px; -moz-animation:spin2Pulse 1s infinite linear; -webkit-animation:spin2Pulse 1s infinite linear; } .circle2 { background-color: transparent; border: 5px solid rgba(255, 0, 0, 0.9); opacity: .9; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-radius: 50px; box-shadow: 0 0 15px #ff0000; width: 90px; height: 90px; margin: 0 auto; position: relative; top: -150px; text-align: center; line-height: 90px; } @-moz-keyframes spin1Pulse { 0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;} 50% { -moz-transform:rotate(145deg); opacity:1;} 100% { -moz-transform:rotate(-320deg); opacity:0;} } @-moz-keyframes spin2Pulse { 0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg);} } @-webkit-keyframes spin1Pulse { 0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0;} } @-webkit-keyframes spin2Pulse { 0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg);} } .circlebg { width: 53px; height: 53px; position: relative; border-radius: 50px; -moz-animation: spin3Pulse 3s infinite ease-in-out; -webkit-animation: spin3Pulse 3s infinite linear; } .circlewrapper2 { width: 53px; height: 53px; text-align: center; border-radius: 50px; border: 3px solid rgba(0, 0, 0, 0.9); padding: 8px; background: -webkit-radial-gradient(center, ellipse cover, #D41B00 5%,#570401 74%); background: -moz-radial-gradient(center, ellipse cover, #D41B00 5%,#570401 74%); } .circlewrapper3 {float:right;} .circlewrapper3 a { width: 78px; height: 78px; float: right; font-size: 14px; text-align: center; border-radius: 50px; text-shadow: 0 1px 1px black; margin-top: -50px; position: absolute; line-height: 20px; } .circle4 { background-color: transparent; border: 1px solid rgba(0, 0, 0, 1); opacity: .9; border-top-right-radius: 50px; border-bottom-left-radius: 50px; width: 50px; height: 50px; margin: 0 auto; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); } .circle5 { background-color: transparent; border: 1px solid rgba(0, 0, 0, 1); opacity: .9; border-top-right-radius: 50px; border-bottom-left-radius: 50px; width: 50px; height: 50px; margin: 0 auto; position: relative; top: -51.5px; -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); } .circle6 { background-color: transparent; border: 1px solid rgba(0, 0, 0, 1); opacity: .9; border-top-right-radius: 50px; border-bottom-left-radius: 50px; width: 50px; height: 50px; margin: 0 auto; position: relative; top: -103.5px; } .circle7 { background-color: transparent; border: 1px solid rgba(0, 0, 0, 1); opacity: .9; border-top-right-radius: 50px; border-bottom-left-radius: 50px; width: 50px; height: 50px; margin: 0 auto; position: relative; top: -155px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); } @-moz-keyframes spin3Pulse { 0% { -moz-transform:rotate(360deg); } 100% { -moz-transform:rotate(0deg);} } @-webkit-keyframes spin3Pulse { 0% { -webkit-transform:rotate(360deg);} 100% { -webkit-transform:rotate(0deg); } } span[class*="l-"] {/*putradoi.blogspot.com*/ height: 4px; width: 4px; background: #fff; display: inline-block; margin: 2px 2px; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -webkit-animation: loader 4s infinite; -webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415); -webkit-animation-fill-mode: both; -moz-animation: loader 4s infinite; -moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415); -moz-animation-fill-mode: both; animation: loader 4s infinite; animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415); animation-fill-mode: both;}/*Blog Johanes-Djogzs.blogspot.com*/ span.l-1 {-webkit-animation-delay: 1s;animation-delay: 1s;-ms-animation-delay: 1s;-moz-animation-delay: 1s;} span.l-2 {-webkit-animation-delay: 0.8s;animation-delay: 0.8s;-ms-animation-delay: 0.8s;-moz-animation-delay: 0.8s;} span.l-3 {-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-ms-animation-delay: 0.6s;-moz-animation-delay: 0.6s;} span.l-4 {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;-ms-animation-delay: 0.4s;-moz-animation-delay: 0.4s;} span.l-5 {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;-ms-animation-delay: 0.2s;-moz-animation-delay: 0.2s;} span.l-6 {-webkit-animation-delay: 0;animation-delay: 0;-ms-animation-delay: 0;-moz-animation-delay: 0;} @-webkit-keyframes loader { 0% {-webkit-transform: translateX(-30px); opacity: 0;} 25% {opacity: 1;}/*putradoi.blogspot.com*/ 50% {-webkit-transform: translateX(30px); opacity: 0;} 100% {opacity: 0;}} @-moz-keyframes loader { 0% {-moz-transform: translateX(-30px); opacity: 0;} 25% {opacity: 1;} 50% {-moz-transform: translateX(30px); opacity: 0;} 100% {opacity: 0;}} @-keyframes loader { 0% {-transform: translateX(-30px); opacity: 0;} 25% {opacity: 1;} 50% {-transform: translateX(30px); opacity: 0;} 100% {opacity: 0;}}/*putradoi.blogspot.com*/ .tombol-readmore {clear:both;font-size: 14px;text-shadow: -0px 1px 1px black;} .loading:hover {-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 1);-moz-box-shadow: 0 1px 5px rgba(0,0,0,1);} .loading {line-height: 7px;margin: auto;text-align:center;width: 110px;color:#fff;-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.6);border-bottom: 1px solid #333;border-left: 1px solid black; border-right: 1px solid #333;border-top: 1px solid black;/*Blog Johanes-Djogzs.blogspot.com*/ background: -moz-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 12%, rgba(102, 102, 102, 1) 25%, rgba(71, 71, 71, 1) 39%, rgba(44, 44, 44, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(17, 17, 17, 1) 60%, rgba(43, 43, 43, 1) 76%, rgba(28, 28, 28, 1) 91%, rgba(19, 19, 19, 1) 100%);/*Blog Johanes-Djogzs.blogspot.com*/ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76, 76, 76, 1)), color-stop(12%,rgba(89, 89, 89, 1)), color-stop(25%,rgba(102, 102, 102, 1)), color-stop(39%,rgba(71, 71, 71, 1)), color-stop(50%,rgba(44, 44, 44, 1)), color-stop(51%,rgba(0, 0, 0, 1)), color-stop(60%,rgba(17, 17, 17, 1)), color-stop(76%,rgba(43, 43, 43, 1)), color-stop(91%,rgba(28, 28, 28, 1)), color-stop(100%,rgba(19, 19, 19, 1)));border-radius: 14px;-webkit-border-radius: 14px;-moz-border-radius: 14px;}

Kemudian tambahkan kode jquery ini diatas kode </head>, jika dalam template kalian sudah terpasang jquery maka tidak perlu lagi tambahan jquery tersebut, aga proses efek loading lancar

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

Dan langkah yang terakhir, pasang kode berikut dibawah  <div id='header-wrapper'>

<div class='circlewrapper'>
<div class='circle'/>
<div class='circle1'/>
<div class='circle2'/>
</div>

Demikian tutorial yang saya buat mengenai Membuat Animasi Loading Di Header Blog,apabila anda sudah menggunakan script css pada tutorial membuat animasi loading blog, tinggal perlu lagi menambahkan css diatas , tinggal langsung saja pasang