Tạo Progress bar thật chuyên nghiệp
Bài đăng này đã không được cập nhật trong 7 năm
Progress Bar
Khi website của chúng ta đang cần time để xử lsy một sự kiện gì đó ở phía server sau đó mới trả lại kết quả về phía client cho người dùng thì việc sử dụng một Progress bar là rất cần thiết. Nó sẽ cho người dùng biết là server đnag cần time để xử lý, để laod ảnh này ra cho người dùng xem nhưng vì nó quá nặng nên cần đợi chút chứ không người dùng sẽ không hiểu là thao tác của mình chuẩn mà mà sao ảnh nó vẫn ko đc Up lên, hay website này bị lỗi hả mà click vào link rồi mà ko thấy có gì xuất hiện cả. Và việc dùng một Progress Bar vừa đẹp vừa chuyên nghiệp không chỉ có tác dụng cuốn hút người xem, làm gairm đi cái đầu nóng không muốn chờ đợi của các vị khách khó tính mà qua đó nó còn làm cho dịch vụ website chúng at cung cấp trở nên chuyên nghiệp hơn, người dùng sẽ cảm thấy được chăm sóc ngay từ những chi tiết nhỏ nhất các bạn ạ. Sau đây tôi xin giới thiệu về cách làm một Progress Bar chuyên nghiệp và đậm chất Cool nhé.
Đầu tiên, chúng ta tạo 1 Folder và trong đó có 3 files:
- progress.html: Chúng ta sẽ code mã HTML ở đây
- ui.progress-bar.css: Một ít CSS ở file này sẽ làm cho Progress trở nên lung linh
- progress.js: Và đương nhiên không thể thiếu ít chuyển động được rồi
Ở file progress.html chúng ta sẽ khai báo thẻ div có id là progress_bar:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PhongTH - Progress Bar</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="stylesheets/ui.progress-bar.css">
</head>
<body>
<div id="container">
<!-- Progress bar -->
<div id="progress_bar" class="ui-progress-bar ui-container">
<div class="ui-progress" style="width: 79%;">
<span class="ui-label" style="display:none;">Processing <b class="value">79%</b></span>
</div>
</div>
<!-- /Progress bar -->
<div class="content" id="main_content" style="display: none;">
<h1>
PhongTH - Đã xử lý xong!
</h1>
</div>
</div>
<script src="javascripts/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/progress.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
Kế tiếp chúng ta sẽ viết code cho file CSS đã được nhúng vào ở file HTML trên nhé, thêm chút gia vị cho Progress Bar thêm phần ngọt ngào:
@-webkit-keyframes animate-stripes {
from {
background-position: 0 0;
}
to {
background-position: 44px 0;
}
}
.ui-progress-bar {
position: relative;
height: 35px;
padding-right: 2px;
background-color: #abb2bc;
border-radius: 35px;
-moz-border-radius: 35px;
-webkit-border-radius: 35px;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #b6bcc6), color-stop(1, #9da5b0));
background: -moz-linear-gradient(#9da5b0 0%, #b6bcc6 100%);
-webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
-moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
}
.ui-progress {
position: relative;
display: block;
overflow: hidden;
height: 33px;
-moz-border-radius: 35px;
-webkit-border-radius: 35px;
border-radius: 35px;
-webkit-background-size: 44px 44px; /* Webkit */
background-color: #74d04c;
background: -webkit-gradient(linear, 0 0, 44 44,
color-stop(0.00, rgba(255,255,255,0.17)),
color-stop(0.25, rgba(255,255,255,0.17)),
color-stop(0.26, rgba(255,255,255,0)),
color-stop(0.50, rgba(255,255,255,0)),
color-stop(0.51, rgba(255,255,255,0.17)),
color-stop(0.75, rgba(255,255,255,0.17)),
color-stop(0.76, rgba(255,255,255,0)),
color-stop(1.00, rgba(255,255,255,0))
), -webkit-gradient(linear, left bottom, left top, color-stop(0, #74d04c), color-stop(1, #9bdd62));
background: -moz-repeating-linear-gradient(top left -30deg,
rgba(255,255,255,0.17),
rgba(255,255,255,0.17) 15px,
rgba(255,255,255,0) 15px,
rgba(255,255,255,0) 30px
), -moz-linear-gradient(#9bdd62 0%, #74d04c 100%);
-webkit-box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
-moz-box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
border: 1px solid #4c8932;
-webkit-animation: animate-stripes 2s linear infinite;
}
.ui-progress span.ui-label {
font-size: 1.2em;
position: absolute;
right: 0;
line-height: 33px;
padding-right: 12px;
color: rgba(0,0,0,0.6);
text-shadow: rgba(255,255,255, 0.45) 0 1px 0px;
white-space: nowrap;
}
Và cuối cùng là hiệu ứng chuyển động cho Progress Bar nào, hãy cùng mở file Js và code nhé:
(function( $ ){
$.fn.animateProgress = function(progress, callback) {
return this.each(function() {
$(this).animate({
width: progress+'%'
}, {
duration: 2000,
easing: 'swing',
step: function( progress ){
var labelEl = $('.ui-label', this),
valueEl = $('.value', labelEl);
if (Math.ceil(progress) < 20 && $('.ui-label', this).is(":visible")) {
labelEl.hide();
}else{
if (labelEl.is(":hidden")) {
labelEl.fadeIn();
};
}
if (Math.ceil(progress) == 100) {
labelEl.text('Done');
setTimeout(function() {
labelEl.fadeOut();
}, 1000);
}else{
valueEl.text(Math.ceil(progress) + '%');
}
},
complete: function(scope, i, elem) {
if (callback) {
callback.call(this, i, elem );
};
}
});
});
};
})( jQuery );
$(function() {
$('#progress_bar .ui-progress .ui-label').hide();
$('#progress_bar .ui-progress').css('width', '7%');
$('#progress_bar .ui-progress').animateProgress(43, function() {
$(this).animateProgress(79, function() {
setTimeout(function() {
$('#progress_bar .ui-progress').animateProgress(100, function() {
$('#main_content').slideDown();
$('#fork_me').fadeIn();
});
}, 2000);
});
});
});
Các bạn có thể xem Demo tại đây nhé: https://jsfiddle.net/332zpyqL/
Cảm ơn cả nhà đã theo dõi và ủng hộ bài viết của mình nhé 
All rights reserved
