Ищу прерол для сайта и плагин

[OLGAG1]

как реализовать такое? сверху полоска подгрузки на сайте https://prnt.sc/subdlg 

 

https://ain.ua/special/cloud-vs-server/

 

 

и прерол или как там правильно https://prnt.sc/subfhg

 

https://seo-akademiya.com/

 

 

Всем зарение спасибо

[LiLu]

Вот отличный плагин. Просто подключить в шапке и будет работать

[OLGAG1]

LiLu Спасибо

Pascha Спасибо

 

[OLGAG1]

Осталось найти только модуль для опенкарт 2,3 

сверху полоска подгрузки на сайте https://prnt.sc/subdlg 

 

https://ain.ua/special/cloud-vs-server/

[OLGAG1]

1 час назад, Pascha сказал:

для 2.3, вывод лого сайта в виде прелоада 

после

</head>

вставляем
 

<div id="p_prldr">
<div class="contpre">
<span class="svg_anm"></span><br>
<?php if ($logo) { ?>
<img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" />
<?php } ?>
<br><small>идет загрузка</small>
</div>
</div>

до

</head>

вставляем

 

<script type="text/javascript">$(window).on('load', function () {
    var $preloader = $('#p_prldr'),
        $svg_anm   = $preloader.find('.svg_anm');
    $svg_anm.fadeOut();
    $preloader.delay(200).fadeOut('slow');
});</script>

стили
 

#p_prldr{
position: fixed;
left: 0;
top: 0;
right:0;
bottom:0;
background: #F2F3F7;
z-index: 30;}
 
.contpre small{font-size:18px;}
 
.contpre{
width: 250px;
height: 100px;
position: absolute;
left: 50%;top: 48%;
margin-left:-125px;
margin-top:-75px;
color:#444;
font-size:32px;
letter-spacing:-2px;
text-align:center;
line-height:35px;}
 
#p_prldr .svg_anm {
position: absolute;
width: 41px;
height: 41px;
background-size:41px;    
margin: -16px 0 0 -16px;
}
.img-resp{    
    max-width: 100%;
    height: auto;
}

но все же лучше оптимизировать сайт для быстрой загрузки и отображения контента первого экрана

 

а где глянуть пример как работает?

[markimax]

Зачем вам прелоадер?

Google очень не любит всякого рода прелоадеры
В новом алгоритме начисления баллов pagespeed он скорее всего снизит оценку за "ваш" прелоадер

[OLGAG1]

21 минуту назад, markimax сказал:

Зачем вам прелоадер?

Google очень не любит всякого рода прелоадеры
В новом алгоритме начисления баллов pagespeed он скорее всего снизит оценку за "ваш" прелоадер

где почитать скиньте ссылку

[OLGAG1]

1 час назад, OLGAG1 сказал:

 

а где глянуть пример как работает?

 

22 минуты назад, markimax сказал:

Зачем вам прелоадер?

Google очень не любит всякого рода прелоадеры
В новом алгоритме начисления баллов pagespeed он скорее всего снизит оценку за "ваш" прелоадер

а за page load progress bar снизит оценку?

[OLGAG1]

так гугл и на ютуб ругаеться какое значение имеет вообще этот пейджспид?
https://developers.google.com/speed/pagespeed/insights/?hl=RU&url=https%3A%2F%2Fwww.youtube.com%2F&tab=desktop

 

[WebsitePro]

Мы у себя на сайте сделали совсем просто: 

 

1. В начале кода

<style>
#overall{
background: #225ea3;
z-index:50000;
    width:100%;
    height:100%;
    top:0;
    position:fixed;
    }
</style>

 

2. В конце:

 

$('#overall').delay(50).fadeOut(50);

 

смотреть на сайте здесь