Mã:
<style>
/*loading page line on top */
.pace {
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.pace .pace-progress {
background: #018cb2;
position: fixed;
z-index: 2000;
top: 0;
right: 100%;
width: 100%;
height: 2px;
}
.pace .pace-progress-inner {
display: block;
position: absolute;
right: 0;
width: 100px;
height: 100%;
-webkit-box-shadow: 0 0 10px #96000e, 0 0 5px #96000e;
box-shadow: 0 0 10px #96000e, 0 0 5px #96000e;
opacity: 1;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
.pace-inactive {
display: none;
}
</style>
<!-- The javascript plugin to display loading page-->
<script src="https://cdn.jsdelivr.net/npm/pace-js@latest/pace.min.js"></script>
Link: https://codebyzach.github.io/pace/