Анимация загрузки web сайта
18-Апр-21 13:08
Сегодня мы рассмотрим пример анимации при загрузки страницы.
На некоторых сайтах (в основном высоконагруженных) загрузка длится довольно долго и пользователь не дожидаясь заветного контента покидает сайт.
Для того чтоб посетители понимали, что загрузка страницы продолжается, мы будем им показывать спиннер.
- После открытия тега <body>, вставляем CSS и html код
<style> #page-preloader { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: white; z-index: 100500; } #page-preloader .spinner { width: 100px; height: 100px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; border: 2px solid #f3f3f3; border-top: 2px solid rgba(0,0,0, .5); border-radius: 50%; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> <div id="page-preloader"><i class="spinner"></i></div>
- Находим закрывающийся тег </body>, перед ним вставляем.
<script> $(window).on('load', function () { $('#page-preloader').find('.spinner').fadeOut(); $('#page-preloader').delay(350).fadeOut('slow'); }); </script>