Спиннер загрузки

Spinner (индикаторы загрузки)

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

Классы и их назначение

Класс	Назначение
`.sf-loader--container`	Основной контейнер для индикатора загрузки.
`.sf-loader--loading-indicator`	Круглый индикатор загрузки с анимацией вращения.
`.sf-loader--text-margin`	Текст, отображаемый под индикатором загрузки (например, "Loading...").
`.sf-loader--circles`	Индикатор загрузки в виде кругов, которые меняют прозрачность.
`.sf-loader--1/2`	Модификатор для уменьшения размера индикатора загрузки.
`.sf-loader--2`	Модификатор для увеличения размера индикатора загрузки.
`.sf-loader--3`	Модификатор для еще большего увеличения размера индикатора загрузки.
`.half`	Модификатор для частичного заполнения индикатора загрузки.

Переменные CSS и их значения по умолчанию

Переменная	Значение по умолчанию	Описание
`--sf-loader--diameter`	`var(--sf-d2)`	Диаметр круглого индикатора загрузки.
`--sf-loader-points--diameter`	`var(--sf-d0)`	Диаметр контейнера для кругового индикатора с точками.
`--sf-loader-points-span--diameter`	`var(--sf-a6)`	Диаметр точек в круговом индикаторе.

Пример HTML и CSS

Стандартный spinner разных размеров:

            
<div class="sf-loader-container">
    <div class="sf-loader--loading-indicator sf-loader--1/2"></div>
        <span class="sf-loader--text-margin">Loading... </span>
        </div>
        <div class="sf-loader-container">
            <div class="sf-loader--loading-indicator"></div>
        <span class="sf-loader--text-margin">Loading... </span>
        </div>
        <div class="sf-loader-container">
            <div class="sf-loader--loading-indicator sf-loader--2"></div>
        <span class="sf-loader--text-margin">Loading... </span>
        </div>
        <div class="sf-loader-container">
            <div class="sf-loader--loading-indicator sf-loader--3"></div>
        <span class="sf-loader--text-margin">Loading... </span>
</div>

spinner заполненный на половину:

            
<div class="sf-loader-container">
    <div class="sf-loader--loading-indicator sf-loader--1/2 sf-loader--half"></div>
<span class="sf-loader--text-margin">Loading... </span>
</div>
<div class="sf-loader-container">
    <div class="sf-loader--loading-indicator sf-loader--half"></div>
<span class="text-margin">Loading... </span>
</div>
<div class="sf-loader-container">
    <div class="sf-loader--loading-indicator sf-loader--2 sf-loader--half"></div>
<span class="sf-loader--text-margin">Loading... </span>
</div>
<div class="sf-loader-container">
    <div class="sf-loader--loading-indicator sf-loader--3 sf-loader--half"></div>
<span class="sf-loader--text-margin">Loading... </span>
</div>

spinner с точками:

            
<div class="sf-loader-container">
    <div class="sf-loader--circles sf-loader--1/2">
        <span style="--i:1;"></span>
        <span style="--i:2;"></span>
        <span style="--i:3;"></span>
        <span style="--i:4;"></span>
        <span style="--i:5;"></span>
        <span style="--i:6;"></span>
        <span style="--i:7;"></span>
        <span style="--i:8;"></span>
        <span style="--i:9"></span>
        <span style="--i:10;"></span>
        <span style="--i:11;"></span>
        <span style="--i:12;"></span>
        <span style="--i:13;"></span>
        <span style="--i:14;"></span>
        <span style="--i:15;"></span>
        <span style="--i:16;"></span>
    </div>
<span class="sf-loader--text-margin">Loading... </span>
</div>
<div class="sf-loader-container">
    <div class="sf-loader--circles">
        <span style="--i:1;"></span>
        <span style="--i:2;"></span>
        <span style="--i:3;"></span>
        <span style="--i:4;"></span>
        <span style="--i:5;"></span>
        <span style="--i:6;"></span>
        <span style="--i:7;"></span>
        <span style="--i:8;"></span>
        <span style="--i:9"></span>
        <span style="--i:10;"></span>
        <span style="--i:11;"></span>
        <span style="--i:12;"></span>
        <span style="--i:13;"></span>
        <span style="--i:14;"></span>
        <span style="--i:15;"></span>
        <span style="--i:16;"></span>
    </div>
    <span class="sf-loader--text-margin">Loading... </span>
</div>
<div class="sf-loader-container">
    <div class="sf-loader--circles sf-loader--2">
        <span style="--i:1;"></span>
        <span style="--i:2;"></span>
        <span style="--i:3;"></span>
        <span style="--i:4;"></span>
        <span style="--i:5;"></span>
        <span style="--i:6;"></span>
        <span style="--i:7;"></span>
        <span style="--i:8;"></span>
        <span style="--i:9"></span>
        <span style="--i:10;"></span>
        <span style="--i:11;"></span>
        <span style="--i:12;"></span>
        <span style="--i:13;"></span>
        <span style="--i:14;"></span>
        <span style="--i:15;"></span>
        <span style="--i:16;"></span>
    </div>
    <span class="sf-loader--text-margin">Loading... </span>
</div>
<div class="sf-loader-container">
    <div class="sf-loader--circles sf-loader--3">
        <span style="--i:1;"></span>
        <span style="--i:2;"></span>
        <span style="--i:3;"></span>
        <span style="--i:4;"></span>
        <span style="--i:5;"></span>
        <span style="--i:6;"></span>
        <span style="--i:7;"></span>
        <span style="--i:8;"></span>
        <span style="--i:9"></span>
        <span style="--i:10;"></span>
        <span style="--i:11;"></span>
        <span style="--i:12;"></span>
        <span style="--i:13;"></span>
        <span style="--i:14;"></span>
        <span style="--i:15;"></span>
        <span style="--i:16;"></span>
    </div>
    <span class="sf-loader--text-margin">Loading... </span>
</div>

Изменить статью

Спиннер загрузки

Spinner (индикаторы загрузки)

Классы и их назначение

Переменные CSS и их значения по умолчанию

Пример HTML и CSS

Навигация