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