Membuat loading keren untuk blog
Dari beberapa yang pernah seoke.com postingkan,kali ini seoke.com akan postingan tentang membuat loading untuk blog yang mungkin bisa di katakan keren dan unik..
mungkin untuk para master atau para senior blogging,mungkin saat masuk blog tidak di butuhkan di karna kan para master bolgging tidak buttuh dengan loading saat masuk untuk masuk ke blog mereka di karanakan blog para maser itu cukuplah seo frendly yang saat para pengunjung masuk tidak cukup lama saat mau masuk pada blognya,dan tidak lemot atau lambat.
foto by www.concernindiafoundation.org
Namun jika kalin yang membuatuhkan code code untuk membuat gambar loading di blognya.silahkan copy paste code code di bawah ini,dan kalian juga sudah mengerti dengan cara pemasang code code tersebut.
- HTML
<div class="loader">
<div class="bar">
<div class="show"></div>
</div>
</div>
- CSS
$main: #2196F3;
body {
background-color: $main;
.loader {
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:140px;
height:30px;
background-color:#fff;
border-radius:100px;
.bar {
position: absolute;
top:10px;
left:10px;
bottom:10px;
right:10px;
overflow:hidden;
border-radius:100px;
.show {
position: absolute;
top:0px;
left:0px;
bottom:0px;
width:0%;
background-color:$main;
border-radius:100px;
border-top-left-radius:0px;
border-bottom-left-radius:0px;
transition: width .2s ease;
&:before {
position: absolute;
content: '';
top:-10px;
bottom:-10px;
width:10px;
background-color:#fff;
left:0px;
animation: baranimation 2s linear infinite;
}
}
}
}
}
@keyframes baranimation {
0% {
left:0%;
transform:translateX(-100%);
}
100% {
left:100%;
transform:translateX(0%);
}
}
- JAVASCRIPT/JS
//Animation of the banner is CSS only
var loading = 0;
function loadbar() {
$(".show").css("width", loading + "%");
loading++;
if(loading >= 100) {
loading = 100;
}
}
setInterval(loadbar, 150);
Mungkin hanya segitu yang bisa saya jelaskan dari tentanta cara membuat loading keren untuk blog,jika kalian tidak mengerti dengan saya ucapkan di atas silahkan kalian bisa tinggalkan pesanya di komentar,atau jika kalian punya keritik dan saran untuk blog seoke.com ini silahkan berkomentar.
dan baca juga artikel seoke.com yang menarik lainnya di Cara menginput kode Css pada Html dan pengertian javascript untuk blog.
Ditulis Oleh : Seoke.com Blogger
Terima kasih telah berkunjung di Membuat loading keren untuk blog.Silahkan kalian masukan mail kalian untuk berlangganan lewat mail tentang artikel terbaru dari SEOKE.COM.
0 komentar:
Post a Comment