Chào các bạn, hồi sáng có một bạn xem trang web của mình (bạn đó là thành viên của Cộng đồng Blogspot Việt Nam, tên facebook là Lê Đức) có hỏi mình cách làm cái thanh chạy trên trang như hình dưới.
Thì bây giờ mình sẽ hướng dẫn các bạn nhé!
Lưu ý: Cái này mình lấy mã nguồn từ web khác nên các bạn đừng nói mình làm ra cái này nhé!
Cách làm thanh "tiến trình"
2. Vào Bố cục > Thêm tiện ích (chỗ nào cũng được, tùy bạn)
3. Chọn HTML/Javascript.
4. Chép đoạn code dưới đây vào:
<div id="execphp-3" class="widget widget_execphp"><div class="caption"><h4>Thanh tiến trình</h4></div>
<div class="execphpwidget">
<style>
.meter {
height: 20px; /* Chỗ này chỉnh chiều cao của thanh chạy */
position: relative; /* Vị trí của nó, nên để mặc định */
margin: 10px 0 10px 0; /* Kích thước các góc -> thanh chạy */
background: #555; /* Nền, màu gì cũng được, tùy bạn. */
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 5px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
-moz-box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
display: block;
height: 100%;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43,194,83);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(43,194,83)),
color-stop(1, rgb(84,240,84))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
-webkit-box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
-moz-box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
}
.meter > span:after, .animate > span > span {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-image:
-webkit-gradient(linear, 0 0, 100% 100%,
color-stop(.25, rgba(255, 255, 255, .2)),
color-stop(.25, transparent), color-stop(.5, transparent),
color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)),
color-stop(.75, transparent), to(transparent)
);
background-image:
-moz-linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
z-index: 1;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
-webkit-animation: move 2s linear infinite;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}
.animate > span:after {
display: none;
}
@-webkit-keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
</style>
<div align="center" style="font-size:20px">
Đã đạt được 1,47K view</div>
<div class="meter">
<span id="test"></span>
</div>
<script>
// Assign your element ID to a variable.
var progress = document.getElementById("test");
setTimeout(
function(){
var x = '79.85%';
progress.style.width = x;
}
,100);
</script></div></div>
Lưu ý: Vùng màu đỏ, các bạn có thể thay đổi.
Ở chỗ var x = "<các số từ 1 đến 100 + %>"
(Những cái này không cập nhật, bạn phải tự chỉnh sửa thủ công)
Các chỗ rgba các bạn có thể chỉnh sao theo ý bạn.
Làm thế nào để biết chính xác mình nên đặt số nào vào ô var x?
Ví dụ: Nếu bạn làm cái thanh tiến trình để cho biết rằng trang bạn đã có bao nhiêu lượt xem (hoặc người theo dõi, đăng ký, thích, bình luận,...)
Nếu mục tiêu làm đầy cái thanh đó (tức 100%) là x, và nếu bạn đang có một cái số lượng hiện tại bằng y (y < x) thì bạn cần lấy y chia x sẽ ra một số thập phân.
Không cần quan tâm phía sau và số 0, chỉ cần tập trung vào bốn số trước dấu phẩy
VD: 132 chia 200 bằng 0,6600 (không đủ 4 số thì thêm số 0 vào)
Hai số đầu tiên, hai số đó là phần trăm. Ở đây, hai số đầu của mình là 66 thì mình lấy 66 là phần trăm, được 66%.
Trong trường hợp có 3 số, số thứ ba sẽ đặt trước dấu phẩy, và dấu phẩy sẽ nằm trước số phần trăm....
Trường hợp ba số, bốn số tương tự nhau, chỉ khác là số con số thôi!
VD: 60 chia 235 bằng 0.255319149, vậy phần trăm sẽ là 25,53%
Sau đó, các bạn nhập vào khung var x thôi!
Khi nhập, var x = '25.53%'
Không dùng dấu ngoặc kép mà phải dùng dấu ngoặc này. (' ')
Phần trăm: Dấu phẩy thay bằng dấu chấm.
Xong rồi đấy, lưu lại và xem kết quả thôi!!!
Update 04/09/2020: Có một cách khác dùng thanh tiến trình nhưng sử dụng Bootstrap.
Lưu ý: Bạn phải có thư viện Bootstrap. Hướng dẫn từ xuanthulab.net
<div class="progress" style="height: 50px"> <div class="progress-bar bg-danger" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> Hoàn thành 60% </div> </div>
Thay vùng màu vàng bằng chiều cao bạn muốn đặtwidth: x% (chiều dài thanh màu sẽ bằng x% thanh hiện tại.)aria-valuemin="0" (ở đây là tăng 0 mỗi phút)aria-valuemax="100" (tối đa)
0 Nhận xét