» »

Полоса загрузки (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 файле.
2018-02-08 Загрузок: 22 Просмотров: 1026 Комментарий: (13)

Поделиться в социальных сетях

Материал разместил

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