Membuat Progress Loading Bar Seperti Youtube

Publish Date : 25-10-2017 , dibaca 5637 kali, Hari ini dibaca : 1 kali ,0 comments

Bingung Cara Membuat Progress Loading Bar seperti Youtube..?? Jika kita perhatikan pada halaman Youtube... setiap kali load / menampilkan halaman akan muncul animasi loading prgress Bar yang ada di header /diatas tampilan web.. Nah.. pada kesempatan ini admin suckittrees akan share artikel Cara membuat Progress loading bar yang mirip dengan youtube

Berikut gambar Loading Bar Youtube

Disini kita akan membuat animasi loading bar di Blog (Blogspot) dan di Website PHP MYSQL HTML

1. Membuat Progress Loading Bar di Blogspot

Untuk membuat loading bar di blogspot :

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”

2. Membuat Pada Website HTML dan CSS

untuk membuat progress loading bar pada website HTML PHP MYSQL CSS, anda sebenarnya bisa menggunakan code JAVASCRIPT diatas,, jangan lupa anda harus menambahkan tag <script>code-Nya</script> , agar Browser mengenali code tersebut sebagai code javascript...

Namun anda dapat menggunakan cara dibawah ini :

JQUERY

<script src="js/pace.min.js"></script>

CSS

<style type="text/css">
.pace {
  -webkit-pointer-events: none;
  pointer-events: none
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.pace-inactive {
  display: none;
}
.pace .pace-progress {
  background: #cb4437;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}
</style>