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);
}
}
Kunjungi www.prowebpro.com untuk menambah wawasan anda.