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

Версия: v1.0.0

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

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

Bootstrap: 3, 4, 5

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

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

Вес файла: 0.9 Kb

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

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

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

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

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

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

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

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

Рейтинг: 3.8 / 5 - 4 голосов

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

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

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

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

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

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

Добавлено: 2024-03-30 в 08:53

Метка: 1711778013

⇄ ⇅

.preloader-body img {
 display: block;
 margin: 0 auto 10px auto;
}

.loader {
 position: relative;
 width: 120px;
 height: 55px;
 background-repeat: no-repeat;
 background-image: -webkit-radial-gradient(circle 2.5px, #ff3d00 100%, transparent 0), -webkit-linear-gradient(#525252 90px, transparent 0), -webkit-linear-gradient(#ececec 120px, transparent 0), -webkit-linear-gradient(left, #eee 10%, #333 10%, #333 90%, #eee 90%);
 background-image: radial-gradient(circle 2.5px, #ff3d00 100%, transparent 0), linear-gradient(#525252 90px, transparent 0), linear-gradient(#ececec 120px, transparent 0), linear-gradient(to right, #eee 10%, #333 10%, #333 90%, #eee 90%);
 background-size: 5px 5px, 90px 10px, 120px 45px , 100px 15px;
 background-position: 110px 15px,center bottom , center bottom , center 0;
}

.loader:before {
 content: "";
 width: 70px;
 background-color: #fff;
 box-shadow: 0 0 10px #0003;
 position: absolute;
 left: 50%;
 -webkit-transform: translatex(-50%);
 -ms-transform: translatex(-50%);
 transform: translatex(-50%);
 bottom: calc(100% - 10px);
 -webkit-animation: printerPaper 4s ease-in infinite;
 animation: printerPaper 4s ease-in infinite;
}

.loader:after {
 content: "";
 width: 70px;
 height: 80px;
 background-color: #fff;
 background-image: -webkit-linear-gradient(top, #FFF 50%, #ff3d00 51%), -webkit-linear-gradient(top, #bbb 50%, #0000 51%);
 background-image: linear-gradient(to bottom, #FFF 50%, #ff3d00 51%), linear-gradient(to bottom, #bbb 50%, #0000 51%);
 background-size: 60px 20px, 60px 10px;
 background-repeat: no-repeat, repeat-y;
 background-position: center 55px , center 0;
 position: absolute;
 left: 50%;
 -webkit-transform: translatex(-50%) rotate(180deg);
 -ms-transform: translatex(-50%) rotate(180deg);
 transform: translatex(-50%) rotate(180deg);
 box-shadow: 0 10px #fff inset;
 top: calc(100% - 8px);
 -webkit-animation: PrintedPaper 4s ease-in infinite;
 animation: PrintedPaper 4s ease-in infinite;
}

@-webkit-keyframes printerPaper {
 0%, 25% {
 height: 50px;
 }
 75%, 100% {
 height: 0;
 }
}

@keyframes printerPaper {
 0%, 25% {
 height: 50px;
 }
 75%, 100% {
 height: 0;
 }
}

@-webkit-keyframes PrintedPaper {
 0%, 30% {
 height: 0px;
 top: calc(100% - 8px);
 }
 80% {
 height: 80px;
 top: calc(100% - 8px);
 opacity: 1;
 }
 100% {
 height: 80px;
 top: calc(100% + 10px);
 opacity: 0;
 }
}

@keyframes PrintedPaper {
 0%, 30% {
 height: 0px;
 top: calc(100% - 8px);
 }
 80% {
 height: 80px;
 top: calc(100% - 8px);
 opacity: 1;
 }
 100% {
 height: 80px;
 top: calc(100% + 10px);
 opacity: 0;
 }
}
</style>

BootstrapTema

CSS Прелоадер - Принтер

Скриншот

Подробнее

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

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

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