» » Эффект загрузки страницы Блоггер

Эффект загрузки страницы Блоггер

Виджет загрузки, который я предлагаю вашему вниманию, подходит для медлительных сайтов. 
Пока сайт загружается, читатель видит анимированную картинку загрузки. Я поставила себе на сайт, где много картинок, но всё равно, некоторые страницы успевают загрузиться быстрее, чем появляется картинка загрузки. А вот медлительные странички, виджет отлично прикрывает, что бы читатель не увидел загружающиеся, полупустые статьи.

Загрузка страницы

Кодов в сети нашла много, но на блог не все встали. Код добавляем в шаблоне перед тегом </body>. Как быстро найти нужное место в шаблоне, читаем на этой странице.
Код:
<style>
#abt-page-loader {
        position: fixed!important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        background:#000 url('Ваша картинка') no-repeat 50% 30%;
        color: #FFF;
        display: none;
        font: 0/0 a;
        text-shadow: none;
        padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="abt-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
    // ... Show the Animation `.fadeIn()`
    $('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
Разберём код:
Цвет фона — отмечен красным.
Картинку вставляем свою или предложенную мной ниже. Куда вставлять — помечено синим цветом.
Какие картинки можно вставить — небольшую анимацию(gif), заливаем на любой фотохостинг, берём адрес картинки и добавляем в код. Как вариант, можно закачать в редакторе самого Блоггера, скопировать адрес и удалить картинку из редактора.
Фон загрузки изначально чёрный — если захотите оставить такой, то картинки ищем на прозрачном или чёрном фоне. 
Ниже 68 картинок с адресами, просто берёте адрес понравившейся и вставляем в код:
гифки
  1. https://i.yapx.ru/EuIf8.gif
  2. https://i.yapx.ru/EuIf9.gif
  3. https://i.yapx.ru/EuIgA.gif 
  4. https://i.yapx.ru/EuIgB.gif
  5. https://i.yapx.ru/EuIgC.gif
  6. https://i.yapx.ru/EuIgD.gif
  7. https://i.yapx.ru/EuIgE.gif
  8. https://i.yapx.ru/EuIgF.gif
  9. https://i.yapx.ru/EuIgG.gif
  10. https://i.yapx.ru/EuIgJ.gif
  11. https://i.yapx.ru/EuIgI.gif
  12. https://i.yapx.ru/EuIgM.gif
  13. https://i.yapx.ru/EuIgN.gif
  14. https://i.yapx.ru/EuIgO.gif
  15. https://i.yapx.ru/EuIgK.gif
  16. https://i.yapx.ru/EuIgL.gif
  17. https://i.yapx.ru/EuIgP.gif
  18. https://i.yapx.ru/EuIgQ.gif
  19. https://i.yapx.ru/EuIgR.gif
  20. https://i.yapx.ru/EuIgS.gif
  21. https://i.yapx.ru/EuIgT.gif
  22. https://i.yapx.ru/EuIgU.gif
  23. https://i.yapx.ru/EuIgV.gif
  24. https://i.yapx.ru/EuIgY.gif
  25. https://i.yapx.ru/EuIgi.gif
  26. https://i.yapx.ru/EuIgZ.gif
  27. https://i.yapx.ru/EuIgd.gif
  28. https://i.yapx.ru/EuIge.gif
  29. https://i.yapx.ru/EuIgf.gif
  30. https://i.yapx.ru/EuIgg.gif
гиф-картинки
  1. https://i.yapx.ru/EuIgy.gif
  2. https://i.yapx.ru/EuIgq.gif
  3. https://i.yapx.ru/EuIgo.gif
  4. https://i.yapx.ru/EuIgn.gif
  5. https://i.yapx.ru/EuIgj.gif
  6. https://i.yapx.ru/EuIg6.gif
  7. https://i.yapx.ru/EuIg5.gif
  8. https://i.yapx.ru/EuIg3.gif
  9. https://i.yapx.ru/EuIg2.gif
  10. https://i.yapx.ru/EuIg1.gif
  11. https://i.yapx.ru/EuIg0.gif
  12. https://i.yapx.ru/EuIgz.gif
  13. https://i.yapx.ru/EuIg8.gif
  14. https://i.yapx.ru/EuIgw.gif
  15. https://i.yapx.ru/EuIgv.gif
  16. https://i.yapx.ru/EuIg7.gif
  17. https://i.yapx.ru/EuIgu.gif
  18. https://i.yapx.ru/EuIiF.gif
  19. https://i.yapx.ru/EuIiE.gif
  20. https://i.yapx.ru/EuIiD.gif
  21. https://i.yapx.ru/EuIiA.gif
  22. https://i.yapx.ru/EuIg9.gif
  23. https://i.yapx.ru/EuIic.gif
  24. https://i.yapx.ru/EuIgr.gif
  25. https://i.yapx.ru/EuIiK.gif
  26. https://i.yapx.ru/EuIiG.gif
  27. https://i.yapx.ru/EuIiZ.gif
  28. https://i.yapx.ru/EuIiX.gif
  29. https://i.yapx.ru/EuIiT.gif
  30. https://i.yapx.ru/EuIiP.gif
  31. https://i.yapx.ru/EuIiN.gif
  32. https://i.yapx.ru/EuIiL.gif
  33. https://i.yapx.ru/EuIic.gif
  34. https://i.yapx.ru/EuIie.gif
  35. https://i.yapx.ru/EuIif.gif
  36. https://i.yapx.ru/EuIii.gif
  37. https://i.yapx.ru/EuIij.gif
  38. https://i.yapx.ru/EuIin.gif
Где ещё можно поискать картинки загрузки
Сайты с готовыми картинками-загрузками:
  • https://icons8.com/preloaders/ru/free - есть бесплатные.
  • https://loading.io/ - нужна регистрация, картинки со значком CCO бесплатные.
  • https://mentalized.net/activity-indicators/ - несколько штук, которые можно скачать бесплатно.
Генераторы:
Генераторы
  • http://ajaxload.info/
  • http://loadergenerator.com/pulsate
  • http://www.loadinfo.net/
  • http://loadinggif.com/
  • http://loadingapng.com/

Ваши комментарии:

Комментарии со спамом удаляются.