• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Эффекты анимации загрузки на чистом CSS (Индикатор загрузки для анимации загрузки с помощью CSS)
Эффекты анимации загрузки на чистом CSS
Kosten
Четверг, 18 Апреля 2019 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Одной из проблем, которую должен учитывать каждый веб-разработчик, является время загрузки страницы. Конечно, при более высоких скоростях интернета, которые у нас есть в настоящее время, большинство страниц и приложений открываются довольно быстро.

В некоторых случаях неизбежно дать пользователям немного подождать, пока все данные и страницы загрузятся. В такие моменты вам нужно что-то, чтобы привлечь внимание пользователей и держать их на сайте достаточно долго для загрузки всего контента.

Здесь представлена оригинальная загрузка, где на этот раз создано 3 простых анимации загрузки при помощи CSS3. Где такая анимация просматривается на всех обновленных или современных браузерах, ведь CSS3 анимация загрузки видна как в Firefox, Safari и Chrome и так далее.

В этом первом примере разметка очень проста, где мы создадим неупорядоченный список и создадим внутри div, чтобы создать эффект и управлять всей анимацией.



ПЕРВЫЙ ПРИМЕР CSS3 АНИМАЦИЯ ЗАГРУЗКИ

HTML

Код
<ul id="progress">
    <li>
    <div id="layer1" class="ball"></div> <!-- layer1 control delay animation / ball is effect -->
    <div id="layer7" class="pulse"></div> <!-- layer7 control delay animation / pulse is effect  -->
    </li>
    <li>
    <div id="layer2" class="ball"></div>
    <div id="layer8" class="pulse"></div>
    </li>
    <li>
    <div id="layer3" class="ball"></div>
    <div id="layer9" class="pulse"></div>
    </li>
    <li>
    <div id="layer4" class="ball"></div>
    <div id="layer10" class="pulse"></div>
    </li>
    <li>
    <div id="layer5" class="ball"></div>
    <div id="layer11" class="pulse"></div>
    </li>
</ul>


CSS

Ничего сложного, просто создайте графику для неупорядоченного списка, уделите особое внимание анимации, благодаря слоям задержки и управления мы можем создавать эти эффекты.



ВТОРОЙ ПРИМЕР АНИМАЦИИ ЗАГРУЗКИ CSS3

HTML

Во втором примере мы увидим, как создать полосу загрузки, которая подходит для любого разрешения. Просто создайте контейнер с шириной 100% и поместите его в класс с помощью анимации, чтобы запустить всю ширину экрана.

Код
<div id="content">
<span class="expand"></span>
</div>


CSS

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

Код
#content {
    width: 100%;
    /* Full Width */
    height: 5px;
    margin: 50px auto;
    background: #000;
}

.expand {
    width: 100%;
    height: 1px;
    margin: 2px 0;
    background: #2187e7;
    position: absolute;
    box-shadow: 0px 0px 10px 1px rgba(0,198,255,0.7);
    -moz-animation: fullexpand 10s ease-out;
    -webkit-animation: fullexpand 10s ease-out;
}

/* Full Width Animation Bar */
@-moz-keyframes fullexpand {
    0%  { width: 0px;
}

100% {
    width: 100%;
}    
}

@-webkit-keyframes fullexpand {
    0% {
        width: 0px;
    }

    100% {
        width: 100%;
    };
}


ТРЕТИЙ ПРИМЕР АНИМАЦИИ ЗАГРУЗКИ CSS3

HTML

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

Код
<ul id="loadbar">
    <li>
    <div id="layerFill1" class="bar"></div> <!-- Control Layer + Bar  -->
    </li>
    <li>
    <div id="layerFill2" class="bar"></div>
    </li>
    <li>
    <div id="layerFill3" class="bar"></div>
    </li>
    <li>
    <div id="layerFill4" class="bar"></div>
    </li>
    <li>
    <div id="layerFill5" class="bar"></div>
    </li>
    <li>
    <div id="layerFill6" class="bar"></div>
    </li>
    <li>
    <div id="layerFill7" class="bar"></div>
    </li>
    <li>
    <div id="layerFill8" class="bar"></div>
    </li>
    <li>
    <div id="layerFill9" class="bar"></div>
    </li>
    <li>
    <div id="layerFill10" class="bar"></div>
    </li>
</ul>


CSS

Как видите процесс такой же как и в первом примере, где просто знаете немного CSS для создания замечательных эффектов.



В итоге:

В этом уроке мы создали простые, но красивые анимации с использованием только CSS3, для дальнейшей информации я рекомендую прочитать эту ссылку CSS3 Animations.

Демонстрация
Прикрепления: 1758991.png (24.4 Kb) · source.zip (3.0 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Эффекты анимации загрузки на чистом CSS (Индикатор загрузки для анимации загрузки с помощью CSS)
  • Страница 1 из 1
  • 1
Поиск: