Cara Membuat Loading Bar Seperti di Youtube

Oleh Unknown

Minggu, 15 Maret 2015

Bagikan :

Tweet

Halo sobat, kali ini saya akan membuat tutorial cara membuat loading bar seperti di youtube. Script ini saya ambil dari blog teman saya Fiqri Alfianto. Apakah kalian pernah mengunjungi website youtube? Jika pernah, saat anda membuka youtube, pasti anda akan melihat garis merah di bar web youtube. Nah, itu lah yang akan saya share kepada sobat sekalian. Baca & ikuti tutorialnya ya. Langsung saja ke TKP ya!

Tutorial Cara Membuat Loading Bar Seperti di Youtube

01. Login ke akun blogger anda.
02. Buka template, lalu pilih edit html

02. Copy javascript dibawah ini, lalu paste di atas kode </head>

<script src='https://srvp.googlecode.com/svn/pace.js'/>

03. Jika sudah, Copy CSS dibawah ini, lalu paste di atas kode /]]></b:skin> atau </style>

.pace .pace-progress {
    background: #e14e42;
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
    height: 2px;
    -webkit-transition: width 1s;
    -moz-transition: width 1s;
    -o-transition: width 1s;
    transition: width 1s;
}

.pace-inactive {
    display: none;
}

04. Save Template anda. Selesai.

DEMO

Demo loading bar nya seperti di youtube.

Itulah tutorial Cara Membuat Loading Bar Seperti di Youtube. Semoga artikel ini bermanfaat bagi anda. Selamat menikmati. Jika ada yang ingin ditanyakan, Silahkanlah berkomentar di kolom komentar yang telah di sediakan. Sampai jumpa lagi di postingan berikut nya!

Tag : Tips & Trik Blogger