Анимированные полосы загрузки с использованием CSS3 и фонов SVG

[Primavirtus]

HTML Часть​

Давайте рассмотрим код 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>

CSS Часть​

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

Код:

.loading-container {    width:600px;    height:300px;    padding:50px;    margin:0pxauto;    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:0pxauto;    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:0px0px10px 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%{;}}@-webkit-keyframes moveBars {100%{;}}@-moz-keyframes moveBars {100%{;}}@-ms-keyframes moveBars {100%{;}}@-o-keyframes moveBars {100%{;}}

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

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

SVG Часть​

Код:

<svgxmlns="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><polygonfill="white"opacity="0.2"points="90,0 180,0 90,180 0,180"/></svg>

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

Демо:

Пожалуйста, авторизуйтесь для просмотра ссылки.

 

[Bodrov]

Красиво выглядит. Подойдет допустим для главной страницы проекта, который в разработке.

 

[Primavirtus]

Мы на форум эти ставили, только немного подшаманили без svg/