Cara Membuat Loading Bar Website Seperti Youtube Terbaru Terviral

Cara Membuat Loading Bar Website Seperti Youtube

Membuat Progress Bar Loading 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:
Preloading Website seperti Youtube

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.

No comments:

Post a comment