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

Cara Mengatur APP User Interface di Visual Studio Express 2012 Windows 8

maspramproduction

Assalamualaikum. Semoga dalam keadaan sehat selalu pembaca dan pengunjung setia blog mas pram. Sesuai judul diatas, pada pembahasan ini saya mengambilnya dari game edukasi yang telah saya buat sebelumnya. Bagaimana mengatur splash screen, icon tile, mengatur tampilan layar di monitor, dan sebagainya berikut ini caranya.

  1. Buka visual studio express 2012 anda, jika anda telah membuat sebuah project baru maka secara default terbentuk atau tercipta file dengan nama appxmanifest. Ini dapat anda lihat di solution explorer bagian kanan atas pada layar monitor anda.
  2. Selanjutnya buka file tersebut dengan cara klik dua kali ataupun klik kanan dan pilih open.
  3. Jika sudah terbuka maka anda akan mendapati tampilan seperti gambar dibawah ini.VSE2012
  4. Pada menu Application UI anda dapat mengatur nama aplikasi, file atau page html5 pertama yang akan dijalankan, bahasa yang digunakan dalam aplikasi anda, tampilan layar aplikasi anda. Jika anda ingin mengatur tampilan icon yang muncul di desktop maka anda dapat scroll kebawah pada bagian Visual Assets.VSE2012-1
  5. Pada bagian Visual Assets anda dapat mengatur/mengubah logo, wide logo, splash screen, store logo, badge logo, dan small logo. Caranya adalah seperti berikut ini, anda cukup memilih logo atau bagian mana yang anda kehendaki disebelah kiri anda. Nanti akan muncul tampilan seperti gambar dibawah ini. VSE2012-2Jika belum ada logo yang anda masukkan maka tampilan secara default menunjukkan pilihan ukuran yang dapat anda gunakan sesuai keinginan. Untuk merubahnya klik yang dikotak merah seperti gambar ini.VSE2012-3
  6. Cara diatas berlaku untuk pengaturan small logo, badge logo, splash screen, wide logo, dan store logo. Jika waktu anda melakukan perubahan pada wide logo terjadi error maka klik pada menu Declarations. Pada kiri anda pada pilihan Available Declarations, pilih Background Tasks kemudian klik Add. Selanjutnya secara otomatis pada Supported Background menjadi Background Tasks. Kemudian pada Properties, Support Tasks yang ada pada kanan anda pilih atau ceklis Timer dan Push Notification.VSE2012-4
  7. Maka nantinya hasilnya akan seperti ini :
    1. Untuk tampilan icon di desktop yang dikotak berwarna hitam dam bentuk small logo.large
    2. Untuk tampilan wide logo atau dalam ukuran besar.VSE2012-6
    3. Untuk tampilan store logo, splash screen, logo maka akan muncul ketika aplikasi anda dijalankan.

Semoga bermanfaat dan terimakasih.

Anda juga dapat mendownload artikel diatas dalam format PDF : Download