Внедрить предварительный загрузчик на сайте

Question

Я создал это animation, и я хотел бы использовать его в качестве предварительного загрузчика. Могу ли я использовать анимацию, которая структурирована html, css и js, или я должен создать .gif или просто анимацию css? Если я могу использовать его, как я могу его реализовать на своем веб-сайте? Я видел несколько руководств, в которых большинство людей создают анимацию css и называют класс для тела и т. Д., Мои проблемы - это совсем другая история.

var bar = $('span'); 
 
var p = $('.noumero'); 
 

 
var width = bar.attr('style'); 
 
width = width.replace("width:", ""); 
 
width = width.substr(0, width.length-1); 
 

 
var interval; 
 
var start = 0; 
 
var end = parseInt(width); 
 
var current = start; 
 

 
var countUp = function() { 
 
    current++; 
 
p.html(current); 
 

 
if (current === end) { 
 
    clearInterval(interval); 
 
} 
 
}; 
 

 
interval = setInterval(countUp, (2000/(end + 1)));

div.meter { 
 
position: relative; 
 
width: 400px; 
 
height: 4px; 
 
margin-top: 50px; 
 
} 
 

 
div.meter span { 
 
display: block; 
 
height: 100%; 
 
animation: grower 1.8s linear; 
 
-moz-animation: grower 1.8s linear; 
 
-webkit-animation: grower 1.8s linear; 
 
-o-animation: grower 1.8s linear; 
 
position: relative; 
 
top: -1px; 
 
left: -1px; 
 
background-color:rgba(255,0,0,1); 
 
-webkit-background-size: 45px 45px; 
 
-moz-background-size: 45px 45px; 
 
-o-background-size: 45px 45px; 
 
background-size: 45px 45px; 
 
} 
 

 
.theR{ 
 
float:left; 
 
font-size:24px; 
 
font-weight:bold; 
 
color:rgba(255,0,0,1); 
 
float:left; 
 
display:block; 
 
margin-top:0px; 
 
font-family: 'Montserrat', sans-serif; 
 
} 
 

 
.the255{ 
 
float:left; 
 
font-size:24px; 
 
font-weight:bold; 
 
color:rgba(255,0,0,1); 
 
float:left; 
 
display:block; 
 
margin-top:0px; 
 
font-family: 'Montserrat', sans-serif; 
 
} 
 

 
.theline{ 
 
width:255px; 
 
float:left; 
 
font-size:24px; 
 
font-weight:bold; 
 
color:red; 
 
float:left; 
 
display:block; 
 
} 
 

 
@keyframes grower { 
 
    0% { 
 
    width: 0%; 
 
    } 
 
    } 
 

 
@-moz-keyframes grower { 
 
    0% { 
 
    width: 0%; 
 
    } 
 
} 
 

 
@-webkit-keyframes grower { 
 
    0% { 
 
    width: 0%; 
 
} 
 
} 
 

 
@-o-keyframes grower { 
 
0% { 
 
    width: 0%; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="meter"> 
 
    <p class="theR">R</p> 
 
    <span style="width:255px;" class="theline"></span> 
 
    <p class="noumero the255"></p> 
 
</div> 
 
<div style="clear:both"></div>

Answer 1

Вы можете установить содержание документа, который будет отображаться на display:none в css; использовать $.holdReady() для хранения .ready() обработчиков; .fadeToggle() исчезать .meter элемент, когда анимация завершается и исчезать в содержание документа один раз .fadeToggle() из .meter контейнера завершает

$.holdReady(true); 
 

 
var bar = $('span'); 
 
var p = $('.noumero'); 
 

 
var width = bar.attr('style'); 
 
width = width.replace("width:", ""); 
 
width = width.substr(0, width.length - 1); 
 

 
var interval; 
 
var start = 0; 
 
var end = parseInt(width); 
 
var current = start; 
 

 
var countUp = function() { 
 
    current++; 
 
    p.html(current); 
 

 
    if (current === end) { 
 
    clearInterval(interval); 
 
    $(".meter").fadeToggle(500, function() { 
 
     $.holdReady(false); 
 
    }) 
 
    } 
 
}; 
 

 
interval = setInterval(countUp, (2000/(end + 1))); 
 

 
$(document).ready(function() { 
 
    $(".content").fadeToggle(5000) 
 
})

div.meter { 
 
    position: relative; 
 
    width: 400px; 
 
    height: 4px; 
 
    margin-top: 50px; 
 
} 
 
div.meter span { 
 
    display: block; 
 
    height: 100%; 
 
    animation: grower 1.8s linear; 
 
    -moz-animation: grower 1.8s linear; 
 
    -webkit-animation: grower 1.8s linear; 
 
    -o-animation: grower 1.8s linear; 
 
    position: relative; 
 
    top: -1px; 
 
    left: -1px; 
 
    background-color: rgba(255, 0, 0, 1); 
 
    -webkit-background-size: 45px 45px; 
 
    -moz-background-size: 45px 45px; 
 
    -o-background-size: 45px 45px; 
 
    background-size: 45px 45px; 
 
} 
 
.theR { 
 
    float: left; 
 
    font-size: 24px; 
 
    font-weight: bold; 
 
    color: rgba(255, 0, 0, 1); 
 
    float: left; 
 
    display: block; 
 
    margin-top: 0px; 
 
    font-family: 'Montserrat', sans-serif; 
 
} 
 
.the255 { 
 
    float: left; 
 
    font-size: 24px; 
 
    font-weight: bold; 
 
    color: rgba(255, 0, 0, 1); 
 
    float: left; 
 
    display: block; 
 
    margin-top: 0px; 
 
    font-family: 'Montserrat', sans-serif; 
 
} 
 
.theline { 
 
    width: 255px; 
 
    float: left; 
 
    font-size: 24px; 
 
    font-weight: bold; 
 
    color: red; 
 
    float: left; 
 
    display: block; 
 
} 
 
@keyframes grower { 
 
    0% { 
 
    width: 0%; 
 
    } 
 
} 
 
@-moz-keyframes grower { 
 
    0% { 
 
    width: 0%; 
 
    } 
 
} 
 
@-webkit-keyframes grower { 
 
    0% { 
 
    width: 0%; 
 
    } 
 
} 
 
@-o-keyframes grower { 
 
    0% { 
 
    width: 0%; 
 
    } 
 
} 
 

 
.content { 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="meter"> 
 
    <p class="theR">R</p> 
 
    <span style="width:255px;" class="theline"></span> 
 
    <p class="noumero the255"></p> 
 
</div> 
 
<div style="clear:both"></div> 
 
<div class="content"> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac tellus egestas, mattis arcu quis, tincidunt dui. Pellentesque pretium finibus sem, vitae egestas magna sollicitudin sed. Proin ac lectus eget magna porta molestie. Mauris enim tellus, iaculis eget lacus sit amet, varius fringilla augue. Vivamus aliquet lacinia ipsum eget aliquam. Sed et ex neque. Curabitur hendrerit faucibus dignissim. Sed id luctus nunc. Suspendisse ac enim at leo dictum fermentum. Phasellus congue quis nibh at aliquam. Fusce hendrerit dui vel eros tincidunt, id efficitur tellus auctor. Pellentesque et mi placerat eros consequat suscipit. Proin a placerat velit. Suspendisse quis laoreet metus. Integer tristique congue suscipit. 
 

 
Sed nec accumsan ligula. Duis sit amet iaculis nibh. Suspendisse erat nulla, tincidunt id nibh eu, placerat aliquet ex. Vestibulum sed feugiat magna. Nulla facilisi. Morbi dictum lacinia enim vel commodo. Donec commodo, magna id fringilla varius, dui quam laoreet sem, ac interdum ligula eros non leo. Ut tristique ultricies lobortis. Aliquam justo sapien, malesuada tincidunt commodo et, feugiat in leo. Vivamus eu justo dui. Etiam malesuada magna ut metus malesuada, et dictum ex luctus. Phasellus luctus mauris nisl, id ultricies sem viverra sit amet. Vestibulum commodo nec urna eget dapibus. Integer eu congue purus. Suspendisse gravida convallis nisl ut ullamcorper. Maecenas aliquam orci vestibulum ligula porta, in porttitor libero consequat. 
 

 
Aliquam eleifend, nisl faucibus elementum ornare, leo mi venenatis dolor, in viverra libero libero vel urna. Curabitur ac enim porta, vulputate tortor et, ultricies felis. Sed augue elit, ultrices in maximus ac, volutpat vel ex. Mauris ut porta erat. Ut eget metus euismod, elementum neque eget, condimentum lacus. Nunc placerat metus at aliquam elementum. Maecenas hendrerit aliquam nunc, at rutrum nunc auctor et. Nam gravida placerat orci, nec euismod justo dapibus in. 
 

 
Vivamus arcu lectus, pulvinar aliquet mauris eget, suscipit ornare dolor. Cras convallis metus a nisi feugiat volutpat. Sed et tellus ultrices, pulvinar tortor vel, viverra lacus. Morbi ligula ipsum, cursus et sem id, suscipit aliquet ex. Proin interdum id sem nec tristique. Pellentesque vel euismod odio. Praesent porttitor ornare tellus vitae eleifend. Ut ac congue erat. 
 

 
Nullam in tincidunt sem. Maecenas congue sodales malesuada. Quisque non elit ac risus facilisis sagittis. Duis ultricies lectus eget augue molestie volutpat. Vestibulum at urna sit amet arcu consectetur condimentum. Vivamus ultricies vehicula lacus sodales tristique. Curabitur at est tincidunt felis convallis ullamcorper. Nulla libero turpis, varius quis magna a, ultricies dapibus dolor. Suspendisse diam dui, bibendum ut convallis et, posuere nec magna. Sed iaculis orci in augue auctor, a rhoncus leo elementum. Donec lobortis sed nisl sit amet viverra. Donec pharetra urna eget faucibus egestas. 
 
</div>

Answer 2

Для меня простой способ будет использовать блесну, как те, которые вы можете найти в FontAwesome. Но если вы хотите интегрировать анимацию как прелоадер, вам нужно вызвать другую функцию, которая будет проверять состояние вашей нагрузки, и если это улучшение, вы звоните countup:

interval = setInterval(checkLoading, (2000/(end + 1))); 

В checkLoading вы можете использовать простой математическое уравнение, чтобы точно знать ваш прогресс:

function checkLoading(){ 
    var elementLoaded=countElements(); 
    var realState = (elementLoaded/allElementsToLoad)*end; 
    while (realState<curent){ 
     countUp(); 
    } 
}