Создание аккуратного индикатора загрузки с использованием 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; }
Надеемся, Вам понравился этот урок и он Вам пригодится.
Автор урока Lea Verou
Перевод — Дежурка
Смотрите также:
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
550
- Насколько важно сегодня использовать Web Safe цвета?
539
- 20 наборов кистей для Фотошопа, которые вам пригодятся
531
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191