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ạn xem demo tại: https://www.anhtrainang.com/p/progress-bar.html
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>