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

Демонстрация работы – Скачать исходный код

Начнем 

Давайте рассмотрим код HTML. Он не очень сложный. Блок класса loading-container только задает расположение и центрует полосу загрузки.

<div class="loading-container">
    <div class="loading-bar">
        <div class="amount green" style="width: 40%;"> <!-- The width (and colour in class) -->
            <div class="loaded">
                40% <!-- Loaded amount -->
            </div>
            <div class="lines"></div> <!-- The lines! -->
        </div>
    </div>
</div>

В блоке класса loading-bar находится полоса загрузки, а в его дочернем блоке — информация о том, насколько заполнена полоса загрузки. После этого расположен текст с процентом загрузки, и блок, содержащий диагональные линии. Линии помещены в отдельный блок, чтобы позже можно было их анимировать. Если Вам подходит статический фон, можно задать линии как фоновое изображение блока класса amount.

Давайте рассмотрим код CSS.

CSS 

Код CSS — это главное, благодаря чему полоса загрузки выглядит как полоса загрузки. Для начала зададим стили блоку класса loading-container. Всего несколько свойств, чтобы отцентровать полосу загрузки.

.loading-container {
    width: 600px;
    height: 300px;
    padding: 50px;
    margin: 0px auto;
    border-radius: 10px;
    background: rgba(255,255,255,0.6);
    border: 1px solid #eee;
}
.loading-container .loading-bar {
    margin-bottom: 40px;
}

После этого зададим стили блокам класса loading-bar и amount. Блок класса loading-bar будет фиксированной ширины, а размер блока класса amount будет процентом от родительского блока. Потом можно менять ширину блока класса amount, чтобы она соответствовала этапам загрузки.

.loading-bar {
    width: 500px;
    margin: 0px auto;
    height: 61px;
    border-radius: 5px;
    background-color: #282f32;
    padding: 4px 5px;
    box-shadow: inset 3px 0px 10px rgba(0,0,0,0.1);
}
.amount {
    /* we haven't included the colour yet, we'll get to that later. */
    height: 60px;
    border-radius: 5px;
    white-space: nowrap;
    overflow: hidden;
    margin-top: -9px;
}

Затем давайте рассмотрим класс lines, задающий фон. Самое интересное в нем то, что как фон используется элемент SVG. Мы создадим файл SVG после того, как закончим задавать стили CSS. Еще зададим все анимации этому классу, что будет рассмотрено чуть позже. Если браузер не поддерживает анимации, полоса загрузки будет статичной, что не так уж плохо.

.lines {
    /* the lines overflow the container. This creates a continuous flow of the background */
    width: 200%;
    /* We use a SVG file as the background */
    background: url('lines.svg') repeat-x;
    height: 120%;
    text-align: center;
    margin-top: -35px;
    /* Any overflow is hidden */
    overflow: hidden;
    border-radius: 50px;
    /* Implement the animations, we'll get to that later */
    -webkit-animation: moveBars 1s linear infinite;
    -moz-animation: moveBars 1s linear infinite;
    -ms-animation: moveBars 1s linear infinite;
    -o-animation: moveBars 1s linear infinite;
    animation: moveBars 1s linear infinite;
    font-weight: bold;
    color: #fff;
    color: 1px;
    font-size: 18px;
    text-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}

Следующий класс создан только для того, чтобы задать стили тексту поверх полосы загрузки.

После этого наконец-то переходим к цветам. Просто добавьте какие хотите тени блока и цвета фона.

.loaded {
    text-align: center;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
    position: relative;
    top: 9px;
    font-size: 30px;
    text-shadow: 0px 0px 10px rgba(0,0,0,0.2);
    color: #fff;
    z-index: 9999;
}

.green {
    background-color: #8ac320;
    box-shadow: inset 0px 4px 40px rgba(255,255,255,0.2), 0 10px 10px -5px #79aa1e , 0 7px 0 #628c14;
}

.blue {
    background-color: #20b9c3;
    box-shadow: inset 0px 4px 40px rgba(255,255,255,0.2), 0 10px 10px -5px #1e8aaa, 0 7px 0 #13768c;
}
.red {
    background-color: #dc6565;
    box-shadow: inset 0px 4px 40px rgba(255,255,255,0.2), 0 10px 10px -5px #d23333, 0 7px 0 #8c1212;
}

И, наконец, анимации. Все, что нам нужно — сдвинуть блок класса lines на 180px влево. Так что на 100 процентах, т. е., в конце анимации, изменим левый внешний отступ на -180px. Обычно анимации занимают много места в файле CSS из-за приставок производителей, но тут все уместилось в 5 строк:

/* ANIMATIONS */
@keyframes moveBars { 100% { margin-left: -180px; } }
@-webkit-keyframes moveBars { 100% { margin-left: -180px; } }
@-moz-keyframes moveBars { 100% { margin-left: -180px; } }
@-ms-keyframes moveBars { 100% { margin-left: -180px; } }
@-o-keyframes moveBars { 100% { margin-left: -180px; } }

И это все, что касается кода CSS.

Теперь перейдем к фону, состоящему из файла SVG.

SVG 

SVG, на наш взгляд, — сильно недооцененная технология в интернете. С помощью SVG можно создать любую векторную форму и использовать большинство стилей CSS. Можно использовать отдельные изображения в формате SVG или вставлять их в CSS и применять их как фон. В этом уроке мы делаем второе.

Основной причиной для использования изображения SVG в нашем примере послужило то, что у браузеров на движке Webkit были некоторые проблемы с радиусом границы и переполнением. Если Вы используете свойства прозрачности, относительного позиционирования или поворачиваете элемент с помощью CSS, используя при этом свойство радиуса границы, содержимое выйдет за края. Другой причиной использования изображений SVG стало то, что полоса загрузки продолжает выглядеть красиво даже в старых браузерах, которые поддерживают не все используемые свойства, в сравнении с использованием повернутых блоков для создания линий.

<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180">
  <title>Diagonal Lines</title>
  <desc>Some diagonal lines for use in the loading bar.</desc>
 <polygon fill="white" opacity="0.2" points="90,0 180,0 90,180 0,180" />
</svg>

Что означает эта запись? Первая строка — как тип документа для документов HTML. После этого задаем для SVG название и описания, для правильной и понятной структуры. Затем  рисуем полигон. Это просто белая форма с прозрачностью 0.2. После чего задаем точки. Это координаты в документе, по котором мы хотим расположить полигоны. Каждый набор точек отделен пробелом. После всего этого Вам остается только поместить этот код в файл с названием lines.svg  и сохранить его в той же категории, что и Ваш файл CSS.

И это все. Посмотрите демонстрацию работы, чтобы увидеть наш пример в действии.

Автор урока Johnny Simpson

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

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

• Создание градиентных кнопок с использованием CSS3 
• Создание переключателя с использованием CSS3 
• Создание интересной формы авторизации с использованием HTML5 и CSS3