Cách sử dụng loading pace.js

administrator

Administrator
Nhân viên
9 Tháng tám 2021
87
0
6
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/