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

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

Мы обратили внимание на небольшой интересный индикатор загрузки и задумались, насколько сложно создать его с помощью CSS и анимаций CSS. Мы решили попробовать создать этот эффект с помощью увеличения размера границы до середины элемента, при этом не изменяя полную ширину элемента, используя свойства box-sizing: border-box, при применении которого значения ширины и высоты элемента будут включать в себя значения границ и внутренних отступов.

Посмотрите, как это создается. Сначала показано увеличение ширины левой границы, затем разделение фоновых цветов:

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

Код HTML

<h1>Increasing border-left width</h1>
<div class="progress"></div>
<div class="progress"></div>
<div class="progress"></div>
<div class="progress"></div>
<div class="progress"></div>
<div class="progress"></div>
<div class="progress"></div>
<div class="progress"></div>
<div class="progress"></div>
<div class="progress"></div>
<h1>Split background colours</h1>
<div class="progress"></div>

Код CSS

/** * Пошаговый вид круглого индикатора загрузки */

.progress {
        display: inline-block;
        font-size: 50px; /* Размер индикатора загрузки */
        width: 1em;
        height: 1em;
        border: 0 solid grey;
        border-radius: 50%;
        box-sizing: border-box;
        background: silver;
        background-origin: border-box;
}

.progress:nth-of-type(2) { border-left-width: .1em; }
.progress:nth-of-type(3) { border-left-width: .2em; }
.progress:nth-of-type(4) { border-left-width: .3em; }
.progress:nth-of-type(5) { border-left-width: .4em; }
.progress:nth-of-type(6) { border-left-width: .5em }
.progress:nth-of-type(7) { border-left-width: .6em }
.progress:nth-of-type(8) { border-left-width: .7em }
.progress:nth-of-type(9) { border-left-width: .8em }
.progress:nth-of-type(10) { border-left-width: .9em }

.progress:nth-of-type(11) {
        background: linear-gradient(grey 50%, silver 50%);
        transform: rotate(90deg);
}
h1 {
        font: bold 100% sans-serif;
}

Однако, как показано выше, после середины граница больше не скруглена, так что нужный эффект не создается. Но если разделить цвет фона на две половины и анимировать сначала левую границу до 50% ширины, а затем правую границу от 50% ширины, получится 25% нужного эффекта. Можно воссоздать весь эффект, анимируя так же верхнюю и нижнюю границы, но проще применить свойство направления анимации со значением alternate, чтобы ключевые кадры сначала воспроизводились в обычном порядке, а затем в обратном и так по кругу, т. е., чтобы круг то показывался, то скрывался, и одновременно с этим вращать индикатор загрузки на 90 градусов каждый раз, применяя временную функцию анимации steps(4) для поворота четыре раза в течение анимации границы.

Вот окончательный результат:

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

Код HTML

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

Код CSS

/** * Легко настраиваемый круглый индикатор загрузки */

@keyframes progress {
        50% { border-width: .5em 0; }
        to { border-width: .5em 0 0 0; }
}

@keyframes rotate {
        to { transform: rotate(-270deg); }
}

.progress {
        display: inline-block;
        font-size: 50px; /* Размер индикатора загрузки */
        width: 1em; height: 1em;
        border: solid white;
        border-top-color: #ddd;
        border-width: 0 0 .5em 0;
        border-radius: 50%;
        box-sizing: border-box;
        margin: .1em .2em;
        background: linear-gradient(white 50%, #ddd 50%);
        background-origin: border-box;
        transform: rotate(90deg);
        animation: rotate 1s steps(4) infinite,
                   progress .25s linear infinite alternate;
        text-indent: 99em;
        overflow: hidden;
}
.progress.small { font-size: 16px }
.progress.large { font-size: 100px }

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

Надеемся, Вам понравился этот урок и Вас заинтересовал способ создания такого эффекта.

Автор урока Lea Verou

Перевод — Дежурка

Смотрите также:

Опубликовано в css, января 14, 2016
Метки: css, css3, верстка, урок css, урок css3, урок верстка

�

Коментарии запрещены.

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

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые