CSS Прелоадер - Песочные часы / Элементы / Сниппеты Bootstrap

Версия: v1.0.0

Каталог: Сниппеты Bootstrap

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

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

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

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

Вес файла: 0.9 Kb

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

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

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

Помощь: установка & настройка

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

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

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

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

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

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

Авторство: Посмотреть

Информация: Пользователям

Информация: Правообладателям

Теги: preloader, лоадер, прелоадер, анимированные часы, Loader, песочные часы, анимированный прелоадер, сниппет, элемент

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

Добавлено: 2024-06-02 в 12:41

Метка: 1717321268

⇄ ⇅

.preloader-block {
 text-align: center;
 position: absolute;
 left: 50%;
 top: 50%;
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 text-align: center;
 line-height: 1;
}

.loader {
 box-sizing: border-box;
 display: inline-block;
 width: 50px;
 height: 80px;
 border-top: 5px solid #fff;
 border-bottom: 5px solid #fff;
 position: relative;
 background: -webkit-linear-gradient(#ff3d00 30px, transparent 0) no-repeat;
 background: linear-gradient(#ff3d00 30px, transparent 0) no-repeat;
 background-size: 2px 40px;
 background-position: 50% 0px;
 -webkit-animation: hourglass 5s linear infinite;
 animation: hourglass 5s linear infinite;
}

.loader:before, .loader:after {
 content: "";
 width: 40px;
 left: 50%;
 height: 35px;
 position: absolute;
 top: 0;
 -webkit-transform: translatex(-50%);
 -ms-transform: translatex(-50%);
 transform: translatex(-50%);
 background: rgba(255, 255, 255, 0.4);
 border-radius: 0 0 20px 20px;
 background-size: 100% auto;
 background-repeat: no-repeat;
 background-position: 0 0px;
 -webkit-animation: lqt 5s linear infinite;
 animation: lqt 5s linear infinite;
}

.loader:after {
 top: auto;
 bottom: 0;
 border-radius: 20px 20px 0 0;
 -webkit-animation: lqb 5s linear infinite;
 animation: lqb 5s linear infinite;
}

@-webkit-keyframes lqt {
 0%, 100% {
 background-image: -webkit-linear-gradient(var(--theme-color) 40px, transparent 0);
 background-image: linear-gradient(var(--theme-color) 40px, transparent 0);
 background-position: 0% 0px;
 }
 50% {
 background-image: -webkit-linear-gradient(var(--theme-color) 40px, transparent 0);
 background-image: linear-gradient(var(--theme-color) 40px, transparent 0);
 background-position: 0% 40px;
 }
 50.1% {
 background-image: -webkit-linear-gradient(var(--theme-color) 40px, transparent 0);
 background-image: linear-gradient(var(--theme-color) 40px, transparent 0);
 background-position: 0% -40px;
 }
}

@keyframes lqt {
 0%, 100% {
 background-image: -webkit-linear-gradient(var(--theme-color) 40px, transparent 0);
 background-image: linear-gradient(var(--theme-color) 40px, transparent 0);
 background-position: 0% 0px;
 }
 50% {
 background-image: -webkit-linear-gradient(var(--theme-color) 40px, transparent 0);
 background-image: linear-gradient(var(--theme-color) 40px, transparent 0);
 background-position: 0% 40px;
 }
 50.1% {
 background-image: -webkit-linear-gradient(var(--theme-color) 40px, transparent 0);
 background-image: linear-gradient(var(--theme-color) 40px, transparent 0);
 background-position: 0% -40px;
 }
}

@-webkit-keyframes lqb {
 0% {
 background-image: -webkit-linear-gradient(var(--theme-color) 40px, transparent 0);
 background-image: linear-gradient(var(--theme-color) 40px, transparent 0);
 background-position: 0 40px;
 }
 100% {
 background-image: -webkit-linear-gradient(var(--theme-color) 40px, transparent 0);
 background-image: linear-gradient(var(--theme-color) 40px, transparent 0);
 background-position: 0 -40px;
 }
}

@keyframes lqb {
 0% {
 background-image: -webkit-linear-gradient(var(--theme-color) 40px, transparent 0);
 background-image: linear-gradient(var(--theme-color) 40px, transparent 0);
 background-position: 0 40px;
 }
 100% {
 background-image: -webkit-linear-gradient(var(--theme-color) 40px, transparent 0);
 background-image: linear-gradient(var(--theme-color) 40px, transparent 0);
 background-position: 0 -40px;
 }
}

@-webkit-keyframes hourglass {
 0%, 49% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
 background-position: 50% 36px;
 }
 51%, 98% {
 -webkit-transform: rotate(180deg);
 transform: rotate(180deg);
 background-position: 50% 4px;
 }
 100% {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
 background-position: 50% 36px;
 }
}

@keyframes hourglass {
 0%, 49% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
 background-position: 50% 36px;
 }
 51%, 98% {
 -webkit-transform: rotate(180deg);
 transform: rotate(180deg);
 background-position: 50% 4px;
 }
 100% {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
 background-position: 50% 36px;
 }
}
</style>

BootstrapTema

CSS Прелоадер - Песочные часы

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0