Авто & мото - CSS Прелоадер / Элементы / Сниппеты Bootstrap

Версия: v1.0.0

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

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

Bootstrap: 3, 4, 5

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

Язык: Русский

Вес файла: 1.2 Kb

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

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

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

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

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

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

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

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

Рейтинг: 5.0 / 5 - 1 голосов

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

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

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

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

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

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

Добавлено: 2024-03-28 в 20:57

Метка: 1711648662

⇄ ⇅

.preloader-body {
 width: 40px;
 height: 40px;
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
}

.loader {
 width: 150px;
 height: 150px;
 border: 1px #fff solid;
 position: absolute;
 left: 50%;
 top: 50%;
 margin: -75px 0 0 -75px;
 border-radius: 50%;
}

.loader.custom-loader {
 border: medium none;
 left: 0;
 margin: 0 auto;
 right: 0;
}

.loader .loading {
 font-size: 10px;
 position: absolute;
 width: 100%;
 text-align: center;
 line-height: 14px;
 font-family: #0A0A0A;
 left: 0;
 top: 50%;
 margin-top: 20px;
 color: #fff;
 font-weight: bold;
 text-transform: uppercase;
}

.loader .line {
 width: 10px;
 height: 2px;
 background: #fff;
 position: absolute;
}

.loader .line:nth-child(1) {
 left: 16px;
 top: 50%;
 margin-top: -1px;
}

.loader .line:nth-child(2) {
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
 left: 33px;
 top: 33px;
}

.loader .line:nth-child(3) {
 top: 16px;
 left: 50%;
 width: 2px;
 height: 10px;
}

.loader .line:nth-child(4) {
 -webkit-transform: rotate(135deg);
 -ms-transform: rotate(135deg);
 transform: rotate(135deg);
 right: 33px;
 top: 33px;
}

.loader .line:nth-child(5) {
 right: 16px;
 top: 50%;
 margin-top: -1px;
}

.loader .line:nth-child(6) {
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
 right: 33px;
 bottom: 33px;
 background: #EB3300;
}

.loader-circle-one {
 width: 138px;
 height: 138px;
 left: 5px;
 top: 5px;
 border: 1px #fff solid;
 border-radius: 50%;
 position: absolute;
 border-right-color: transparent;
 -webkit-animation: spin 3s linear infinite;
 animation: spin 3s linear infinite;
}

.loader-circle-two {
 width: 126px;
 height: 126px;
 left: 5px;
 top: 5px;
 border: 1px transparent solid;
 border-radius: 50%;
 position: absolute;
 border-right-color: #EB3300;
 -webkit-animation: spin 5s linear infinite;
 animation: spin 5s linear infinite;
}

.loader .lines {
 position: absolute;
 width: 3px;
 height: 2px;
 background: #fff;
}

.loader .lines:nth-child(7) {
 -webkit-transform: rotate(22.5deg);
 -ms-transform: rotate(22.5deg);
 transform: rotate(22.5deg);
 left: 21px;
 top: 50px;
}

.loader .lines:nth-child(8) {
 -webkit-transform: rotate(67.5deg);
 -ms-transform: rotate(67.5deg);
 transform: rotate(67.5deg);
 left: 50px;
 top: 21px;
}

.loader .lines:nth-child(9) {
 -webkit-transform: rotate(112.5deg);
 -ms-transform: rotate(112.5deg);
 transform: rotate(112.5deg);
 right: 50px;
 top: 21px;
}

.loader .lines:nth-child(10) {
 -webkit-transform: rotate(157.5deg);
 -ms-transform: rotate(157.5deg);
 transform: rotate(157.5deg);
 right: 21px;
 top: 50px;
}

.loader .lines:nth-child(11) {
 -webkit-transform: rotate(22.5deg);
 -ms-transform: rotate(22.5deg);
 transform: rotate(22.5deg);
 right: 20px;
 bottom: 49px;
 background: #EB3300;
}

.loader .needle {
 width: 14px;
 height: 14px;
 border-radius: 50%;
 border: 1px #fff solid;
 position: absolute;
 left: 50%;
 top: 50%;
 margin: -8px 0 0 -8px;
 z-index: 1;
 -webkit-animation: pegIt 3s infinite ease-in-out;
 animation: pegIt 3s infinite ease-in-out;
}

.loader .needle:before {
 content: "";
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 3.5px 50px 3.5px 0;
 border-color: transparent #EB3300 transparent transparent;
 position: absolute;
 right: 50%;
 top: 50%;
 margin: -3.5px 0 0 0;
 border-radius: 0 50% 50% 0;
}

@keyframes pegIt {
 0% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
 }
 16% {
 -webkit-transform: rotate(75deg);
 transform: rotate(75deg);
 }
 25% {
 -webkit-transform: rotate(55deg);
 transform: rotate(55deg);
 }
 30% {
 -webkit-transform: rotate(90deg);
 transform: rotate(90deg);
 }
 36% {
 -webkit-transform: rotate(170deg);
 transform: rotate(170deg);
 }
 42% {
 -webkit-transform: rotate(150deg);
 transform: rotate(150deg);
 }
 50% {
 -webkit-transform: rotate(227deg);
 transform: rotate(227deg);
 }
 100% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
 }
}

@-webkit-keyframes pegIt {
 0% {
 -webkit-transform: rotate(0deg);
 }
 16% {
 -webkit-transform: rotate(75deg);
 }
 25% {
 -webkit-transform: rotate(55deg);
 }
 30% {
 -webkit-transform: rotate(90deg);
 }
 36% {
 -webkit-transform: rotate(170deg);
 }
 42% {
 -webkit-transform: rotate(150deg);
 }
 50% {
 -webkit-transform: rotate(227deg);
 }
 100% {
 -webkit-transform: rotate(0deg);
 }
}

@-webkit-keyframes spin {
 0% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
 }
 100% {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
 }
}

@keyframes spin {
 0% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
 }
 100% {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
 }
}
</style>

BootstrapTema

Авто & мото - CSS Прелоадер

Скриншот

Подробнее

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

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

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