Membuat Proses Bar menggunakan HTML 5

Ketika kita mengdownload file atau mengupload file terdapat prosess bar yang mengidentifikasi sudah sampai mana proses yang kita jalankan, sehingga memberikan kita informasi berapa lama kah proses tersebut, baiklah pada dasrnya pembuat prosess bar tidaklah rumit, tapi disini penulis coba menjabarkan pembuatan simple prosess bar dengan menggunaka HTML5

Berikut tampilan dari prosess bar yang penulis maksud :

 

baik ada beberapa proses cripts coding yang harus kita buat terlebih dahulu baru kemudian buat prosess bar tersebut dapat berjalan

karena kita menggunkan HTML 5 sehingga kita dapat mengcreate style radius. berikut ini pengalan beberapa style:

 

function roundRect(ctx, x, y, width, height, radius) {

    ctx.beginPath();

    ctx.moveTo(x + radius, y);

    ctx.lineTo(x + width - radius, y);

    ctx.arc(x+width-radius, y+radius, radius, -Math.PI/2, Math.PI/2, false);

    ctx.lineTo(x + radius, y + height);

    ctx.arc(x+radius, y+radius, radius, Math.PI/2, 3*Math.PI/2, false);

    ctx.closePath();

    ctx.fill();

}

 

Kemudian kita buat bayangan serta kita ciptakan isi dari proses bar yang akan berjalan.

function progressLayerRect(ctx, x, y, width, height, radius) {

    ctx.save();

    // Define the shadows

    ctx.shadowOffsetX = 2;

    ctx.shadowOffsetY = 2;

    ctx.shadowBlur = 5;

    ctx.shadowColor = '#666';

 

     // first grey layer

    ctx.fillStyle = 'rgba(189,189,189,1)';

    roundRect(ctx, x, y, width, height, radius);

 

    // second layer with gradient

    // remove the shadow

    ctx.shadowColor = 'rgba(0,0,0,0)';

    var lingrad = ctx.createLinearGradient(0,y+height,0,0);

    lingrad.addColorStop(0, 'rgba(255,255,255, 0.1)');

    lingrad.addColorStop(0.4, 'rgba(255,255,255, 0.7)');

    lingrad.addColorStop(1, 'rgba(255,255,255,0.4)');

    ctx.fillStyle = lingrad;

    roundRect(ctx, x, y, width, height, radius);

 

    ctx.restore();

}

Kemudian kita membutuhkan semua part yang saling bersama-sama membuat sebuah gerak animasi yang akan

menciptakan proses bar mulai dari 0-100 . Untuk menciptakan animasi kita menggunakan setlnterval() dab cleaninterval()

fuctions:

// Define the size and position of indicator

var i = 0;

var res = 0;

var context = null;

var total_width = 300;

var total_height = 34;

var initial_x = 20;

var initial_y = 20;

var radius = total_height/2;

 

window.onload = function() {

    // Get the canvas element

    var elem = document.getElementById('myCanvas');

    // Check the canvas support with the help of browser

    if (!elem || !elem.getContext) {

        return;

    }

 

    context = elem.getContext('2d');

    if (!context) {

        return;

    }

 

    // Text’s font of the progress

    context.font = "16px Verdana";

 

    // Gradient of the progress

    var progress_lingrad = context.createLinearGradient(0,initial_y+total_height,0,0);

    progress_lingrad.addColorStop(0, '#4DA4F3');

    progress_lingrad.addColorStop(0.4, '#ADD9FF');

    progress_lingrad.addColorStop(1, '#9ED1FF');

    context.fillStyle = progress_lingrad;

 

    // Create the animation

    res = setInterval(draw, 50);

}

 

function draw() {

    // augment the length on 1 for every iteration

    i+=1;

 

    // Clear the layer

    context.clearRect(initial_x-5,initial_y-5,total_width+15,total_height+15);

    progressLayerRect(context, initial_x, initial_y, total_width, total_height, radius);

    progressBarRect(context, initial_x, initial_y, i, total_height, radius, total_width);

    progressText(context, initial_x, initial_y, i, total_height, radius, total_width );

    // stop the animation when it reaches 100%

    if (i>=total_width) {

        clearInterval(res);

    }

}

Semoga materi yang sangat singkat ini dapat memberikan pemahan bagi setiap orang ingin memulai memahami HTML5
dan untuk semua pembaca yang ingin mengdownload versi lengkapnya dapat di klik disini atau masuk ke halaman asli dari informasi yang penulis untarakan di atas di halaman ini 

 

Kunjungi www.prowebpro.com untuk menambah wawasan anda.

 

Web Design Packages

Paket BasicPaket BusinessPaket Corporate

Livechat

  • Eddy Marketing

  • Iwan Marketing

  • Agus Support

Address

PT. Proweb Indonesia
Perkantoran Duta Merlin No F4
Jl. Gadjah Mada 3-5
Jakarta Pusat
GPS: S 6o 09' 58.1", E 106o 49' 3.3"

 

Marketing : 021-2636-3170
    021-4631-0337 (Edi)
    0812-3356-3561 (Edi)
    087-888-190-566 (Iwan)
     
WhatsApp : 0813-1977-8908 (Iwan)
    0812-806-2772
     
Support : 021 - 3377 0050
    08788-9089-588 (Agus)
     
Finance : 021-2636-3170
    0816-180-8005 (Yudi)
     
Web : www.proweb.co.id