Cara Membuat Loading Bar diatas Blog dengan Javascript

Kalian pernah liatkan ada garis sama lingkaran yang berhenti kalo Web udah ke load sepenuhnya?. Kalo belum tau, liat aja gambar di atas. Udah tau?.

Ok, sekarang kita buat Garis itu. Buat yang butuh doang. Kalo yang ngga butuh yah ngga usah dipake. Nyimak aja deh, hehe.



Pertama kopi CSS ini. Seperti biasa

/* CSS Loading Bar by Fansublogger */
.pace-inactive {
    display: none;
}
.pace {
    pointer-events: none;
    -moz-user-select: none;
}
.pace .pace-progress {
    background: none repeat scroll 0% 0% #0084C7;
    position: fixed;
    z-index: 99999;
    top: 0px;
    left: 0px;
    height: 3px;
    border-radius: 5px;
    transition: width 1s ease 0s;
}
.pace .pace-progress-inner {
    display: block;
    position: absolute;
    right: 0px;
    width: 100px;
    height: 100%;
    box-shadow: 0px 0px 10px #0084C7, 0px 0px 5px #FFF;
    opacity: 1;
    transform: rotate(3deg) translate(0px, -4px);
}
.pace .pace-activity {
    display: block;
    position: fixed;
    z-index: 99999;
    top: 15px;
    right: 15px;
    width: 14px;
    height: 14px;
    border-width: 2px;
    border-style: solid;
    border-right: 2px solid transparent;
    border-color: #0084C7 transparent transparent #0084C7;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
    border-radius: 10px;
    animation: 400ms linear 0s normal none infinite running pace-spinner;
}
@-webkit-keyframes pace-spinner {0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }}
@-moz-keyframes pace-spinner {0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }}
@-o-keyframes pace-spinner {0% { -o-transform: rotate(0deg); transform: rotate(0deg); }100% { -o-transform: rotate(360deg); transform: rotate(360deg); }}
@-ms-keyframes pace-spinner {0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }}
@keyframes pace-spinner {0% { transform: rotate(0deg); transform: rotate(0deg); }100% { transform: rotate(360deg); transform: rotate(360deg);}}

Sekarang cari </head> di Edit HTML. Jangan bilang ngga ada!. pasti ada, coba cari pake ctrl+f. Udah ketemu?. Pastekan script di bawah ini.

<script src='https://sites.google.com/site/javascriptfansublogger/javascript/loading-bar-by-fansublogger.js' type='text/javascript'/>

Kalo mau ngubah warna garisnya. Tinggal ganti aja #0084C7. Sama kode warna yang kamu suka, atau sesuaikan sama warna blog kamu.