Tùy thuộc trang tải nhanh hay chậm mà hiệu ứng progress bar diễn ra nhanh hay lâu hơn, rất thích hợp cho các blog chủ đề video.

Thêm hiệu ứng progress bar đầu trang giống Youtube khi tải trang cho Blogspot

Các bước thực hiện như sau

Bước 1: Chèn CSS sau lên thẻ /b:skin hoặc trong cặp thẻ <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)
}
devsite-progress .devsite-progress--indeterminate {
position: relative;
height: 2px
}
#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-keyframes 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 HTML sau dưới thẻ <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>
Các bạn xem demo tại: https://www.anhtrainang.com/p/progress-bar.html

Kết luận

Với các bước làm đơn giản trên thì việc thêm một hiệu ứng progress bar đầu trang giống Youtube khi tải trang cho Blogspot là hết sức nhanh chóng. Nếu có gặp trở ngại nào trong quá trình làm cứ để lại bình luận phía dưới, mình sẽ giúp các bạn.