ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Полоса загрузки (Progress Bar) для сайта

Полоса загрузки (Progress Bar) для сайта

Полоса загрузки (Progress Bar) для сайта
Это полоса загрузки, что будет появляться по вверх окна браузера, при открытие новой странице на сайте, что при загрузки исчезать. обновлением дизайна на видео хостинге YouTube, в самом верху страницы появилась полоса загрузки которая. теперь и вы можете установить на свой сайт такую же. Для этого вам необходимо:

В страницы сайта установить

Код
<script src="/nprogress.js"></script>  
  <link rel="stylesheet" type="text/css" href="/nprogress.css" />

В head и /head

Код
<script>  
  $('body').show();  
  $('.version').text(NProgress.version);  
  NProgress.start();  
  setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 1000);  
  </script>

Теперь осталось залить файлы на свой сайт и наслаждаться новой загрузкой.
ps Цвет полосы настраивается в css файле.
08 Февраля 2018 Загрузок: 32 Просмотров: 3374 Комментариев: (13)
Поделиться в социальных сетях

Материал разместил
Kashirina
Похожие материалы

Оставь свой отзыв

Комментарии: 13
Kosten
Kosten 09 Февраля 2018 04:481
0
Как понимаю, что то вроде как на яндекс браузере.
Kosten
Kosten 09 Февраля 2018 04:492
0
Хотя на вашем сайте, как заметил, эта загрузка установлена.
Kashirina
Kashirina 09 Февраля 2018 09:403
0
Да, установлена
Kashirina
Kashirina 09 Февраля 2018 10:404
0
Мой скрин не подошёл да )) Плохо было видно все таки )
Kosten
Kosten 09 Февраля 2018 20:525
0
Kashirina, просто немного не понятно было, что на скрине, а здесь сразу все поймут.
Imapo
Imapo 18 Февраля 2018 19:206
+1
Спасибо, всё работает, но всего лишь как симуляция прогресс-бара, так как не ждёт, пока прогрузится контент сайта. Правильнее будет прописать вот так:
Код
<script>
NProgress.start();
$('body').show();  
$(window).load(function() {  
setTimeout(function() {
NProgress.done(); $('.fade').removeClass('out');
}, 1000);
});
</script>
Kashirina
Kashirina 19 Февраля 2018 11:497
+1
Я его с сайта вообще убрала, лишнее все это )
Kosten
Kosten 19 Февраля 2018 12:198
0
Kashirina, здесь на любителя, на то он и скрипт как приложение к сайту.
-SAM-
-SAM- 19 Февраля 2018 13:199
0
Здесь не на любителя, а на оптимизацию рассчитано (писал про это здесь, в спойлере).
Kosten
Kosten 19 Февраля 2018 13:2910
0
Но почему не на любителя, встречал таких веб мастеров, которые ставили плюшки, которые не дают корректно показывать на мобильном аппарате, что доказал, что плюшка красивая, но лучше адаптивный дизайн. Что человек послушал и убрал, но через пару дней уже была установлена другая плюшка. что также мешала адаптивности. Здесь как раз также на любителя, но любит видать человек, чтоб его сайт сверкал как новогодняя елка. А материал, что материал, как сказал, кому нужно найдет, хотя полный копипаст.
-SAM-
-SAM- 19 Февраля 2018 13:3211
+1
А вообще, если ставить кто решил - лучше именно такой и ставить, нежели те, что перекрывают собой область просмотра сайта (пока всё не загрузиться).
Kashirina
Kashirina 21 Февраля 2018 16:3112
0
Он ни чего не перекрывает
Imapo
Imapo 22 Февраля 2018 07:3513
+1
Речь шла о других прелоадерах, а не о данном конкретном примере
Войдите:
avatar