Плавный текстовый прелоадер CSS / Элементы / Сниппеты Bootstrap

Версия: v1.0.0

Категория: Элементы

Bootstrap: 3, 4, 5, CSS Grid, Tailwind CSS, Materialize CSS

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify, Laravel, WHMCS, PHP

Язык: Английский

Вес файла: 0.7 Kb

Уникальный ID: 6432

Количество символов:

Посмотрели: 141 раз

Прикреплён файл №1: /_sf/64/6432.html

Прикреплён файл №2: /stuff/0-0-0-6432-20

Скачали бесплатно: 4 раз

Прокомментировали: 0 раз

Рейтинг: 4.5 / 5 - 2 голосов

Тип лицензии: CC BY 4.0

Авторство: bootstraptema.ru

Поделился: BootstrapТема

Добавлено: 2024-09-27 в 10:39

Метка: 1727422757

⇄ ⇅

.preloader svg {
 position: absolute;
 top: 0;
 width: 100vw;
 height: 110vh;
 fill: #fff;
}

.preloader .preloader-heading .load-text {
 font-size: 20px;
 font-weight: 200;
 letter-spacing: 15px;
 text-transform: uppercase;
 z-index: 20;
}

.load-text span {
 -webkit-animation: loading 1s infinite alternate;
 animation: loading 1s infinite alternate;
}

.load-text span:nth-child(1) {
 -webkit-animation-delay: 0s;
 animation-delay: 0s;
}

.load-text span:nth-child(2) {
 -webkit-animation-delay: 0.1s;
 animation-delay: 0.1s;
}

.load-text span:nth-child(3) {
 -webkit-animation-delay: 0.2s;
 animation-delay: 0.2s;
}

.load-text span:nth-child(4) {
 -webkit-animation-delay: 0.3s;
 animation-delay: 0.3s;
}

.load-text span:nth-child(5) {
 -webkit-animation-delay: 0.4s;
 animation-delay: 0.4s;
}

.load-text span:nth-child(6) {
 -webkit-animation-delay: 0.5s;
 animation-delay: 0.5s;
}

.load-text span:nth-child(7) {
 -webkit-animation-delay: 0.6s;
 animation-delay: 0.6s;
}

@-webkit-keyframes loading {
 0% {
 opacity: 1;
 }
 100% {
 opacity: 0;
 }
}

@keyframes loading {
 0% {
 opacity: 1;
 }
 100% {
 opacity: 0;
 }
}
 </style>

BootstrapTema