HTML, Membuat Progress Loading Bar Seperti Youtube atau Bukalapak.

Assalamualaikum, semoga dalam keadaan sehat selalu. Kali ini saya akan membahas bagaimana cara membuat progress loading bar seperti di youtube ataupun bukalapak. Apa itu progress loading bar? Saya jelaskan dengan penampakan dibawah ini saja ya. Itu loh yang garis berwarna merah berjalan saat membuka video ataupun konten.

youtube loading

Bagaimana cara membuatnya? Perhatikan langkah berikut ini.

  • Buka file html anda, copy dan paste script dibawah ini didalam <Head> disini </head> atau diatas tag <body>
 //<![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);
//]]>

 

  • Jika ingin merubah ukurannya ubah nilai pada height: “3.5px” dan warna pada “#db3131”

Semoga bermanfaat dan terimakasih atas kunjungannya 🙂

 

Jika ada masalah hubungi admin melalui : Facebook | WA { +6285273357370 }

Advertisements