contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

Membuat Progress Loading Bar Seperti Youtube

Posted in Blogspot Life at 25 Oktober 2017 With 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

▼ Download Source Code Dibawah Ini ▼


membuat progress loading bar seperti 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>

Untuk membuat model animasi dalam bentuk lain dan Mendownload JQUERY  nya anda dapat langsung mengunjungi LINK FOR MORE EFFECTS . GitHub LINK

Artikel Rekomendasi



Artikel Terkait

Diskusi