Tạo Hiệu Ứng Progress Bar Đầu Trang Cho Blog Của Bạn

Tạo Hiệu Ứng Progress Bar Đầu Trang Cho Blog Của Bạn

Hôm nay rảnh lại ngồi share cho anh em code trang trí Blog đây .Và bài viết này mình sẽ hướng dẫn các bạn cách thêm hiệu ứng progress bar đầu trang cho Blog .



HIỆU ỨNG PROGRESS BAR LÀ GÌ ?


ProgressBar là một thanh tiến trình thể hiện trạng thái của một hoạt động, tác vụ đang diễn ra đến đâu, bao lâu thì kết thúc. ProgressBar thường có dạng thanh bar nằm ngang, và có thể được custom theo nhiều dạng khác nhau, mình sẽ giới thiệu tới các bạn kỹ hơn ở phần sau.


Cơ chế hoạt động của progress bar là mỗi khi trang được tải nó sẽ kích hoạt với thanh tiến trình màu đỏ hiệu ứng chạy từ trái qua phải.


CÁCH THÊM HIỆU ỨNG PROGRESS BAR CHO BLOGSPOT .

Các bước thực hiện :

Bước 1 : Chọn Chủ Đề -> Chỉnh Sửa HTML .

Bước 2 : Chèn CSS sau trên tag /b:skin hoặc trong tag style - /style

#app-progress {
      left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1011
}
devsite-progress {
pointer-events: none;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transition: -webkit-transform .2s ease;
transition: -webkit-transform .2s ease;
transition: transform .2s ease;
transition: transform .2s ease, -webkit-transform .2s ease
}
devsite-progress[type=indeterminate] {
-webkit-transform: scaleY(1);
transform: scaleY(1)
}
#app-progress .devsite-progress--indeterminate .devsite-progress--indeterminate-1, #app-progress .devsite-progress--indeterminate .devsite-progress--indeterminate-3 {
background-color: red;
}
devsite-progress .devsite-progress--indeterminate .devsite-progress--indeterminate-1,devsite-progress .devsite-progress--indeterminate .devsite-progress--indeterminate-2,devsite-progress .devsite-progress--indeterminate .devsite-progress--indeterminate-3,devsite-progress .devsite-progress--indeterminate .devsite-progress--indeterminate-4 {
background: #fff;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: scaleX(0);
transform: scaleX(0)
}
devsite-progress .devsite-progress--indeterminate .devsite-progress--indeterminate-1 {
-webkit-animation: progress-indeterminate-1 2.5s linear infinite;
animation: progress-indeterminate-1 2.5s linear infinite;
z-index: 1
}
devsite-progress .devsite-progress--indeterminate .devsite-progress--indeterminate-2 {
-webkit-animation: progress-indeterminate-2 2.5s ease-in infinite;
animation: progress-indeterminate-2 2.5s ease-in infinite;
z-index: 2
}
devsite-progress .devsite-progress--indeterminate .devsite-progress--indeterminate-3 {
-webkit-animation: progress-indeterminate-3 2.5s ease-out infinite;
animation: progress-indeterminate-3 2.5s ease-out infinite;
z-index: 3
}
devsite-progress .devsite-progress--indeterminate .devsite-progress--indeterminate-4 {
-webkit-animation: progress-indeterminate-4 2.5s ease-out infinite;
animation: progress-indeterminate-4 2.5s ease-out infinite;
z-index: 4
}
@-webkit-keyframes progress-indeterminate-1 {
0% {
-webkit-transform: scaleX(0);
transform: scaleX(0)
}
50%,100% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
@keyframes progress-indeterminate-1 {
0% {
-webkit-transform: scaleX(0);
transform: scaleX(0)
}
50%,100% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
@-webkit-keyframes progress-indeterminate-2 {
0%,20% {
-webkit-transform: scaleX(0);
transform: scaleX(0)
}
70%,100% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
@keyframes progress-indeterminate-2 {
0%,20% {
-webkit-transform: scaleX(0);
transform: scaleX(0)
}
70%,100% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
@-webkit-keyfraames progress-indeterminate-3 {
0%,60% {
-webkit-transform: scaleX(0);
transform: scaleX(0)
}
90%,100% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
@keyframes progress-indeterminate-3 {
0%,60% {
-webkit-transform: scaleX(0);
transform: scaleX(0)
}
90%,100% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
@-webkit-keyframes progress-indeterminate-4 {
0%,75% {
-webkit-transform: scaleX(0);
transform: scaleX(0)
}
100% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
@keyframes progress-indeterminate-4 {
0%,75% {
-webkit-transform: scaleX(0);
transform: scaleX(0)
}
100% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}

Bước 2 : Chèn đoạn HTML sau dưới tag body .

<devsite-progress id="app-progress" type="indeterminate">
<div class="devsite-progress--indeterminate">
<div class="devsite-progress--indeterminate-1"></div>
<div class="devsite-progress--indeterminate-2"></div>
<div class="devsite-progress--indeterminate-3"></div>
<div class="devsite-progress--indeterminate-4"></div>
</div>
</devsite-progress>

Bước 3 : Chèn JavaScript phía trên thẻ đóng /body

<script>//<![CDATA[
var c=document.querySelector("#app-progress"),
d=document.querySelector(".devsite-progress--indeterminate")
window.addEventListener('DOMContentLoaded', (event) => {
c.removeAttribute("type")
d.parentNode.removeChild(d)
})
//]]></script>

Bước 4 : Lưu lại chủ đề là xong rồi !


LỜI KẾT :

Chỉ với vài bước đơn giản là bạn có thể thêm được hiệu ứng progress bar cho blog rồi .Nếu có thắc mắc gì các bạn hãy comment xuống bên dưới để được giải đáp thắc mắc nhé !