Cara Membuat Loading Bar Website Seperti Youtube
Cara Membuat Loading Bar Website Seperti Youtube | Selamat jumpa kembali dnegan zooba.ID, kali ini admin akan memposting Cara Membuat Loading Bar Website Seperti Youtube. Cara loading web ini digunakan sebagai petunjuk kepada pembaca web bahwa website kita belum selesai dimuat. Silakan lihat di youtube, maka di bagian atas akan terlihat progress bar yang berjalan warna merah itu. Nah, di blog ini akan nampak seperti berikut:
Untuk membuat progress bar website seperti di atas, maka kita lakuan cukup sederhana. yaitu dengan mengopi-paste kode berikut dan meletakkannya sebelum tag </head> atau sebelum <body> di blogger anda. Setelah itu simpan dan update template blog anda.
<script>
//<![CDATA[
var Nanobar = function () {
var c, d, e, f, g, h, k = { width: "100%", height: "3.5px", zIndex: 9999, top: "0" }, l = { width: 0, height: "100%", clear: "both", transition: "height .3s" }; c = function (a, b) { for (var c in b) a.style[c] = b[c]; a.style["float"] = "left" }; f = function () { var a = this, b = this.width - this.here; 0.1 > b && -0.1 < b ? (g.call(this, this.here), this.moving = !1, 100 == this.width && (this.el.style.height = 0, setTimeout(function () { a.cont.el.removeChild(a.el) }, 100))) : (g.call(this, this.width - b / 4), setTimeout(function () { a.go() }, 16)) }; g = function (a) {
this.width =
a; this.el.style.width = this.width + "%"
}; h = function () { var a = new d(this); this.bars.unshift(a) }; d = function (a) { this.el = document.createElement("div"); this.el.style.backgroundColor = a.opts.bg; this.here = this.width = 0; this.moving = !1; this.cont = a; c(this.el, l); a.el.appendChild(this.el) }; d.prototype.go = function (a) { a ? (this.here = a, this.moving || (this.moving = !0, f.call(this))) : this.moving && f.call(this) }; e = function (a) {
a = this.opts = a || {}; var b; a.bg = a.bg || "#db3131"; this.bars = []; b = this.el = document.createElement("div"); c(this.el,
k); a.id && (b.id = a.id); b.style.position = a.target ? "relative" : "fixed"; a.target ? a.target.insertBefore(b, a.target.firstChild) : document.getElementsByTagName("body")[0].appendChild(b); h.call(this)
}; e.prototype.go = function (a) { this.bars[0].go(a); 100 == a && h.call(this) }; return e
}();
var nanobar = new Nanobar(); nanobar.go(30); nanobar.go(60); nanobar.go(100);
//]]>
</script>
Demikian Cara Membuat Loading Bar Website Seperti Youtube semoga bermanfaat. Dapatkan tips dan trik serta tutorial lain di website ini. Sampai jumpa lagi.
Post a Comment for "Cara Membuat Loading Bar Website Seperti Youtube"