Делаем спиннер на HTML-CSS

Делаем спиннер на HTML-CSS

Делаем спиннер на HTML-CSS

Один из самых базовых элементов интерфейса любого современного сайта — это спиннер — анимированный элемент, который крутится вокруг некоторой точки, тем самым сообщая пользователю
о том, что его запрос выполняется и данные загружаются.

В примере далее я покажу Вам максимально упрощенный вариант такого элемента.



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Loading Spinner</title>



    <style>





        html, body {

            height: 100%;

        }



        /* выравниваем все блоки по ценру экрана */

        body {

            margin: 0;

            padding: 0;

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

        }





        /* элементы спиннера также выравниваем по центру */

        .spinner {

            text-align: center;

        }





        /*  элемент спиннера - делаем круг из квадрата 40x40

            с помощью свойства border-radius, левая граница круга окрашена

            в другой цвет. далее запускаем бесконечную анимацию

        */

        .spinner__animation {

            display: inline-block;

            border-radius: 50%;

            width: 40px;

            height: 40px;

            border-top: 3px solid rgba(0, 0, 0, 0.1);

            border-right: 3px solid rgba(0, 0, 0, 0.1);

            border-bottom: 3px solid rgba(0, 0, 0, 0.1);

            border-left: 3px solid rgb(129, 138, 145);

            animation: loading-spinner 0.5s infinite linear;

        }



        /* это текст для спиннера, например - "Загрузка..." */

        .spinner__info {

            display: block;

            padding-top: 5px;

            color: rgb(129, 138, 145);

            font-size: .9rem;

        }



        /* сама анимация вращения */

        @keyframes loading-spinner {

            0% { transform: rotate(0deg); }

            100% { transform: rotate(360deg); }

        }



    </style>



</head>

<body>



    <div class="spinner">

        <span class="spinner__animation"></span>

        <span class="spinner__info">Загрузка...</span>

    </div>



</body>

</html>



Таким образом, мы получили простой компонент спиннера, который можно подстраивать непосредственно под дизайн конкретного сайта, изменяя цвет или размер. При желании можно также изменить и скорость анимации. Все это можно сделать в единственном классе — .spinner__animation.

Источник

НЕТ КОММЕНТАРИЕВ

Оставить комментарий