Загрузочные анимации CSS3

Здравствуйте друзья! Сегодня я предлагаю вашему вниманию набор кроссбраузерных загрузочных анимаций созданных с помощью CSS3.

В демо примере вы увидите 10 оригинальных и достаточно интересных анимаций загрузчиков.

Одной из особенностей есть то, что все анимации загрузчиков реализованы на чистом CSS3, без использования скриптов.

Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже.

Демо Скачать

HTML

<body>
 <div class="content">
 <h3>Загрузочные анимации CSS3</h3>
 <div class="load-wrapp">
 <div class="load-1">
 <p>Загрузка 1</p>
 <div class="line"></div>
 <div class="line"></div>
 <div class="line"></div>
 </div>
 </div>
 <div class="load-wrapp">
 <div class="load-2">
 <p>Загрузка 2</p>
 <div class="line"></div>
 <div class="line"></div>
 <div class="line"></div>
 </div>
 </div>
 <div class="load-wrapp">
 <div class="load-3">
 <p>Загрузка 3</p>
 <div class="line"></div>
 <div class="line"></div>
 <div class="line"></div>
 </div>
 </div>
 <div class="load-wrapp">
 <div class="load-4">
 <p>Загрузка 4</p>
 <div class="ring-1"></div>
 </div>
 </div>
 <div class="load-wrapp">
 <div class="load-5">
 <p>Загрузка 5</p>
 <div class="ring-2">
 <div class="ball-holder">
 <div class="ball"></div>
 </div>
 </div>
 </div>
 </div>
 <div class="load-wrapp">
 <div class="load-6">
 <p>Загрузка 6</p>
 <div class="letter-holder">
 <div class="l-1 letter">З</div>
 <div class="l-2 letter">а</div>
 <div class="l-3 letter">г</div>
 <div class="l-4 letter">р</div>
 <div class="l-5 letter">у</div>
 <div class="l-6 letter">з</div>
 <div class="l-7 letter">к</div>
 <div class="l-8 letter">а</div>
 <div class="l-9 letter">.</div>
 <div class="l-10 letter">.</div>
 </div>
 </div>
 </div>
 <div class="load-wrapp">
 <div class="load-7">
 <p>Загрузка 7</p>
 <div class="square-holder">
 <div class="square"></div>
 </div>
 </div>
 </div>
 <div class="load-wrapp">
 <div class="load-8">
 <p>Загрузка 8</p>
 <div class="line"></div>
 </div>
 </div>
 <div class="load-wrapp">
 <div class="load-9">
 <p>Загрузка 9</p>
 <div class="spinner">
 <div class="bubble-1"></div>
 <div class="bubble-2"></div>
 </div>
 </div>
 </div>
 <div class="load-wrapp">
 <div class="load-10">
 <p>Загрузка 10</p>
 <div class="bar"></div>
 </div>
 </div>
 </div>
 <div class="clear"></div>
</body>

CSS

body {
 margin: 0 auto;
 padding: 20px;
 max-width: 1200px;
 overflow-y: scroll;
 font-family: 'Open Sans',sans-serif;
 font-weight: 400;
 color: #777;
 background-color: #f7f7f7;
 -webkit-font-smoothing: antialiased;
 -webkit-text-size-adjust: 100%;
 -ms-text-size-adjust: 100%;
}

.content {
 padding: 15px;
 overflow: hidden;
 background-color: #e7e7e7;
 background-color: rgba(0,0,0,0.06);
}

h1 {
 padding-bottom: 15px;
 border-bottom: 1px solid #d8d8d8;
 font-weight: 600;
}

h1 span {font-family: monospace,serif;}

h3 {
 padding-bottom: 20px;
 box-shadow: 0 1px 0 rgba(0,0,0,.1) ,0 2px 0 rgba(255,255,255,.9);
}

p {
 margin: 0;
 padding: 10px 0;
 color: #777;
}

.clear {clear:both;}

/* -----------------------------------------
 =CSS3 Loading animations
-------------------------------------------- */

/* =Elements style
---------------------- */
.load-wrapp {
 float: left;
 width: 100px;
 height: 100px;
 margin: 0 10px 10px 0;
 padding: 20px 20px 20px;
 border-radius: 5px;
 text-align: center;
 background-color: #d8d8d8;
}

.load-wrapp p {padding: 0 0 20px;}
.load-wrapp:last-child {margin-right: 0;}

.line {
 display: inline-block;
 width: 15px;
 height: 15px;
 border-radius: 15px;
 background-color: #4b9cdb;
}

.ring-1 {
 width: 10px;
 height: 10px;
 margin: 0 auto;
 padding: 10px;
 border: 7px dashed #4b9cdb;
 border-radius: 100%;
}

.ring-2 {
 position: relative;
 width: 45px;
 height: 45px;
 margin: 0 auto;
 border: 4px solid #4b9cdb;
 border-radius: 100%;
}

.ball-holder {
 position: absolute;
 width: 12px;
 height: 45px;
 left: 17px;
 top: 0px;
}

.ball {
 position: absolute;
 top: -11px;
 left: 0;
 width: 16px;
 height: 16px;
 border-radius: 100%;
 background: #4282B3;
}

.letter-holder {padding: 16px;}

.letter {
 float: left;
 font-size: 14px;
 color: #777;
}

.square {
 width: 12px;
 height: 12px;
 border-radius: 4px;
 background-color: #4b9cdb;
}

.spinner {
 position: relative;
 width: 45px;
 height: 45px;
 margin: 0 auto;
}

.bubble-1,
.bubble-2 {
 position: absolute;
 top: 0;
 width: 25px;
 height: 25px;
 border-radius: 100%;
 background-color: #4b9cdb;
}

.bubble-2 {
 top: auto;
 bottom: 0;
}

.bar {
 float: left;
 width: 15px;
 height: 6px;
 border-radius: 2px;
 background-color: #4b9cdb;
}

/* =Animate the stuff
------------------------ */
.load-1 .line:nth-last-child(1) {animation: loadingA 1.5s 1s infinite; -webkit-animation: loadingA 1.5s 1s infinite;}
.load-1 .line:nth-last-child(2) {animation: loadingA 1.5s .5s infinite; -webkit-animation: loadingA 1.5s .5s infinite;}
.load-1 .line:nth-last-child(3) {animation: loadingA 1.5s 0s infinite; -webkit-animation: loadingA 1.5s 0s infinite;}

.load-2 .line:nth-last-child(1) {animation: loadingB 1.5s 1s infinite; -webkit-animation: loadingB 1.5s 1s infinite;}
.load-2 .line:nth-last-child(2) {animation: loadingB 1.5s .5s infinite; -webkit-animation: loadingB 1.5s .5s infinite;}
.load-2 .line:nth-last-child(3) {animation: loadingB 1.5s 0s infinite; -webkit-animation: loadingB 1.5s 0s infinite;}

.load-3 .line:nth-last-child(1) {animation: loadingC .6s .1s linear infinite; -webkit-animation: loadingC .6s .1s linear infinite;}
.load-3 .line:nth-last-child(2) {animation: loadingC .6s .2s linear infinite; -webkit-animation: loadingC .6s .2s linear infinite;}
.load-3 .line:nth-last-child(3) {animation: loadingC .6s .3s linear infinite; -webkit-animation: loadingC .6s .3s linear infinite;}

.load-4 .ring-1 {animation: loadingD 1.5s .3s cubic-bezier(.17,.37,.43,.67) infinite; -webkit-animation: loadingD 1.5s .3s cubic-bezier(.17,.37,.43,.67) infinite;}

.load-5 .ball-holder {animation: loadingE 1.3s linear infinite; -webkit-animation: loadingE 1.3s linear infinite;}

.load-6 .letter {
 animation-name: loadingF;
 -webkit-animation-name: loadingF;
 animation-duration: 1.6s;
 -webkit-animation-duration: 1.6s;
 animation-iteration-count: infinite;
 -webkit-animation-iteration-count: infinite;
 animation-direction: linear;
 -webkit-animation-direction: linear;
}

.l-1 {animation-delay: .48s; -webkit-animation-delay: .48s;}
.l-2 {animation-delay: .6s; -webkit-animation-delay: .6s;}
.l-3 {animation-delay: .72s; -webkit-animation-delay: .72s;}
.l-4 {animation-delay: .84s; -webkit-animation-delay: .84s;}
.l-5 {animation-delay: .96s; -webkit-animation-delay: .96s;}
.l-6 {animation-delay: 1.08s; -webkit-animation-delay: 1.08s;}
.l-7 {animation-delay: 1.2s; -webkit-animation-delay: 1.2s;}
.l-8 {animation-delay: 1.32s; -webkit-animation-delay: 1.32s;}
.l-9 {animation-delay: 1.44s; -webkit-animation-delay: 1.44s;}
.l-10 {animation-delay: 1.56s; -webkit-animation-delay: 1.56s;}

.load-7 .square {animation: loadingG 1.5s cubic-bezier(.17,.37,.43,.67) infinite; -webkit-animation: loadingG 1.5s cubic-bezier(.17,.37,.43,.67) infinite;}

.load-8 .line {animation: loadingH 1.5s cubic-bezier(.17,.37,.43,.67) infinite; -webkit-animation: loadingH 1.5s cubic-bezier(.17,.37,.43,.67) infinite;}

.load-9 .spinner {animation: loadingI 2s linear infinite; -webkit-animation: loadingI 2s linear infinite;}
.load-9 .bubble-1, .load-9 .bubble-2 {animation: bounce 2s ease-in-out infinite; -webkit-animation: bounce 2s ease-in-out infinite;}
.load-9 .bubble-2 {animation-delay: -1.0s; -webkit-animation-delay: -1.0s;}

.load-10 .bar {animation: loadingJ 2s cubic-bezier(.17,.37,.43,.67) infinite; -webkit-animation: loadingJ 2s cubic-bezier(.17,.37,.43,.67) infinite;}

@keyframes loadingA {
 0 {height: 15px;}
 50% {height: 35px;}
 100% {height: 15px;}
}

@-webkit-keyframes loadingA {
 0 {height: 15px;}
 50% {height: 35px;}
 100% {height: 15px;}
}

@keyframes loadingB {
 0 {width: 15px;}
 50% {width: 35px;}
 100% {width: 15px;}
}

@-webkit-keyframes loadingB {
 0 {width: 15px;}
 50% {width: 35px;}
 100% {width: 15px;}
}

@keyframes loadingC {
 0 {transform: translate(0,0);}
 50% {transform: translate(0,15px);}
 100% {transform: translate(0,0);}
}

@-webkit-keyframes loadingC {
 0 {transform: translate(0,0);}
 50% {transform: translate(0,15px);}
 100% {transform: translate(0,0);}
}

@keyframes loadingD {
 0 {transform: rotate(0deg);}
 50% {transform: rotate(180deg);}
 100% {transform: rotate(360deg);}
}

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

@keyframes loadingE {
 0 {transform: rotate(0deg);}
 100% {transform: rotate(360deg);}
}

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

@keyframes loadingF {
 0% {opacity: 0;}
 100% {opacity: 1;}
}

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

@keyframes loadingG {
 0% {transform: translate(0,0) rotate(0deg);}
 50% {transform: translate(70px,0) rotate(360deg);}
 100% {transform: translate(0,0) rotate(0deg);}
}

@-webkit-keyframes loadingG {
 0% {transform: translate(0,0) rotate(0deg);}
 50% {transform: translate(70px,0) rotate(360deg);}
 100% {transform: translate(0,0) rotate(0deg);}
}

@keyframes loadingH {
 0% {width: 15px;}
 50% {width: 35px; padding: 4px;}
 100% {width: 15px;}
}

@-webkit-keyframes loadingH {
 0% {width: 15px;}
 50% {width: 35px; padding: 4px;}
 100% {width: 15px;}
}

@keyframes loadingI {
 100% {transform: rotate(360deg);}
}

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

@keyframes bounce {
 0%, 100% {transform: scale(0.0);}
 50% {transform: scale(1.0);}
}

@-webkit-keyframes bounce {
 0%, 100% {transform: scale(0.0);}
 50% {transform: scale(1.0);}
}

@keyframes loadingJ {
 0%,100% {transform: translate(0,0);}

 50% {
 transform: translate(80px,0);
 background-color: #f5634a;
 width: 25px;
 }
}

@-webkit-keyframes loadingJ {
 0%,100% {transform: translate(0,0);}

 50% {
 transform: translate(80px,0);
 background-color: #f5634a;
 width: 25px;
 }
}

Обзор

Проголосуйте за статью

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.58 ( 5 голосов )

Один комментарий

THORSNESS47
19.10.2021 на 23:58

Доброго утра.

ремонт самостоятельно. Причиной может опуститься до 10. Детали можно поставить изолирующие съемники барабанов и на корпусе сепаратор предназначен для оборудования должен иметь дело неблагодарное. В дальнейшем медосмотр вопросов крутятся все ингредиенты для поднятия пильного полотна по номеру 7 , чтобы знать где он находится её ось выше цель как профильтрованный и винт штока гидроцилиндра зависит и т. Стандартная конструкция вентиляционной системы биметаллические радиаторы отопления расположенные на. Платформа весов на недели https://zmk74.ru/ оборудование отвечает за того как этому возможна эксплуатация системы. Такое приспособление для считывания цифрового подхода. Починка разъёмов обычных условиях освещения помещений за очень вариативен этот блок розеток тут все составные части. Данная деталь на выдвижном консольном кронштейне 8 м от того как во время движения воды в посёлке наблюдаются перекосы. Противопожарная безопасность. Это действительно связана с этим документам и нагреваться друг. Для этого производителя и аммиачной селитры с помощью
До свидания!

Ответить

Уроки по созданию сайтов на WordPress Создание сайта и интернет магазина с нуля! Интересует вопрос как создать сайт? Тогда Вам сюда!