Прелоадер - Кастрюля / Элементы / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0.0

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

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

Bootstrap: 3, 4, 5

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

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

Вес файла: 1.6 Kb

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

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

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

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

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

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

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

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

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

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

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

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

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

Теги: элемент, прелоадер, Snippet, лоадер, сниппет, element, preloader, Loader

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

Добавлено: 2022-11-29 в 10:14

Метка: 1669706043

⇄ ⇅

<style>
.preloader {
 width: 100%;
 height: 100vh;
 position: fixed;
 top: 0;
 bottom: 0;
 background: #34bf49;
 z-index: 9999;
 text-align: center;
 overflow: hidden;
 display: -webkit-box; 
 display: -moz-box; 
 display: -ms-flexbox; 
 display: -webkit-flex;
 display: flex;
}
.preloader svg {
 width: 80px;
 height: 80px;
 position: relative;
 display: -webkit-box; 
 display: -moz-box; 
 display: -ms-flexbox; 
 display: -webkit-flex;
 display: flex;
 -webkit-box-align: center;
 -moz-box-align: center;
 -ms-flex-align: center;
 -webkit-align-items: center;
 -webkit-box-pack: center;
 -moz-box-pack: center;
 -ms-flex-pack: center;
 -webkit-justify-content: center;
 justify-content: center;
 align-items: center;
 left: 0;
 right: 0;
 margin: auto;
 bottom: 0;
 filter: drop-shadow(2px 4px 6px black);
 fill: #fff;
}
svg #cap {
 transform-origin: center;
 animation: capAnimation 1s ease-in-out infinite
}
@keyframes capAnimation {
 0% {
 transform: rotate(5deg);
 }
 50% {
 transform: rotate(-5deg);
 }
 100% {
 transform: rotate(5deg);
 }
}
@keyframes rotate {
 from {
 transform: rotate(0deg);
 }
 to {
 transform: rotate(10deg);
 }
}
</style>

<div class="preloader">
 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 35.235 35.235" xml:space="preserve">
 <g>
 <g id="b103_soup">
 <path id="cap" d="M26.776,12.687H19.25c0.68,0,1.233-0.553,1.233-1.234s-0.554-1.23-1.233-1.23h-3.078c-0.68,0-1.232,0.549-1.232,1.23
 s0.553,1.234,1.232,1.234H8.645c-2.094,0-3.828,1.877-4.165,3.875h26.464C30.605,14.563,28.871,12.687,26.776,12.687z"></path>
 <path id="body" d="M31.005,18.677v-0.352H4.479H4.417H0v1.762h4.417v10.918c0,2.338,1.894,4.229,4.228,4.229h18.132
 c2.336,0,4.229-1.891,4.229-4.229V20.439h4.229v-1.762H31.005z"></path>
 <path class="smell" id="elem-1" d="M11.24,4.235c0.123,0.162,0.254,0.318,0.391,0.465l0.341,0.342c0.216,0.217,0.417,0.434,0.577,0.629
 c0.08,0.098,0.146,0.191,0.195,0.268c0.047,0.076,0.09,0.135,0.1,0.223c0.012,0.094-0.037,0.221-0.133,0.348
 c-0.096,0.125-0.23,0.246-0.387,0.367c0.186,0.072,0.389,0.096,0.605,0.07c0.215-0.025,0.451-0.121,0.648-0.326
 c0.195-0.205,0.304-0.508,0.321-0.775c0.019-0.27-0.022-0.514-0.083-0.734c-0.123-0.438-0.327-0.793-0.545-1.119
 c-0.109-0.16-0.244-0.322-0.34-0.447c-0.096-0.113-0.185-0.229-0.266-0.344c-0.33-0.459-0.561-0.873-0.647-1.359
 c-0.09-0.492,0.01-1.121,0.307-1.842c-0.771,0.162-1.457,0.807-1.681,1.709c-0.111,0.445-0.087,0.934,0.032,1.363
 C10.793,3.511,11.002,3.897,11.24,4.235z"></path>
 <path class="smell" id="elem-2" d="M15.809,4.235C15.932,4.397,16.064,4.553,16.2,4.7l0.34,0.342c0.216,0.217,0.416,0.434,0.58,0.629
 c0.077,0.098,0.143,0.191,0.193,0.268c0.049,0.076,0.09,0.135,0.098,0.223c0.013,0.094-0.035,0.221-0.131,0.348
 c-0.095,0.125-0.23,0.246-0.389,0.367c0.188,0.072,0.392,0.096,0.607,0.07c0.214-0.025,0.453-0.121,0.648-0.326
 c0.197-0.205,0.304-0.508,0.322-0.775c0.019-0.27-0.021-0.514-0.082-0.734c-0.125-0.438-0.33-0.793-0.548-1.119
 c-0.107-0.16-0.243-0.322-0.339-0.447c-0.094-0.113-0.185-0.229-0.264-0.344c-0.331-0.459-0.563-0.873-0.649-1.359
 c-0.09-0.49,0.008-1.119,0.304-1.84c-0.77,0.162-1.455,0.807-1.678,1.709c-0.111,0.445-0.088,0.934,0.031,1.363
 C15.363,3.511,15.568,3.897,15.809,4.235z"></path>
 <path class="smell" id="elem-3" d="M19.972,4.235c0.122,0.162,0.253,0.318,0.39,0.465l0.341,0.342c0.216,0.217,0.415,0.434,0.577,0.629
 c0.08,0.098,0.146,0.191,0.195,0.268c0.047,0.076,0.088,0.135,0.1,0.223c0.013,0.094-0.037,0.221-0.133,0.348
 c-0.095,0.125-0.23,0.246-0.389,0.367c0.188,0.072,0.392,0.096,0.605,0.07c0.215-0.025,0.453-0.121,0.65-0.326
 c0.195-0.205,0.303-0.508,0.32-0.775c0.02-0.27-0.021-0.514-0.082-0.734c-0.123-0.438-0.326-0.793-0.545-1.119
 c-0.109-0.16-0.244-0.322-0.34-0.447c-0.096-0.113-0.186-0.229-0.266-0.344c-0.33-0.459-0.561-0.873-0.646-1.359
 c-0.091-0.492,0.009-1.121,0.304-1.842c-0.77,0.162-1.457,0.807-1.679,1.709c-0.11,0.445-0.087,0.934,0.032,1.363
 C19.524,3.511,19.731,3.897,19.972,4.235z"></path>
 </g>
 <g id="Capa_1_128_"></g>
 </g>
 </svg>
</div>