Thêm hiệu ứng progress bar đầu trang của Youtube khi tải trang

Cơ chế hoạt động của progress bar mỗi khi trang được tải, progress bar được kích hoạt với thanh tiến trình màu đỏ hiệu ứng chạy từ trái qua phải trên đầu trang và sẽ kết thúc khi trang tải xong. 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.

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

Bước 1: Chèn css trong b:skin

#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 element ngay sau 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 trước 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 địa chỉ blog: https://viettubenet.blogspot.com