Код HTML
<script type="text/javascript" src="/js/pace.min.js"></script>
Код CSS
.pace.pace-inactive {
display: none;
}
.pace {
pointer-events: none;
user-select: none;
background-image: linear-gradient(to top right, #3A539B 0%, #3498DB 100%);
z-index: 2000;
position: fixed;
height: 100%;
width: 100%;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.pace .pace-progress {
z-index: 2000;
position: absolute;
height: 100px;
width: 140px !important;
top: 50%;
left: 50%;
margin: -50px 0 0 -70px;
}
.pace .pace-progress:before {
content: attr(data-progress-text);
text-align: center;
color: #3A539B;
background: #C5EFF7;
border-radius: 50%;
font-size: 30px;
font-weight: 500;
line-height: 1;
padding: 20% 0 7px;
width: 65%;
height: 55%;
margin: 10px 0 0 30px;
display: block;
z-index: 999;
position: absolute;
}
.pace .pace-progress:after {
border-radius: 50%;
border: 5px solid #C5EFF7;
content: ' ';
display: block;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -70px;
height: 100px;
width: 140px;
transform: rotate(90deg);
animation: spin-3 2s linear infinite;
}
.pace .pace-activity {
font-size: 15px;
line-height: 1;
z-index: 2000;
position: absolute;
height: 100px;
width: 140px;
top: 50%;
left: 50%;
margin: -50px 0 0 -70px;
display: block;
}
.pace .pace-activity:before {
border-radius: 50%;
border: 5px solid #C5EFF7;
content: ' ';
display: block;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -70px;
height: 100px;
width: 140px;
animation: spin-1 2s linear infinite;
}
.pace .pace-activity:after {
border-radius: 50%;
border: 5px solid #C5EFF7;
content: ' ';
display: block;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -70px;
height: 100px;
width: 140px;
transform: rotate(45deg);
animation: spin-2 2s linear infinite;
}
@keyframes spin-1 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
@keyframes spin-2 {
0% {
transform: rotate(59.8deg);
}
100% {
transform: rotate(418.8deg);
}
}
@keyframes spin-3 {
0% {
transform: rotate(119.6deg);
}
100% {
transform: rotate(478.6deg);
}
}
Код JavaScript
paceOptions = {
elements: true
};
setTimeout(function() {
Pace.ignore(function() {
load(3100);
});
}, 4000);
Pace.on('hide', function() {
console.log('done');
});