Анимация загрузки web сайта

18-Апр-21 13:08

Анимация загрузки web сайта

Сегодня мы рассмотрим пример анимации при загрузки страницы.

На некоторых сайтах (в основном высоконагруженных) загрузка длится довольно долго и пользователь не дожидаясь заветного контента покидает сайт.

Для того чтоб посетители понимали, что загрузка страницы продолжается, мы будем им показывать спиннер.

  1. После открытия тега <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>	
    
    
  2. Находим закрывающийся тег </body>, перед ним вставляем.
    <script>
        $(window).on('load', function () {
            $('#page-preloader').find('.spinner').fadeOut();
    	$('#page-preloader').delay(350).fadeOut('slow');
        });
    </script>