Создание аккуратного индикатора загрузки с использованием CSS

24 января 2016 | Опубликовано в css | Нет комментариев »

В этом уроке мы расскажем, как создать еще один индикатор загрузки. После создания легконастраиваемого круглого индикатора загрузки мы решили попробовать разработать классический индикатор загрузки, используя только CSS. Такой индикатор загрузки можно создать разными способами, но нам хотелось, чтобы наш индикатор был аккуратным, простым, понятным, подходящим для разных ситуаций и ему не требовался бы большой и сложный код CSS и/или большое количество элементов HTML.

Мы смогли создать такой индикатор, используя всего два элемента. Хотелось бы найти способ создания с использованием только одного элемента, но и это решение намного лучше других распространенных вариантов с большим количеством элементов и кода.

Итак, как создать такой индикатор?

С помощью псевдоэлементов ::before и ::after родительского и дочернего блоков создадим первые четыре полосы. После этого используем свойство тени блока без размытия на всех четырех полосах для создания оставшихся четырех полос. И будем вращать весь элемент с помощью временной функции steps(8), создавая анимацию.

Как и у легко настраиваемого круглого индикатора загрузки, изменение размера шрифта меняет размер всего элемента, так как все размеры заданы в единицах измерения ems. Также есть обходной путь в виде текста, чтобы индикатор загрузки могли использовать и программы, читающих с экрана. Этот индикатор работает в браузерах Chrome, Opera, Firefox, Safari и Internet Explorer от версии 10. Он должен работать без потери функциональности, но без анимаций и в браузере Internet Explorer версии 9.

Использование препроцессора для значений и вычислений может еще больше упростить код.

Вот как выглядит наш индикатор:

Демонстрация работы

Код HTML

<div class="small progress">Loading…</div>
<div class="progress">Loading…</div>
<div class="large progress">Loading…</div>

Код CSS

/** * Аккуратный индикатор загрузки */

@keyframes spin {
        to { transform: rotate(1turn); }
}

.progress {
        position: relative;
        display: inline-block;
        width: 5em;
        height: 5em;
        margin: 0 .5em;
        font-size: 12px;
        text-indent: 999em;
        overflow: hidden;
        animation: spin 1s infinite steps(8);
}

.small.progress {
        font-size: 6px;
}

.large.progress {
        font-size: 24px;
}

.progress:before,
.progress:after,
.progress > div:before,
.progress > div:after {
        content: '';
        position: absolute;
        top: 0;
        left: 2.25em; /* ширина родительского блока за вычетом ширины дочернего блока, деленные на два */
        width: .5em;
        height: 1.5em;
        border-radius: .2em;
        background: #eee;
        box-shadow: 0 3.5em #eee; /* высота родительского блока за вычетом высоты дочернего блока */
        transform-origin: 50% 2.5em; /* высота родительского блока , деленная на два */
}

.progress:before {
        background: #555;
}

.progress:after {
        transform: rotate(-45deg);
        background: #777;
}

.progress > div:before {
        transform: rotate(-90deg);
        background: #999;
}
.progress > div:after {
        transform: rotate(-135deg);
        background: #bbb;
}