Индикаторы прогресса на CSS3

4 индикатора активности процесса, в которых не используется ничего, кроме кода CSS3.

 

Разметка HTML

Индикаторы имеют очень простую структуру:

        <div class="main_body">
            <div class="element">
                <div class="loading1">
                </div>
            </div>
            <div class="element">
                <div class="loading2">
                    <div></div>
                </div>
            </div>
            <div class="element">
                <div class="loading3">
                    <div>ждите..</div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="element">
                <div class="loading4">
                </div>
            </div>
        </div>

 

CSS

Все индикаторы используют анимации CSS3 для формирования динамичного изображения.

Код для первого индикатора (в виде вращающегося волчка).

.loading1 {
    background-color: #000;
    width: 90px;
    height: 90px;
    border: 30px solid #FFF;
    border-right-width: 0;
    border-radius: 50%;
    box-shadow: 0 0 10px 5px #009933;

    /* Анимация css3 */
    -webkit-animation: anim1 1s linear infinite;
    -moz-animation: anim1 1s linear infinite;
    -ms-animation: anim1 1s linear infinite;
    -o-animation: anim1 1s linear infinite;
    animation: anim1 1s linear infinite;
}

/* Кадры анимации css3 */
@-webkit-keyframes anim1 {
    from { -webkit-transform: rotateX(45deg) rotateZ(0deg); }
    50% { -webkit-transform: rotateX(0deg) rotateZ(180deg); }
    to { -webkit-transform: rotateX(45deg) rotateZ(360deg); }
}
@-moz-keyframes anim1 {
    from { -moz-transform: rotateX(45deg) rotateZ(0deg); }
    50% { -moz-transform: rotateX(0deg) rotateZ(180deg); }
    to { -moz-transform: rotateX(45deg) rotateZ(360deg); }
}
@-ms-keyframes anim1 {
    from { -ms-transform: rotateX(45deg) rotateZ(0deg); }
    50% { -ms-transform: rotateX(0deg) rotateZ(180deg); }
    to { -ms-transform: rotateX(45deg) rotateZ(360deg); }
}
@-o-keyframes anim1 {
    from { -o-transform: rotateX(45deg) rotateZ(0deg); }
    50% { -o-transform: rotateX(0deg) rotateZ(180deg); }
    to { -o-transform: rotateX(45deg) rotateZ(360deg); }
}
@keyframes anim1 {
    from { transform: rotateX(45deg) rotateZ(0deg); }
    50% { transform: rotateX(0deg) rotateZ(180deg); }
    to { transform: rotateX(45deg) rotateZ(360deg); }
}

Код второго индикатора (слайдера перемещающегося слайдера).

.loading2 {
    background-color: #009933;
    border-radius: 2px;
    height: 20px;
    margin-top: 60px;
    overflow: hidden;
    position: relative;
    width: 140px;
}
.loading2 > div {
    background-color: #FFFFFF;
    height: 100%;
    width: 0;

    /* Анимация css3 */
    -webkit-animation-name:anim2;
    -webkit-animation-duration:2.0s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:linear;
    -webkit-animation-timing-function:ease;

    -moz-animation-name:anim2;
    -moz-animation-duration:2.0s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-direction:linear;
    -moz-animation-timing-function:ease;

    -ms-animation-name:anim2;
    -ms-animation-duration:2.0s;
    -ms-animation-iteration-count:infinite;
    -ms-animation-direction:linear;
    -ms-animation-timing-function:ease;

    -o-animation-name:anim2;
    -o-animation-duration:2.0s;
    -o-animation-iteration-count:infinite;
    -o-animation-direction:linear;
    -o-animation-timing-function:ease;

    animation-name:anim2;
    animation-duration:2.0s;
    animation-iteration-count:infinite;
    animation-direction:linear;
    animation-timing-function:ease;
}

/* Кадры анимации css3 */
@-webkit-keyframes anim2 {
    from { width: 0; }
    50% { width: 100%; }
    to { width: 0; }
}
@-moz-keyframes anim2 {
    from { width: 0; }
    50% { width: 100%; }
    to { width: 0; }
}
@-ms-keyframes anim2 {
    from { width: 0; }
    50% { width: 100%; }
    to { width: 0; }
}
@-o-keyframes anim2 {
    from { width: 0; }
    50% { width: 100%; }
    to { width: 0; }
}
@keyframes anim2 {
    from { width: 0; }
    50% { width: 100%; }
    to { width: 0; }
}

Код третьего индикатора - вращающиеся вокруг слова обручи.

.loading3 {
    border-radius: 50%;
    font-size: 20px;
    height: 100px;
    line-height: 90px;
    position: relative;
    text-align: center;
    width: 100px;
}
.loading3 > div:nth-child(2), .loading3 > div:nth-child(3) {
    background-color: rgba(255, 255, 255, 0.2);
    border: 5px solid #FFF;
    border-radius: 50%;
    box-shadow: 0 0 5px 0 #009933;
    height: 100px;
    position: absolute;
    top: 0px;

    /* Устанавливаем ширину верхней и нижней рамки равной 0 */
    border-top-width: 0;
    border-bottom-width: 0;

    /* Анимация css3 */
    -webkit-animation: anim3 2s linear infinite;
    -moz-animation: anim3 2s linear infinite;
    -ms-animation: anim3 2s linear infinite;
    -o-animation: anim3 2s linear infinite;
    animation: anim3 2s linear infinite;
}
.loading3 > div:nth-child(2) {
    border-color: #FFF;
    left: 0px;
    width: 90px;
}
.loading3 > div:nth-child(3) {
    border-color: #009933;
    left: -5px;
    width: 100px;

    /* Задержка css3 */
    -webkit-animation-delay:0.5s;
    -moz-animation-delay:0.5s;
    -ms-animation-delay:0.5s;
    -o-animation-delay:0.5s;
    animation-delay:0.5s;
}

/* Кадры анимации css3 */
@-webkit-keyframes anim3 {
    from { -webkit-transform: rotateY(0deg); }
    50% { -webkit-transform: rotateY(180deg); }
    to { -webkit-transform: rotateY(360deg); }
}
@-moz-keyframes anim3 {
    from { -moz-transform: rotateY(0deg); }
    50% { -moz-transform: rotateY(180deg); }
    to { -moz-transform: rotateY(360deg); }
}
@-ms-keyframes anim3 {
    from { -ms-transform: rotateY(0deg); }
    50% { -ms-transform: rotateY(180deg); }
    to { -ms-transform: rotateY(360deg); }
}
@-o-keyframes anim3 {
    from { -o-transform: rotateY(0deg); }
    50% { -o-transform: rotateY(180deg); }
    to { -o-transform: rotateY(360deg); }
}
@keyframes anim3 {
    from { transform: rotateY(0deg); }
    50% { transform: rotateY(180deg); }
    to { transform: rotateY(360deg); }
}

Код четвертого индикатора - для любителей феншуй.

.loading4 {
    background: none repeat scroll 0 0 #EEEEEE;
    border-color: #009933;
    border-radius: 100%;
    border-style: solid;
    border-width: 2px 2px 50px;
    height: 48px;
    position: relative;
    width: 96px;

    /* Анимация css3 */
    -webkit-animation: anim4 1s linear infinite;
    -moz-animation: anim4 2s linear infinite;
    -ms-animation: anim4 1s linear infinite;
    -o-animation: anim4 1s linear infinite;
    animation: anim4 1s linear infinite;
}
.loading4:before {
    background: none repeat scroll 0 0 #EEEEEE;
    border: 18px solid #009933;
    border-radius: 100%;
    content: "";
    height: 12px;
    left: 0;
    position: absolute;
    top: 50%;
    width: 12px;
}
.loading4:after {
    background: none repeat scroll 0 0 #009933;
    border: 18px solid #EEEEEE;
    border-radius: 100%;
    content: "";
    height: 12px;
    left: 50%;
    position: absolute;
    top: 50%;
    width: 12px;
}

/* Кадры анимации css3 */
@-webkit-keyframes anim4 {
    from { -webkit-transform: rotateZ(0deg); }
    50% { -webkit-transform: rotateZ(180deg); }
    to { -webkit-transform: rotateZ(360deg); }
}
@-moz-keyframes anim4 {
    from { -moz-transform: rotateZ(0deg); }
    50% { -moz-transform: rotateZ(180deg); }
    to { -moz-transform: rotateZ(360deg); }
}
@-ms-keyframes anim4 {
    from { -ms-transform: rotateZ(0deg); }
    50% { -ms-transform: rotateZ(180deg); }
    to { -ms-transform: rotateZ(360deg); }
}
@-o-keyframes anim4 {
    from { -o-transform: rotateZ(0deg); }
    50% { -o-transform: rotateZ(180deg); }
    to { -o-transform: rotateZ(360deg); }
}
@keyframes anim4 {
    from { transform: rotateZ(0deg); }
    50% { transform: rotateZ(180deg); }
    to { transform: rotateZ(360deg); }
}

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/19SfCyI3mF4/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Индикаторы прогресса на CSS3 | | 2012-09-10 01:59:21 | | Статьи Web-мастеру | | 4 индикатора активности процесса, в которых не используется ничего, кроме кода CSS3. Разметка HTMLИндикаторы имеют очень простую структуру: ждите..  CSSВсе индикаторы используют анимации CSS3 для | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: