Сегодня Вы научитесь делать прелоадер на страницу. Прелоадер это анимация, которая отображается пользователю, чтобы он не скучал, пока грузится сайт. Рекомендую посмотреть видео-урок «Хауди Хо» о том как сделать 2 типа прелоадера:
- Который просто анимируется до тех пор, пока страница не загрузится;
- Который отображает процент загруженности.
Я сделал интересную подборку 20-и готовых решений, которые можно использовать в своем проекте, просто скопировав код:
1 — Анимированный прелоадер «Вращающийся Кот»
HTML разметка:
<div class="box">
<div class="cat">
<div class="cat__body"></div>
<div class="cat__body"></div>
<div class="cat__tail"></div>
<div class="cat__head"></div>
</div>
</div>
CSS оформление котика:
.cat{position:relative;width:100%;max-width:20em;overflow:hidden;background-color:#e6dcdc}
.cat::before{content:"";display:block;padding-bottom:100%}
.cat:hover > *{-webkit-animation-play-state:paused;animation-play-state:paused}
.cat:active > *{-webkit-animation-play-state:running;animation-play-state:running}
.cat__head,.cat__tail,.cat__body{position:absolute;top:0;left:0;right:0;bottom:0;-webkit-animation:rotating 2.79s cubic-bezier(0.65,0.54,0.12,0.93) infinite;animation:rotating 2.79s cubic-bezier(0.65,0.54,0.12,0.93) infinite}
.cat__head::before,.cat__tail::before,.cat__body::before{content:"";position:absolute;width:50%;height:50%;background-size:200%;background-repeat:no-repeat;background-image:url(https://images.weserv.nl/?url=i.imgur.com/M1raXX3.png&il;)}
.cat__head::before{top:0;right:0;background-position:100% 0;-webkit-transform-origin:0 100%;transform-origin:0 100%;-webkit-transform:rotate(90deg);transform:rotate(90deg)}
.cat__tail{-webkit-animation-delay:.2s;animation-delay:.2s}
.cat__tail::before{left:0;bottom:0;background-position:0 100%;-webkit-transform-origin:100% 0;transform-origin:100% 0;-webkit-transform:rotate(-30deg);transform:rotate(-30deg)}
.cat__body{-webkit-animation-delay:.1s;animation-delay:.1s}
.cat__body:nth-of-type(2){-webkit-animation-delay:.2s;animation-delay:.2s}
.cat__body::before{right:0;bottom:0;background-position:100% 100%;-webkit-transform-origin:0 0;transform-origin:0 0}
@-webkit-keyframes rotating {
from{-webkit-transform:rotate(720deg);transform:rotate(720deg)}
to{-webkit-transform:none;transform:none}
}
@keyframes rotating {
from{-webkit-transform:rotate(720deg);transform:rotate(720deg)}
to{-webkit-transform:none;transform:none}
}
.box{display:flex;flex:1;flex-direction:column;justify-content:flex-start;justify-content:center;align-items:center;background-color:#e6dcdc}
*,::before,::after{margin:0;padding:0;box-sizing:border-box}
html{height:100%}
body{display:flex;flex-direction:column;min-height:100%;margin:0;line-height:1.4}
.intro{width:90%;max-width:36rem;padding-bottom:1rem;margin:0 auto 1em;padding-top:.5em;font-size:calc(1rem + 2vmin);text-transform:capitalize;border-bottom:1px dashed rgba(0,0,0,0.3);text-align:center}
.intro small{display:block;opacity:.5;font-style:italic;text-transform:none}
.info{margin:0;padding:1em;font-size:.9em;font-style:italic;font-family:serif;text-align:right;opacity:.5}
.info a{color:inherit}
2 — Анимированный прелоадер «Ждущий посетитель»
HTML разметка:
<div class="circ">
<div class="load">Loading . . . </div>
<div class="hands"></div>
<div class="body"></div>
<div class="head">
<div class="eye"></div>
</div>
</div>
CSS:
@import "https://fonts.googleapis.com/css?family=Julius+Sans+One";
html{width:100%;height:100%}
body{margin:0;padding:0;background-color:#111}
.eye{width:20px;height:8px;background-color:#f0dcdc;border-radius:0 0 20px 20px;position:relative;left:10px;top:40px;box-shadow:40px 0 0 0 #f0dcdc}
.head{-webkit-backface-visibility:hidden;position:relative;margin:-250px auto;width:80px;height:80px;background-color:#111;border-radius:50px;box-shadow:inset -4px 2px 0 0 #f0dcdc;-webkit-animation:headAnim 1.5s infinite alternate;-webkit-animation-timing-function:ease-out}
.body{position:relative;margin:90px auto;width:140px;height:120px;background-color:#111;border-radius:50px/25px;box-shadow:inset -5px 2px 0 0 #f0dcdc;-webkit-animation:bodyAnim 1.5s infinite alternate;-webkit-animation-timing-function:ease-out}
@-webkit-keyframes headAnim {
0%{top:0}
50%{top:10px}
100%{top:0}
}
@-webkit-keyframes bodyAnim {
0%{top:-5px}
50%{top:10px}
100%{top:-5px}
}
.circ{-webkit-backface-visibility:hidden;margin:60px auto;width:180px;height:180px;background-color:#111;border-radius:0 0 50px 50px;position:relative;z-index:-1;left:0;top:20%;overflow:hidden}
.hands{-webkit-backface-visibility:hidden;margin-top:140px;width:120px;height:120px;position:absolute;background-color:#111;border-radius:20px;box-shadow:-1px -4px 0 0 #f0dcdc;-webkit-transform:rotate(45deg);top:75%;left:16%;z-index:1;-webkit-animation:bodyAnim 1.5s infinite alternate;-webkit-animation-timing-function:ease-out}
.load{position:absolute;width:7ch;height:32px;text-align:left;line-height:32px;margin:-10px auto;-webkit-font-smoothing:antialiased;font-family:'Julius Sans One',sans-serif;font-size:28px;font-weight:400;color:#f0dcdc;left:2%;top:5%;-webkit-animation:fontAnim 3.75s infinite;-webkit-animation-timing-function:ease-out;word-wrap:break-word;display:block;overflow:hidden}
@-webkit-keyframes fontAnim {
0%{width:7ch}
16%{width:8ch}
32%{width:9ch}
48%{width:10ch}
64%{width:11ch}
80%{width:12ch}
100%{width:13ch}
}
3 — Анимированный прелоадер «Радуга»
HTML разметка:
<div class="loader"> <div class="loader-inner"> <div class="loader-line-wrap"> <div class="loader-line"></div> </div> <div class="loader-line-wrap"> <div class="loader-line"></div> </div> <div class="loader-line-wrap"> <div class="loader-line"></div> </div> <div class="loader-line-wrap"> <div class="loader-line"></div> </div> <div class="loader-line-wrap"> <div class="loader-line"></div> </div> </div>
CSS:
.loader{background:#000;background:radial-gradient(#222,#000);bottom:0;left:0;overflow:hidden;position:fixed;right:0;top:0;z-index:99999}
.loader-inner{bottom:0;height:60px;left:0;margin:auto;position:absolute;right:0;top:0;width:100px}
.loader-line-wrap{animation:spin 2000ms cubic-bezier(.175,.885,.32,1.275) infinite;box-sizing:border-box;height:50px;left:0;overflow:hidden;position:absolute;top:0;transform-origin:50% 100%;width:100px}
.loader-line{border:4px solid transparent;border-radius:100%;box-sizing:border-box;height:100px;left:0;margin:0 auto;position:absolute;right:0;top:0;width:100px}
.loader-line-wrap:nth-child(1){animation-delay:-50ms}
.loader-line-wrap:nth-child(2){animation-delay:-100ms}
.loader-line-wrap:nth-child(3){animation-delay:-150ms}
.loader-line-wrap:nth-child(4){animation-delay:-200ms}
.loader-line-wrap:nth-child(5){animation-delay:-250ms}
.loader-line-wrap:nth-child(1) .loader-line{border-color:hsl(0,80%,60%);height:90px;width:90px;top:7px}
.loader-line-wrap:nth-child(2) .loader-line{border-color:hsl(60,80%,60%);height:76px;width:76px;top:14px}
.loader-line-wrap:nth-child(3) .loader-line{border-color:hsl(120,80%,60%);height:62px;width:62px;top:21px}
.loader-line-wrap:nth-child(4) .loader-line{border-color:hsl(180,80%,60%);height:48px;width:48px;top:28px}
.loader-line-wrap:nth-child(5) .loader-line{border-color:hsl(240,80%,60%);height:34px;width:34px;top:35px}
@keyframes spin {
0%,15%{transform:rotate(0)}
100%{transform:rotate(360deg)}
}
4 — Анимированный прелоадер «Рулон туалетной бумаги»
Не представляю для каких целей, но вот:
HTML разметка:
<div class="wrapper"> <div class="toiletroll"> <div class="roll"></div> <div class="papers"> <div class="paper">Loading</div> <div class="paper">Wait</div> <div class="paper">Please</div> </div> </div> </div>
CSS:
@import "https://fonts.googleapis.com/css?family=Roboto:400";
html{height:100%}
body{background:#444;text-align:center}
h2{font:bold 35px Roboto;color:#ccc;text-shadow:2px 2px 2px #000}
.wrapper{display:inline-block;text-align:left;position:relative;width:120px;height:210px;margin:15px 0 0}
.toiletroll{position:relative;width:120px;height:210px}
.toiletroll .roll{position:absolute;width:100px;height:60px;background:#eee;border-radius:15% 0 0 15% / 50% 0 0 50%;box-shadow:inset 0 0 1px rgba(0,0,0,0.5),inset 0 5px 10px rgba(0,0,0,0.3);background-image:linear-gradient(to bottom,#eee 0%,#eee 49%,#bbb 50%,#eee 51%,#eee 100%);background-size:100px 60px;-webkit-animation:move-roll 1.6666666667s linear infinite;animation:move-roll 1.6666666667s linear infinite}
.toiletroll .roll:before{position:absolute;content:"";z-index:1;height:100%;width:20%;right:-10%;border-radius:50%;background-color:#eee;-webkit-animation:anim-rollend .2s linear infinite;animation:anim-rollend .2s linear infinite;background-image:radial-gradient(ellipse at center,#eee 0%,#eee 4%,#bbb 5%,#eee 6%,#eee 9%,#bbb 10%,#eee 11%,#eee 14%,#bbb 15%,#eee 16%,#eee 19%,#bbb 20%,#eee 21%,#eee 24%,#bbb 25%,#eee 26%,#eee 29%,#bbb 30%,#eee 31%,#eee 34%,#bbb 35%,#eee 36%,#eee 39%,#bbb 40%,#eee 41%,#eee 44%,#bbb 45%,#eee 46%,#eee 49%,#bbb 50%,#eee 51%,#eee 54%,#bbb 55%,#eee 56%,#eee 59%,#bbb 60%,#eee 61%,#eee 64%,#bbb 65%,#eee 66%,#eee 69%,#bbb 70%,#eee 71%,#eee 74%,#bbb 75%,#eee 76%,#eee 79%,#bbb 80%,#eee 81%,#eee 84%,#bbb 85%,#eee 86%,#eee 89%,#bbb 90%,#eee 91%,#eee 94%,#bbb 95%,#eee 96%,#eee 100%);background-repeat:no-repeat;box-shadow:inset 0 0 1px rgba(0,0,0,0.5)}
.toiletroll .roll:after{position:absolute;content:"";z-index:1;height:40%;width:8%;top:30%;right:-4%;border-radius:50%;background:#000;box-shadow:inset 0 0 1px rgba(0,0,0,0.5)}
.toiletroll .papers{position:relative;z-index:-1;width:100px;height:180px;top:30px;left:10px;overflow:hidden}
.toiletroll .papers:after{position:absolute;content:"";width:100%;height:33%;box-shadow:inset 0 30px 10px rgba(0,0,0,0.2)}
.toiletroll .papers .paper{position:absolute;width:100px;height:60px;background-color:#eee;box-shadow:inset 0 0 1px rgba(0,0,0,0.5);text-align:center;font:bold 15px/60px Roboto;color:#bbb;text-shadow:-1px -1px 1px rgba(255,255,255,0.4),1px 1px 1px rgba(0,0,0,0.4);-webkit-animation:move-paper 2s linear infinite;animation:move-paper 2s linear infinite}
.toiletroll .papers .paper:nth-of-type(2){-webkit-animation-delay:-.6666666667s;animation-delay:-.6666666667s}
.toiletroll .papers .paper:nth-of-type(3){-webkit-animation-delay:-1.3333333333s;animation-delay:-1.3333333333s}
@-webkit-keyframes move-paper {
0%{opacity:1;-webkit-transform:translateY(-60px);transform:translateY(-60px)}
50%{-webkit-transform:translateY(20px);transform:translateY(20px)}
75%{opacity:1}
100%{opacity:0;-webkit-transform:translateY(120px);transform:translateY(120px)}
}
@keyframes move-paper {
0%{opacity:1;-webkit-transform:translateY(-60px);transform:translateY(-60px)}
50%{-webkit-transform:translateY(20px);transform:translateY(20px)}
75%{opacity:1}
100%{opacity:0;-webkit-transform:translateY(120px);transform:translateY(120px)}
}
@-webkit-keyframes move-roll {
0%{background-position:0 120px}
100%{background-position:0 0}
}
@keyframes move-roll {
0%{background-position:0 120px}
100%{background-position:0 0}
}
@-webkit-keyframes anim-rollend {
0%{background-size:100% 100%;background-position:0 0}
50%{background-size:98% 98%;background-position:1px 1px}
}
@keyframes anim-rollend {
0%{background-size:100% 100%;background-position:0 0}
50%{background-size:98% 98%;background-position:1px 1px}
}
5 — Анимированный прелоадер «Цветастый красавчик»
HTML разметка:
<div class="loader"></div>
CSS:
body{background:#ececec}
.loader:before,.loader:after{position:absolute;top:50%;left:50%;border-radius:50%;border-style:solid;content:'';transform:translate(-50%,-50%);animation:rotate 1.5s infinite ease-in-out;border-color:#ECD078 #C02942 #542437 #53777A}
.loader:before{border-width:10vh}
.loader:after{width:30vh;height:30vh;border-width:2.5vh;animation-direction:reverse}
@keyframes rotate {
0%{transform:translate(-50%,-50%) rotate(0)}
100%{transform:translate(-50%,-50%) rotate(360deg)}
}
6 — Анимированный прелоадер «Неоновый изыск»
HTML разметка:
<div class="box">
<div class="loader">
<div class="o"></div>
<div class="o"></div>
<div class="o"></div>
<div class="o"></div>
</div>
</div>
CSS:
.loader{position:relative;display:flex;font-size:12px}
.loader::after{content:'';position:absolute;top:calc(50% - .15em);left:-5vw;height:.3em;width:calc(100% + 10vw);border-radius:50%;background-color:currentColor;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-filter:blur(0.05em) contrast(2);filter:blur(0.05em) contrast(2);box-shadow:0 0 1em #ccf,0 0 2em #ccf}
.o{position:relative;left:-42px;z-index:1;width:1em;height:1em;border-radius:50%;background-color:currentColor;margin-left:3em;margin-right:3em;-webkit-animation:translateX 1s linear infinite;animation:translateX 1s linear infinite;-webkit-filter:blur(0.3em) contrast(5);filter:blur(0.3em) contrast(5);box-shadow:0 0 0.15em,0 0 1em .25em #9999ff,0 0 3em 1.5em rgba(153,153,255,0.2),0 0 5em rgba(153,153,255,0.5)}
.o:first-child{-webkit-animation-name:translateX,hide-show;animation-name:translateX,hide-show;-webkit-animation-timing-function:linear,step-end;animation-timing-function:linear,step-end}
.o:last-child{-webkit-transform-origin:-99px 50%;transform-origin:-99px 50%;-webkit-animation-name:helf-rotate;animation-name:helf-rotate;-webkit-animation-timing-function:cubic-bezier(0.25,0,0.4,1.25);animation-timing-function:cubic-bezier(0.25,0,0.4,1.25)}
@-webkit-keyframes translateX {
100%{-webkit-transform:translateX(84px);transform:translateX(84px)}
}
@keyframes translateX {
100%{-webkit-transform:translateX(84px);transform:translateX(84px)}
}
@-webkit-keyframes helf-rotate {
0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
50%{opacity:1;-webkit-transform:rotate(180deg);transform:rotate(180deg)}
50.1%,100%{opacity:0}
}
@keyframes helf-rotate {
0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
50%{opacity:1;-webkit-transform:rotate(180deg);transform:rotate(180deg)}
50.1%,100%{opacity:0}
}
@-webkit-keyframes hide-show {
0%{opacity:0}
50%{opacity:1}
}
@keyframes hide-show {
0%{opacity:0}
50%{opacity:1}
}
.box{position:relative;display:flex;flex:1;justify-content:center;align-items:center;flex-wrap:wrap;overflow:hidden}
.box:hover *{-webkit-animation-play-state:paused;animation-play-state:paused}
.box:active *{-webkit-animation-play-state:running;animation-play-state:running}
*,::before,::after{box-sizing:border-box}
html{height:100%}
body{display:flex;flex-direction:column;min-height:100%;margin:0;line-height:1.4;color:#fff;background-color:#000}
.intro{width:90%;max-width:50rem;padding-top:.5em;padding-bottom:1rem;margin:0 auto 1em;font-size:calc(1rem + 2vmin);text-transform:capitalize;text-align:center;font-family:serif}
.intro small{display:block;text-align:right;opacity:.5;font-style:italic;text-transform:none;border-top:1px dashed rgba(255,255,255,0.75)}
.info{margin:0;padding:1em;font-size:.9em;font-style:italic;font-family:serif;text-align:right;opacity:.75}
.info a{color:inherit}
7 — Анимированный прелоадер «Google»
HTML разметка:
<h1> <span>G</span> <span>o</span> <span>o</span> <span>g</span> <span>l</span> <span>e</span> </h1> <div class="google-loader"> <span></span> <span></span> <span></span> <span></span> </div>
CSS:
.google-loader{display:block}
.google-loader span{display:inline-block;margin-top:10px;height:20px;width:20px;border-radius:50%}
.google-loader span:not(:first-child){margin-left:10px}
.google-loader span:nth-child(1){background:#4285F4;animation:move 1s ease-in-out -.25s infinite alternate}
.google-loader span:nth-child(2){background:#DB4437;animation:move 1s ease-in-out -.5s infinite alternate}
.google-loader span:nth-child(3){background:#F4B400;animation:move 1s ease-in-out -.75s infinite alternate}
.google-loader span:nth-child(4){background:#0F9D58;animation:move 1s ease-in-out -1s infinite alternate}
@keyframes move {
from{transform:translateY(-10px)}
to{transform:translateY(5px)}
}
h1{font-family:"Montserrat",sans-serif;font-size:4em;text-align:center;letter-spacing:-8px;margin-top:0}
h1 span:first-child{color:#4285F4}
h1 span:nth-child(2){color:#DB4437}
h1 span:nth-child(3){color:#F4B400}
h1 span:nth-child(4){color:#4285F4}
h1 span:nth-child(5){color:#0F9D58}
h1 span:last-child{color:#DB4437;transform:rotate(-20deg);display:inline-block}
html,body{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}
8 — Анимированный прелоадер «Minecraft»
HTML разметка:
<div id="loader" style="visibility: visible;">
<div id="loading">LOADING</div>
<div id="origin" class="grass cube">
<div class="face top"></div>
<div class="face bottom"></div>
<div class="face front"></div>
<div class="face back"></div>
<div class="face left"></div>
<div class="face right"></div>
</div>
</div>
CSS:
body{background:linear-gradient(to bottom,#cee7d4 0%,#f5f4c9 100%);background-repeat:no-repeat;background-attachment:fixed;overflow:hidden;perspective:1000px}
.cube{position:relative;margin:calc(45vh - 150px) auto;width:150px;height:150px;transform-style:preserve-3d;transform:rotateX(-15deg) rotateY(45deg);transition:all .75s ease}
.face{width:150px;height:150px;position:absolute;box-sizing:border-box}
.face.top{transform:rotateY(180deg) rotateX(90deg) translate3d(0,0,75px)}
.face.bottom{transform:rotateY(180deg) rotateX(90deg) translate3d(0,0,-75px)}
.face.front{transform:translate3d(0,0,75px)}
.face.back{transform:translate3d(0,0,-75px)}
.face.left{transform:rotateY(90deg) translate3d(0,0,-75px)}
.face.right{transform:rotateY(90deg) translate3d(0,0,75px)}
.grass .back{background:url(https://t5.rbxcdn.com/3ee9f2b9178eae5fbc7bfdec1d78f4d7);background-size:100% 100%}
.grass .front{background:url(https://t5.rbxcdn.com/3ee9f2b9178eae5fbc7bfdec1d78f4d7);background-size:100% 100%}
.grass .left{background:url(https://t5.rbxcdn.com/3ee9f2b9178eae5fbc7bfdec1d78f4d7);background-size:100% 100%}
.grass .right{background:url(https://t5.rbxcdn.com/3ee9f2b9178eae5fbc7bfdec1d78f4d7);background-size:100% 100%}
.grass .top{background:url(https://t7.rbxcdn.com/48be183b4e905bb92e1fdd14161f32b9);background-size:100% 100%}
.grass .bottom{background:url(http://static.planetminecraft.com/files/resource_media/screenshot/1236/pack_3530346.jpg);background-size:100% 100%;text-align:center}
#origin{-webkit-animation-name:spin;-webkit-animation-duration:5s;animation-name:spin;animation-duration:5s;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}
#loader{position:absolute;top:0;left:0;width:100vw;height:100vh}
#loading{font-size:75px;font-family:Impact,Haettenschweiler,"Franklin Gothic Bold",Charcoal,"Helvetica Inserat","Bitstream Vera Sans Bold","Arial Black","sans serif";position:relative;top:calc(45vh - 150px);text-align:center;z-index:1;transition:all .75s ease;-webkit-animation-name:spin;-webkit-animation-duration:5s;animation-name:spin;animation-duration:5s;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}
@keyframes spin {
from{transform:rotateX(-3deg) rotateY(0deg)}
to{transform:rotateX(-3deg) rotateY(360deg)}
}
JS:
var loader = document.getElementById("loader");
loader.style.visibility = "visible";
9 — Анимированный прелоадер «Matrix»
HTML разметка:
<ul id="loader"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
CSS:
@import "https://fonts.googleapis.com/css?family=Josefin+Slab";
body{background:#000}
#loader{position:absolute;width:500px;height:130px;left:50%;top:40%;margin-left:-250px}
#loader:before{content:'Loading';display:block;font-size:20px;position:absolute;text-transform:uppercase;font-family:'Josefin Slab',serif;color:#9befc6;text-align:center;width:100%;text-shadow:0 0 50px #21d07b}
#loader li{position:absolute;width:10px;height:60px;opacity:0;color:#137847;text-transform:uppercase;text-shadow:0 2px 3px rgba(0,0,0,0.9);font-size:0;font-family:'Josefin Slab',serif;animation:loader 2300ms linear infinite normal;-o-animation:loader 2300ms linear infinite normal;-moz-animation:loader 2300ms linear infinite normal;-webkit-animation:loader 2300ms linear infinite normal}
#loader li:after{content:'»';display:block;font-size:90px;text-shadow:0 0 40px #21d07b}
#loader li:nth-child(2){color:#1aa461;animation-delay:.2s;-o-animation-delay:.2s;-moz-animation-delay:.2s;-webkit-animation-delay:.2s}
#loader li:nth-child(3){color:#20c776;animation-delay:.4s;-o-animation-delay:.4s;-moz-animation-delay:.4s;-webkit-animation-delay:.4s}
#loader li:nth-child(4){color:#31de8a;animation-delay:.6s;-o-animation-delay:.6s;-moz-animation-delay:.6s;-webkit-animation-delay:.6s}
#loader li:nth-child(5){color:#54e49e;animation-delay:.8s;-o-animation-delay:.8s;-moz-animation-delay:.8s;-webkit-animation-delay:.8s}
#loader li:nth-child(6){color:#85ecba;animation-delay:1s;-o-animation-delay:1s;-moz-animation-delay:1s;-webkit-animation-delay:1s}
#loader li:nth-child(7){color:#b1f3d3;animation-delay:1.2s;-o-animation-delay:1.2s;-moz-animation-delay:1.2s;-webkit-animation-delay:1.2s}
#loader li:nth-child(8){color:#effcf6;animation-delay:1.4s;-o-animation-delay:1.4s;-moz-animation-delay:1.4s;-webkit-animation-delay:1.4s}
#loader li:nth-child(9){color:#f3fdf8;animation-delay:1.6s;-o-animation-delay:1.6s;-moz-animation-delay:1.6s;-webkit-animation-delay:1.6s}
#loader li:nth-child(10){color:#fff;animation-delay:1.8s;-o-animation-delay:1.8s;-moz-animation-delay:1.8s;-webkit-animation-delay:1.8s}
@-webkit-keyframes loader {
0%{-webkit-transform:scale(0.2) perspective(400px) rotateY(-50deg);left:0;opacity:0;-webkit-filter:blur(8px)}
35%{left:41%;-webkit-transform:scale(1.2) perspective(400px) rotateY(0deg);opacity:1;-webkit-filter:blur(0px)}
65%{left:59%;-webkit-transform:scale(1.2) perspective(400px) rotateY(0deg);opacity:1;-webkit-filter:blur(0px)}
100%{left:100%;opacity:0;-webkit-transform:scale(0.2) perspective(400px) rotateY(50deg);-webkit-filter:blur(8px)}
}
@-moz-keyframes loader {
0%{-moz-transform:scale(0.2) perspective(400px) rotateY(-50deg);left:0;opacity:0;-moz-filter:blur(8px)}
35%{left:41%;-moz-transform:scale(1.2) perspective(400px) rotateY(0deg);opacity:1;-moz-filter:blur(0px)}
65%{left:59%;-moz-transform:scale(1.2) perspective(400px) rotateY(0deg);opacity:1;-moz-filter:blur(0px)}
100%{left:100%;opacity:0;-moz-transform:scale(0.2) perspective(400px) rotateY(50deg);-moz-filter:blur(8px)}
}
10 — Анимированный прелоадер «Сердце»
HTML разметка:
<div id="spinner">
<span class="loader">
<i class="fa fa-heart"></i>
<i class="fa fa-heart"></i>
</span>
</div>
CSS:
@import compass/css3;
body{background-color:#222}
#spinner{position:fixed;width:100px;height:100px;left:50%;margin-left:-50px;top:50%;margin-top:-50px;.loaderposition:relative;iposition:absolute;font-size:100px;&:first-of-type {;color:#ff6868;-webkit-transform:scale(0.0,0.0);opacity:0;-webkit-animation:loading1 2s ease-in-out;-webkit-animation-iteration-count:infinite}
&:last-of-type{color:maroon;-webkit-transform:scale(1,1);opacity:1;-webkit-animation:loading2 2s ease-out;-webkit-animation-iteration-count:infinite}
@-webkit-keyframes loading1 {
0%{color:#ff6868;-webkit-transform:scale(0.0,0.0);opacity:0}
50%{color:#d36868;-webkit-transform:scale(1,1);opacity:1}
100%{color:#ff6868;-webkit-transform:scale(0.0,0.0);opacity:0}
}
@-webkit-keyframes loading2 {
0%{color:maroon;-webkit-transform:scale(1,1);opacity:1}
50%{color:#711f1f;-webkit-transform:scale(0.0,0.0);opacity:0}
100%{color:maroon;-webkit-transform:scale(1,1);opacity:1}
}
11 — Анимированный прелоадер «Книги»
HTML разметка:
<div class="bookshelf_wrapper">
<ul class="books_list">
<li class="book_item first"></li>
<li class="book_item second"></li>
<li class="book_item third"></li>
<li class="book_item fourth"></li>
<li class="book_item fifth"></li>
<li class="book_item sixth"></li>
</ul>
<div class="shelf"></div>
</div>
CSS:
body{background-color:#1e6cc7;width:100%;height:100vh;margin:0}
.bookshelf_wrapper{position:relative;top:60%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.books_list{margin:0 auto;width:300px;padding:0}
.book_item{position:absolute;top:-120px;box-sizing:border-box;list-style:none;width:40px;height:120px;opacity:0;background-color:#1e6cc7;border:5px solid #fff;-webkit-transform-origin:bottom left;transform-origin:bottom left;-webkit-transform:translateX(300px);transform:translateX(300px);-webkit-animation:travel 2500ms linear infinite;animation:travel 2500ms linear infinite}
.book_item.first{top:-140px;height:140px}
.book_item.first:before,.book_item.first:after{content:'';position:absolute;top:10px;left:0;width:100%;height:5px;background-color:#fff}
.book_item.first:after{top:initial;bottom:10px}
.book_item.second:before,.book_item.second:after,.book_item.fifth:before,.book_item.fifth:after{box-sizing:border-box;content:'';position:absolute;top:10px;left:0;width:100%;height:17.5px;border-top:5px solid #fff;border-bottom:5px solid #fff}
.book_item.second:after,.book_item.fifth:after{top:initial;bottom:10px}
.book_item.third:before,.book_item.third:after{box-sizing:border-box;content:'';position:absolute;top:10px;left:9px;width:12px;height:12px;border-radius:50%;border:5px solid #fff}
.book_item.third:after{top:initial;bottom:10px}
.book_item.fourth{top:-130px;height:130px}
.book_item.fourth:before{box-sizing:border-box;content:'';position:absolute;top:46px;left:0;width:100%;height:17.5px;border-top:5px solid #fff;border-bottom:5px solid #fff}
.book_item.fifth{top:-100px;height:100px}
.book_item.sixth{top:-140px;height:140px}
.book_item.sixth:before{box-sizing:border-box;content:'';position:absolute;bottom:31px;left:0;width:100%;height:5px;background-color:#fff}
.book_item.sixth:after{box-sizing:border-box;content:'';position:absolute;bottom:10px;left:9px;width:12px;height:12px;border-radius:50%;border:5px solid #fff}
.book_item:nth-child(2){-webkit-animation-delay:416.6666666667ms;animation-delay:416.6666666667ms}
.book_item:nth-child(3){-webkit-animation-delay:833.3333333333ms;animation-delay:833.3333333333ms}
.book_item:nth-child(4){-webkit-animation-delay:1250ms;animation-delay:1250ms}
.book_item:nth-child(5){-webkit-animation-delay:1666.6666666667ms;animation-delay:1666.6666666667ms}
.book_item:nth-child(6){-webkit-animation-delay:2083.3333333333ms;animation-delay:2083.3333333333ms}
.shelf{width:300px;height:5px;margin:0 auto;background-color:#fff;position:relative}
.shelf:before,.shelf:after{content:'';position:absolute;width:100%;height:100%;background:#1e6cc7;background-image:radial-gradient(rgba(255,255,255,0.5) 30%,transparent 0);background-size:10px 10px;background-position:0 -2.5px;top:200%;left:5%;-webkit-animation:move 250ms linear infinite;animation:move 250ms linear infinite}
.shelf:after{top:400%;left:7.5%}
@-webkit-keyframes move {
from{background-position-x:0}
to{background-position-x:10px}
}
@keyframes move {
from{background-position-x:0}
to{background-position-x:10px}
}
@-webkit-keyframes travel {
0%{opacity:0;-webkit-transform:translateX(300px) rotateZ(0deg) scaleY(1);transform:translateX(300px) rotateZ(0deg) scaleY(1)}
6.5%{-webkit-transform:translateX(279.5px) rotateZ(0deg) scaleY(1.1);transform:translateX(279.5px) rotateZ(0deg) scaleY(1.1)}
8.8%{-webkit-transform:translateX(273.6px) rotateZ(0deg) scaleY(1);transform:translateX(273.6px) rotateZ(0deg) scaleY(1)}
10%{opacity:1;-webkit-transform:translateX(270px) rotateZ(0deg);transform:translateX(270px) rotateZ(0deg)}
17.6%{-webkit-transform:translateX(247.2px) rotateZ(-30deg);transform:translateX(247.2px) rotateZ(-30deg)}
45%{-webkit-transform:translateX(165px) rotateZ(-30deg);transform:translateX(165px) rotateZ(-30deg)}
49.5%{-webkit-transform:translateX(151.5px) rotateZ(-45deg);transform:translateX(151.5px) rotateZ(-45deg)}
61.5%{-webkit-transform:translateX(115.5px) rotateZ(-45deg);transform:translateX(115.5px) rotateZ(-45deg)}
67%{-webkit-transform:translateX(99px) rotateZ(-60deg);transform:translateX(99px) rotateZ(-60deg)}
76%{-webkit-transform:translateX(72px) rotateZ(-60deg);transform:translateX(72px) rotateZ(-60deg)}
83.5%{opacity:1;-webkit-transform:translateX(49.5px) rotateZ(-90deg);transform:translateX(49.5px) rotateZ(-90deg)}
90%{opacity:0}
100%{opacity:0;-webkit-transform:translateX(0px) rotateZ(-90deg);transform:translateX(0px) rotateZ(-90deg)}
}
@keyframes travel {
0%{opacity:0;-webkit-transform:translateX(300px) rotateZ(0deg) scaleY(1);transform:translateX(300px) rotateZ(0deg) scaleY(1)}
6.5%{-webkit-transform:translateX(279.5px) rotateZ(0deg) scaleY(1.1);transform:translateX(279.5px) rotateZ(0deg) scaleY(1.1)}
8.8%{-webkit-transform:translateX(273.6px) rotateZ(0deg) scaleY(1);transform:translateX(273.6px) rotateZ(0deg) scaleY(1)}
10%{opacity:1;-webkit-transform:translateX(270px) rotateZ(0deg);transform:translateX(270px) rotateZ(0deg)}
17.6%{-webkit-transform:translateX(247.2px) rotateZ(-30deg);transform:translateX(247.2px) rotateZ(-30deg)}
45%{-webkit-transform:translateX(165px) rotateZ(-30deg);transform:translateX(165px) rotateZ(-30deg)}
49.5%{-webkit-transform:translateX(151.5px) rotateZ(-45deg);transform:translateX(151.5px) rotateZ(-45deg)}
61.5%{-webkit-transform:translateX(115.5px) rotateZ(-45deg);transform:translateX(115.5px) rotateZ(-45deg)}
67%{-webkit-transform:translateX(99px) rotateZ(-60deg);transform:translateX(99px) rotateZ(-60deg)}
76%{-webkit-transform:translateX(72px) rotateZ(-60deg);transform:translateX(72px) rotateZ(-60deg)}
83.5%{opacity:1;-webkit-transform:translateX(49.5px) rotateZ(-90deg);transform:translateX(49.5px) rotateZ(-90deg)}
90%{opacity:0}
100%{opacity:0;-webkit-transform:translateX(0px) rotateZ(-90deg);transform:translateX(0px) rotateZ(-90deg)}
}
12 — Анимированный прелоадер «Белый круг»
HTML разметка:
<div class="loader"></div>
CSS:
body{background-color:#000}
.loader{display:block;position:relative;height:100px;width:100px;margin:100px auto 0;background-color:#fff;border-radius:50%;-webkit-animation:loaderAnim 3s infinite linear;animation:loaderAnim 3s infinite linear}
.loader:before,.loader:after{content:"";display:block;border-radius:50%;position:absolute;background-color:#000}
.loader:before{height:80px;width:80px;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.loader:after{height:100px;width:100px;background-color:#000;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);left:-50px;-webkit-animation:pulse .9554140127s infinite alternate;animation:pulse .9554140127s infinite alternate}
@-webkit-keyframes loaderAnim {
0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
}
@keyframes loaderAnim {
0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
}
@-webkit-keyframes pulse {
0%{-webkit-transform:translateY(-50%) scale(0.25);transform:translateY(-50%) scale(0.25);border-color:#fff}
100%{-webkit-transform:translateY(-50%) scale(1.9);transform:translateY(-50%) scale(1.9)}
}
@keyframes pulse {
0%{-webkit-transform:translateY(-50%) scale(0.25);transform:translateY(-50%) scale(0.25);border-color:#fff}
100%{-webkit-transform:translateY(-50%) scale(1.9);transform:translateY(-50%) scale(1.9)}
}
13 — Анимированный прелоадер «Pac-Man»
HTML разметка:
<main role="main">
<div role="progressbar" aria-busy="true" aria-label="Loading the page">
<div></div>
</div>
</main>
CSS:
[role="progressbar"]{position:relative;width:24px;height:24px;border-radius:100%;background-color:#fdff35}
[role="progressbar"]::before,[role="progressbar"]::after{position:absolute;z-index:3;top:50%;right:-100%;width:2px;height:2px;background-color:#fab99a;-webkit-animation:pac-dot linear .4s infinite;animation:pac-dot linear .4s infinite;content:''}
[role="progressbar"]::after{-webkit-animation-delay:.2s;animation-delay:.2s}
[role="progressbar"] > div{position:absolute;z-index:2;top:50%;right:0;width:19.2px;height:19.2px;-webkit-transform:translate(50%,-50%);transform:translate(50%,-50%);-webkit-animation:bite linear .4s infinite;animation:bite linear .4s infinite}
[role="progressbar"] > div::before{display:block;width:19.2px;height:19.2px;-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg);background-color:#afa;background-color:#000;content:''}
@-webkit-keyframes bite {
0%{-webkit-transform:translate(50%,-50%) rotateX(0);transform:translate(50%,-50%) rotateX(0)}
50%{-webkit-transform:translate(50%,-50%) rotateX(-90deg);transform:translate(50%,-50%) rotateX(-90deg)}
100%{-webkit-transform:translate(50%,-50%) rotateX(0);transform:translate(50%,-50%) rotateX(0)}
}
@keyframes bite {
0%{-webkit-transform:translate(50%,-50%) rotateX(0);transform:translate(50%,-50%) rotateX(0)}
50%{-webkit-transform:translate(50%,-50%) rotateX(-90deg);transform:translate(50%,-50%) rotateX(-90deg)}
100%{-webkit-transform:translate(50%,-50%) rotateX(0);transform:translate(50%,-50%) rotateX(0)}
}
@-webkit-keyframes pac-dot {
0%{right:-100%}
100%{right:20%}
}
@keyframes pac-dot {
0%{right:-100%}
100%{right:20%}
}
html,body{height:100%}
body{display:flex;align-items:center;justify-content:center;background-color:#000}
a{display:inline-block;color:#fff;text-decoration:none;border-bottom:1px dashed rgba(255,255,255,0.3);transition:border-color ease-out .15s}
a:focus,a:hover{border-bottom-color:#fff}
p{margin-top:40px;color:#fff;font-size:14px;font-family:Avenir Next,Helvetica Neue,sans-serif}
[role="progressbar"]{margin:0 auto}
14 — Анимированный прелоадер «Кот и Мышь»
HTML разметка:
<div class="loader">
<div class="track">
<div class="mouse"></div>
</div>
<div class="face">
<div class="ears-container"></div>
<div class="eyes-container">
<div class="eye"></div>
<div class="eye"></div>
</div>
<div class="phiz">
<div class="nose"></div>
<div class="lip"></div>
<div class="mouth"></div>
</div>
</div>
</div>
CSS:
@-webkit-keyframes rotate {
0%{transform:rotate(-0.08turn)}
100%{transform:rotate(-1.08turn)}
}
@-moz-keyframes rotate {
0%{transform:rotate(-0.08turn)}
100%{transform:rotate(-1.08turn)}
}
@-o-keyframes rotate {
0%{transform:rotate(-0.08turn)}
100%{transform:rotate(-1.08turn)}
}
@keyframes rotate {
0%{transform:rotate(-0.08turn)}
100%{transform:rotate(-1.08turn)}
}
@-webkit-keyframes hideEye {
0%,10%,85%{margin-top:0;height:50px}
30%,65%{margin-top:20px;height:30px}
}
@-moz-keyframes hideEye {
0%,10%,85%{margin-top:0;height:50px}
30%,65%{margin-top:20px;height:30px}
}
@-o-keyframes hideEye {
0%,10%,85%{margin-top:0;height:50px}
30%,65%{margin-top:20px;height:30px}
}
@keyframes hideEye {
0%,10%,85%{margin-top:0;height:50px}
30%,65%{margin-top:20px;height:30px}
}
@-webkit-keyframes blink {
0%,10%,85%{bottom:0}
30%,65%{bottom:20px}
0%{transform:rotate(-0.08turn)}
100%{transform:rotate(-1.08turn)}
}
@-moz-keyframes blink {
0%,10%,85%{bottom:0}
30%,65%{bottom:20px}
0%{transform:rotate(-0.08turn)}
100%{transform:rotate(-1.08turn)}
}
@-o-keyframes blink {
0%,10%,85%{bottom:0}
30%,65%{bottom:20px}
0%{transform:rotate(-0.08turn)}
100%{transform:rotate(-1.08turn)}
}
@keyframes blink {
0%,10%,85%{bottom:0}
30%,65%{bottom:20px}
0%{transform:rotate(-0.08turn)}
100%{transform:rotate(-1.08turn)}
}
body{margin:0;background:#5e4674;overflow:hidden}
body .loader{position:absolute;left:50%;top:50%;width:260px;height:260px;margin-left:-130px;margin-top:-130px}
body .loader .track{width:100%;height:100%;border:solid #fff;border-width:5px 5px 3px 0;border-top-color:transparent;border-radius:50%;margin-left:-3px;margin-top:-3px;-webkit-animation:rotate 3s infinite linear;-moz-animation:rotate 3s infinite linear;-o-animation:rotate 3s infinite linear;animation:rotate 3s infinite linear}
body .loader .track .mouse{position:absolute;right:31px;top:18px;width:25px;height:25px;background:#fff;border-radius:80% 0 55% 50% / 55% 0 80% 50%;transform:rotate(-95deg)}
body .loader .track .mouse:before,body .loader .track .mouse:after{position:absolute;content:'';width:9px;height:9px;border-radius:50%;background:inherit}
body .loader .track .mouse:before{left:5px;top:-4px}
body .loader .track .mouse:after{left:20px;top:11px}
body .loader .face{position:absolute;left:50%;top:50%;width:130px;height:130px;margin-left:-65px;margin-top:-65px}
body .loader .face:before,body .loader .face:after{position:absolute;content:'';width:50%;height:100%}
body .loader .face:before{background:#c8c6c9;border-top-left-radius:65px;border-bottom-left-radius:55px}
body .loader .face:after{left:50%;background:#d0ced1;border-top-right-radius:65px;border-bottom-right-radius:55px}
body .loader .face .ears-container{position:absolute;top:-8px;width:130px;height:50px}
body .loader .face .ears-container:before,body .loader .face .ears-container:after{position:absolute;content:'';width:0;height:0;border-top:35px solid transparent;border-bottom:35px solid transparent}
body .loader .face .ears-container:before{border-left:35px solid #c8c6c9}
body .loader .face .ears-container:after{right:0;border-right:35px solid #d0ced1}
body .loader .face .eyes-container{position:absolute;overflow:hidden;left:50%;top:30px;width:106px;height:50px;margin-left:-53px;z-index:1;-webkit-animation:hideEye 3s infinite linear;-moz-animation:hideEye 3s infinite linear;-o-animation:hideEye 3s infinite linear;animation:hideEye 3s infinite linear}
body .loader .face .eyes-container .eye{position:relative;bottom:0;float:left;width:50px;height:50px;border-radius:50%;color:#c8c6c9;background:#fff;-webkit-animation:blink 3s infinite linear;-moz-animation:blink 3s infinite linear;-o-animation:blink 3s infinite linear;animation:blink 3s infinite linear}
body .loader .face .eyes-container .eye:after{position:absolute;content:'';top:4px;right:14px;width:12px;height:12px;border-radius:inherit;background:#838091}
body .loader .face .eyes-container .eye:last-child{float:right;color:#d0ced1}
body .loader .face .phiz{position:absolute;left:50%;top:66px;width:32px;height:48px;margin-left:-16px;z-index:1}
body .loader .face .phiz .nose{width:100%;height:15px;border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-left-radius:25px;border-bottom-right-radius:25px;background:#838091}
body .loader .face .phiz .lip{position:relative;left:50%;width:4px;height:12px;margin-left:-2px;background:#838091}
body .loader .face .phiz .lip:before{position:absolute;content:'';width:100%;height:5px;background:#767385}
body .loader .face .phiz .mouth{position:relative;left:50%;width:20px;height:6px;margin-left:-13px;background:#fff;border:3px solid #838091;border-bottom-right-radius:12px;border-bottom-left-radius:12px}
15 — Анимированный прелоадер «Спидометр»
HTML разметка:
<div id="loader-wrapper">
<div class="loader">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="subline"></div>
<div class="subline"></div>
<div class="subline"></div>
<div class="subline"></div>
<div class="subline"></div>
<div class="loader-circle-1"><div class="loader-circle-2"></div></div>
<div class="needle"></div>
<div class="loading">Loading</div>
</div>
</div>
CSS:
#loader-wrapper{position:absolute;left:0;top:0;right:0;bottom:0;background:#000;z-index:15;overflow:hidden}
.loader{width:150px;height:150px;border:1px #fff solid;position:absolute;left:50%;top:50%;margin:-75px 0 0 -75px;border-radius:50%}
.loader .loading{font-size:10px;position:absolute;width:100%;text-align:center;line-height:14px;font-family:'Century Gothic',sans-serif;font-style:italic;left:0;top:50%;margin-top:20px;color:#fff;font-weight:700;text-transform:uppercase}
.loader-circle-1{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-2{width:126px;height:126px;left:5px;top:5px;border:1px transparent solid;border-radius:50%;position:absolute;border-right-color:#e81512;-webkit-animation:spin 5s linear infinite;animation:spin 5s linear infinite}
.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){transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-ms-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){transform:rotate(135deg);-moz-transform:rotate(135deg);-webkit-transform:rotate(135deg);-ms-transform:rotate(135deg);right:33px;top:33px}
.loader .line:nth-child(5){right:16px;top:50%;margin-top:-1px}
.loader .line:nth-child(6){transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);right:33px;bottom:33px;background:#e81512}
.loader .subline{position:absolute;width:3px;height:2px;background:#fff}
.loader .subline:nth-child(7){transform:rotate(22.5deg);-moz-transform:rotate(22.5deg);-webkit-transform:rotate(22.5deg);-ms-transform:rotate(22.5deg);left:21px;top:50px}
.loader .subline:nth-child(8){transform:rotate(67.5deg);-moz-transform:rotate(67.5deg);-webkit-transform:rotate(67.5deg);-ms-transform:rotate(67.5deg);left:50px;top:21px}
.loader .subline:nth-child(9){transform:rotate(112.5deg);-moz-transform:rotate(112.5deg);-webkit-transform:rotate(112.5deg);-ms-transform:rotate(112.5deg);right:50px;top:21px}
.loader .subline:nth-child(10){transform:rotate(157.5deg);-moz-transform:rotate(157.5deg);-webkit-transform:rotate(157.5deg);-ms-transform:rotate(157.5deg);right:21px;top:50px}
.loader .subline:nth-child(11){transform:rotate(22.5deg);-moz-transform:rotate(22.5deg);-webkit-transform:rotate(22.5deg);-ms-transform:rotate(22.5deg);right:20px;bottom:49px;background:#e81512}
.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 #e81512 transparent transparent;position:absolute;right:50%;top:50%;margin:-3.5px 0 0;border-radius:0 50% 50% 0}
@keyframes pegIt {
0%{transform:rotate(0deg)}
16%{transform:rotate(75deg)}
25%{transform:rotate(55deg)}
30%{transform:rotate(90deg)}
36%{transform:rotate(170deg)}
42%{transform:rotate(150deg)}
50%{transform:rotate(227deg)}
100%{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)}
100%{-webkit-transform:rotate(360deg)}
}
@keyframes spin {
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
16 — Анимированный прелоадер «Камера»
HTML + CVG разметка:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org" id="camera-loader" width="85.708488" height="100">
<defs id="defs12"/>
<path id="camera-body" d="M 51.5625 0 C 50.667739 -0.00962983 49.756943 0.05800477 48.84375 0.1875 C 41.018415 1.2971691 35.117198 7.3376842 33.8125 14.71875 C 30.504071 7.9918491 23.138091 3.8277945 15.3125 4.9375 C 5.573576 6.3185261 -1.1937811 15.321773 0.1875 25.0625 C 1.030765 31.00916 4.7245026 35.850708 9.6875 38.40625 L 10.59375 44.84375 L 41.21875 40.5 C 42.618434 40.301472 43.966737 41.101389 44.15625 42.4375 C 44.34576 43.773612 43.274684 44.957723 41.875 45.15625 L 11.25 49.5 L 12.40625 57.6875 C 12.593105 59.005185 13.837018 59.937079 15.15625 59.75 L 64.25 52.78125 C 65.567815 52.594377 66.499355 51.348937 66.3125 50.03125 L 63.5625 30.78125 C 67.618077 26.946961 69.843395 21.259142 69 15.3125 C 67.748216 6.4849658 60.211858 0.09304631 51.5625 0 z M 51.28125 3.75 C 58.168631 3.6506107 64.22589 8.6859174 65.21875 15.6875 C 66.295328 23.279482 61.029156 30.329715 53.4375 31.40625 C 45.84552 32.482829 38.795329 27.18573 37.71875 19.59375 C 36.641441 11.998855 41.938942 4.9828747 49.53125 3.90625 C 50.124347 3.8221462 50.697574 3.7584222 51.28125 3.75 z M 17.5625 8.53125 C 24.449868 8.4318561 30.507144 13.46718 31.5 20.46875 C 32.576577 28.060719 27.310389 35.110969 19.71875 36.1875 C 12.126783 37.264077 5.0765804 31.966969 4 24.375 C 2.9226914 16.780121 8.2202041 9.7641225 15.8125 8.6875 C 16.405598 8.603395 16.978824 8.5396714 17.5625 8.53125 z M 79.71875 27.46875 L 66.9375 33.65625 L 68.53125 44.8125 L 82.53125 47.21875 L 79.71875 27.46875 z M 41.71875 41.0625 C 41.582761 41.058251 41.422178 41.073761 41.28125 41.09375 L 8.15625 45.78125 L 7.90625 44.09375 L 2.78125 43.9375 L 4 52.53125 L 8.875 50.9375 L 8.625 49.25 L 41.78125 44.5625 C 42.908673 44.40259 43.699053 43.493996 43.5625 42.53125 C 43.443014 41.688847 42.670671 41.092246 41.71875 41.0625 z M 51.53125 57.21875 L 28.625 60.4375 C 28.625117 63.279515 28.625057 61.501735 28.625 64.34375 L 30.90625 64.34375 L 32.40625 64.34375 L 17.21875 97.46875 C 16.804629 98.371268 17.19123 99.429629 18.09375 99.84375 C 18.996268 100.25787 20.054629 99.87127 20.46875 98.96875 L 36.34375 64.34375 L 38.28125 64.34375 L 38.28125 98.21875 C 38.28125 99.211743 39.069507 100 40.0625 100 C 41.055493 100 41.875 99.211743 41.875 98.21875 L 41.875 64.34375 L 43.6875 64.34375 L 59.71875 98.96875 C 60.136118 99.869771 61.192729 100.26112 62.09375 99.84375 C 62.994771 99.426382 63.386118 98.338521 62.96875 97.4375 L 47.65625 64.34375 L 49.09375 64.34375 L 51.53125 64.34375 L 51.53125 57.21875 z "/>
<path id="reel-1" d="m 17.763265,10.60917 c -1.849868,0 -3.349902,1.500036 -3.349902,3.349902 0,1.849868 1.500034,3.34863 3.349902,3.34863 1.849865,0 3.348629,-1.498762 3.348629,-3.34863 0,-1.849866 -1.498764,-3.349902 -3.348629,-3.349902 z m -8.0539896,5.851215 c -1.849868,0 -3.3499023,1.500032 -3.3499023,3.349898 0,1.849866 1.5000343,3.349897 3.3499023,3.349897 1.8498656,0 3.3498996,-1.500031 3.3498996,-3.349897 0,-1.849866 -1.500034,-3.349898 -3.3498996,-3.349898 z m 16.1016246,0 c -1.849868,0 -3.3499,1.500032 -3.3499,3.349898 0,1.849866 1.500032,3.349897 3.3499,3.349897 1.849865,0 3.348629,-1.500031 3.348629,-3.349897 0,-1.849866 -1.498764,-3.349898 -3.348629,-3.349898 z m -13.023579,9.460259 c -1.849867,0 -3.3498994,1.500032 -3.3498994,3.349902 0,1.849865 1.5000324,3.348629 3.3498994,3.348629 1.849867,0 3.3499,-1.498764 3.3499,-3.348629 0,-1.84987 -1.500033,-3.349902 -3.3499,-3.349902 z m 9.950613,0 c -1.849866,0 -3.348629,1.500032 -3.348629,3.349902 0,1.849865 1.498763,3.348629 3.348629,3.348629 1.849865,0 3.349901,-1.498764 3.349901,-3.348629 0,-1.84987 -1.500036,-3.349902 -3.349901,-3.349902 z">
<animatetransform attributename="transform" attributetype="XML" type="rotate" dur="2s" begin="0" from="0 17.66 22.74" to="360 17.66 22.74" repeatcount="indefinite"/>
</path>
<path id="reel-2" d="m 51.483904,5.8171007 c -1.849872,0 -3.349908,1.5000388 -3.349908,3.3499074 0,1.8498709 1.500036,3.3486359 3.349908,3.3486359 1.849868,0 3.348635,-1.498765 3.348635,-3.3486359 0,-1.8498686 -1.498767,-3.3499074 -3.348635,-3.3499074 z M 43.4299,11.668326 c -1.849872,0 -3.349908,1.500034 -3.349908,3.349904 0,1.849869 1.500036,3.349903 3.349908,3.349903 1.849869,0 3.349906,-1.500034 3.349906,-3.349903 0,-1.84987 -1.500037,-3.349904 -3.349906,-3.349904 z m 16.101654,0 c -1.849871,0 -3.349907,1.500034 -3.349907,3.349904 0,1.849869 1.500036,3.349903 3.349907,3.349903 1.849867,0 3.348635,-1.500034 3.348635,-3.349903 0,-1.84987 -1.498768,-3.349904 -3.348635,-3.349904 z m -13.023602,9.460276 c -1.849871,0 -3.349907,1.500034 -3.349907,3.349908 0,1.849869 1.500036,3.348635 3.349907,3.348635 1.849869,0 3.349905,-1.498766 3.349905,-3.348635 0,-1.849874 -1.500036,-3.349908 -3.349905,-3.349908 z m 9.950632,0 c -1.849872,0 -3.348637,1.500034 -3.348637,3.349908 0,1.849869 1.498765,3.348635 3.348637,3.348635 1.849867,0 3.349905,-1.498766 3.349905,-3.348635 0,-1.849874 -1.500038,-3.349908 -3.349905,-3.349908 z">
<animatetransform attributename="transform" attributetype="XML" type="rotate" dur="3.6s" begin="0" from="0 51.4 17.7" to="360 51.4 17.7" repeatcount="indefinite"/>
</path>
</svg>
<span>Loading…</span>
CSS:
#camera-body,#reel-1,#reel-2{fill:#fff;fill-opacity:.95;stroke:none}
body{height:100vh;background:#111;color:rgba(255,255,255,0.95);display:flexbox;display:flex;flex-direction:column;align-items:center;justify-content:center}
span{font-family:'Open Sans',arial,sans-serif;font-size:1.2em;font-weight:lighter;font-weight:300;line-height:2em}
17 — Анимированный прелоадер «Неоновый оргазм»
HTML разметка:
<script id="sf" type="x-shader/x-fragment">
precision highp float;
uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;
float ball(vec2 p, float k, float d) {
vec2 r = vec2(p.x - cos(time * k) * d, p.y + sin(time * k) * d);
return smoothstep(0.0, 1.0, 0.03 / length(r));
}
void main(void) {
vec2 q = gl_FragCoord.xy / resolution.xy;
vec2 p = -1.0 + 2.0 * q;
p.x *= resolution.x / resolution.y;
float col = 0.0;
for (int i = 1; i <= 7; ++i) {
col += ball(p, float(i), 0.3);
}
for (int i = 1; i <= 5; ++i) {
col += ball(p, float(i), 0.1);
}
gl_FragColor = vec4(col*0.4, col, col*0.4, 1.0);
}
</script>
<script id="sv" type="x-shader/x-vertex">
attribute vec4 vPosition;
void main (void) {
gl_Position = vPosition;
}
</script>
<canvas></canvas>
CSS:
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
}
JS:
var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ut, st = Date.now(), um, mouseX = 0, mouseY = 0;
function initShaders (gl, vertexShaderId, fragmentShaderId) {
var vertexEl = document.querySelector(vertexShaderId);
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexEl.text);
gl.compileShader(vertexShader);
var fragmentEl = document.querySelector(fragmentShaderId);
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentEl.text);
gl.compileShader(fragmentShader);
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
return program;
}
function initGraphics () {
gl = canvas.getContext('webgl');
var width = canvas.width;
var height = canvas.height;
gl.viewport(0, 0, width, height);
canvas.addEventListener('mousemove', function (e) {
mouseX = e.pageX / canvas.width;
mouseY = e.pageY / canvas.height;
}, false);
var program = initShaders(gl, '#sv', '#sf');
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array([-1, 1, -1, -1, 1, -1, 1, 1]),
gl.STATIC_DRAW
);
var vPosition = gl.getAttribLocation(program, 'vPosition');
gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vPosition);
ut = gl.getUniformLocation(program, 'time');
um = gl.getUniformLocation(program, 'mouse');
var resolution = new Float32Array([canvas.width, canvas.height]);
gl.uniform2fv(gl.getUniformLocation(program, 'resolution'), resolution);
}
function render () {
gl.uniform1f(ut, (Date.now() - st) / 1000);
gl.uniform2fv(um, new Float32Array([mouseX, mouseY]));
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
requestAnimationFrame(render);
}
initGraphics();
render();
18 — Анимированный прелоадер «Квентин Тарантиновская Лама»
HTML разметка:
<div class="logo"></div> <div class="loader"></div>
CSS:
@keyframes walk {
to{background-position:-2177px 0}
}
.loader{width:128px;height:128px;background:url(https://alpack.it/images/loading.png) 0 0;animation:walk 1s steps(17,end) infinite;display:inline-block}
html,body{width:100%;height:100%}
body{background-color:#BC2627;background-image:url(https://alpackit.github.io/images/logo.png);background-size:340px auto;background-repeat:no-repeat;background-position:top left;padding:100px 0;text-align:center;position:relative;height:100vh;width:100%}
19 — Анимированный прелоадер «Бенедикт Овервотч»
HTML разметка:
<div class="overwatch">
<div class="across-line"></div>
<div class="taper"></div>
</div>
<div class="inner-ring3">
<div class="inner-ring3-p1-c">
<div class="p1-an">
<div class="inner-ring3-p1-r"></div>
</div>
</div>
<div class="inner-ring3-p2-c">
<div class="p2-an">
<div class="inner-ring3-p2-r"></div>
</div>
</div>
</div>
<div class="inner-ring"></div>
<div class="inner-ring2">
<div class="inner-ring2-c">
<div class="inner-ring2-r"></div>
</div>
</div>
<div class="outer-ring"></div>
<div class="outer-ring2"></div>
CSS:
html{height:100%}
body{background:#282828}
.overwatch{position:fixed;top:50%;left:50%;width:120px;height:120px;margin:-80px 0 0 -80px;background-color:transparent;border-radius:50%;border:20px solid #B6B8C0}
.overwatch div.across-line:after{content:"";height:4px;width:22px;background:#282828;position:absolute;top:1px;left:1px;transform:rotate(45deg);transform-origin:bottom left;z-index:10}
.overwatch div.across-line:before{content:"";height:4px;width:22px;background:#282828;position:absolute;top:15px;right:-5px;transform:rotate(-45deg);transform-origin:bottom left;z-index:10}
.overwatch div.taper:after{content:"";border-width:0 0 50px 20px;border-style:solid;border-color:transparent transparent #B6B8C0;width:0;height:0;position:absolute;right:62px;bottom:44px}
.overwatch div.taper:before{content:"";border-width:0 20px 50px 0;border-style:solid;border-color:transparent transparent #B6B8C0;width:0;height:0;position:absolute;left:63px;bottom:44px}
.overwatch:after{content:"";height:20px;width:66px;background:#B6B8C0;position:absolute;bottom:-3px;left:11px;transform:rotate(-45deg) skew(-45deg);transform-origin:bottom left}
.overwatch:before{content:"";height:20px;width:66px;background:#B6B8C0;position:absolute;bottom:44px;right:-9px;transform:rotate(45deg) skew(45deg);transform-origin:bottom left}
.inner-ring{position:fixed;top:50%;left:50%;width:180px;height:180px;margin:-100px 0 0 -100px;background-color:transparent;border-radius:50%;background-color:transparent;border-radius:50%;border:10px solid #F9D64A;clip:rect(90px,200px,110px,100px);animation:rotate 3s linear infinite}
.inner-ring1{position:fixed;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -100px;background-color:transparent;border-radius:50%;background-color:transparent;border-radius:50%;animation:rotate21 2s linear infinite}
.inner-ring1 .inner-ring1-c{position:relative;width:100px;height:200px;overflow:hidden}
.inner-ring1 .inner-ring1-r{width:180px;height:180px;border:10px solid transparent;border-radius:50%;position:absolute;top:0;left:0;border-top:10px solid #F9D64A;border-left:10px solid #F9D64A;transform:rotate(0deg);animation:ring11 2s linear infinite}
.inner-ring2{position:fixed;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -100px;background-color:transparent;border-radius:50%;background-color:transparent;border-radius:50%;animation:rotate22 2s linear infinite}
.inner-ring2 .inner-ring2-c{position:relative;width:100px;height:200px;overflow:hidden}
.inner-ring2 .inner-ring2-r{width:180px;height:180px;border:10px solid transparent;border-radius:50%;position:absolute;top:0;left:0;border-top:10px solid #F9D64A;border-left:10px solid #F9D64A;transform:rotate(0deg);animation:ring12 2s linear infinite}
.inner-ring3{position:fixed;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -100px;background-color:transparent;border-radius:50%;background-color:transparent;border-radius:50%;animation:ring6 2s infinite linear}
.inner-ring3 .inner-ring3-p1-c{position:relative;float:left;width:100px;height:200px;overflow:hidden}
.inner-ring3 .inner-ring3-p1-r{width:180px;height:180px;border:10px solid transparent;border-radius:50%;position:absolute;top:0;left:0;border-top:10px solid rgba(189,186,62,0.25);border-left:10px solid rgba(189,186,62,0.25);transform:rotate(-45deg);animation:ring4 2s linear infinite}
.inner-ring3 .p1-an{width:200px;height:200px;position:absolute;top:0;left:0;animation:ring5 2s cubic-bezier(0,0.5,0.5,1) infinite}
.inner-ring3 .inner-ring3-p2-c{position:relative;float:right;width:100px;height:200px;transform:rotate(180deg);overflow:hidden}
.inner-ring3 .inner-ring3-p2-r{width:180px;height:180px;border:10px solid transparent;border-radius:50%;position:absolute;top:0;left:0;border-top:10px solid rgba(189,186,62,0.25);border-left:10px solid rgba(189,186,62,0.25);transform:rotate(-45deg);animation:ring2 2s cubic-bezier(0.5,0,1,0.5) infinite}
.inner-ring3 .p2-an{width:200px;height:200px;position:absolute;top:0;left:0;animation:ring3 2s linear infinite}
.outer-ring{position:fixed;top:50%;left:50%;width:220px;height:220px;margin:-116px 0 0 -116px;background-color:transparent;border-radius:50%;border:6px solid transparent}
.outer-ring:after{content:"";display:block;position:absolute;top:-6px;left:-6px;width:220px;height:220px;border:6px solid rgba(161,164,176,0.5);border-radius:50%;clip:rect(112px,232px,120px,100px);animation:rotate3602 3s linear infinite reverse}
.outer-ring:before{content:"";display:block;position:absolute;top:-6px;left:-6px;width:220px;height:220px;border:6px solid rgba(161,164,176,0.5);border-radius:50%;clip:rect(105px,232px,127px,100px);animation:rotate3603 3s cubic-bezier(0.34,0.07,0.68,0.93) infinite}
.outer-ring2{position:fixed;top:50%;left:50%;width:220px;height:220px;margin:-116px 0 0 -116px;background-color:transparent;border-radius:50%;border:6px solid transparent}
.outer-ring2:after{content:"";display:block;position:absolute;top:-6px;left:-6px;width:220px;height:220px;border:6px solid rgba(161,164,176,0.5);border-radius:50%;transform:rotate(120deg);clip:rect(80px,232px,152px,100px);animation:rotate3602 3s linear infinite}
.outer-ring2:before{content:"";display:block;position:absolute;top:-6px;left:-6px;width:220px;height:220px;border:6px solid rgba(161,164,176,0.5);border-radius:50%;transform:rotate(230deg);clip:rect(60px,232px,172px,100px);animation:rotate360 3s cubic-bezier(0.34,0.07,0.68,0.93) infinite}
@keyframes rotate {
0%{transform:rotate(360deg);clip:rect(96px,200px,108px,100px)}
50%{clip:rect(92px,200px,108px,100px)}
100%{clip:rect(96px,200px,108px,100px);transform:rotate(0deg)}
}
@keyframes rotate21 {
0%{transform:rotate(180deg)}
50%{transform:rotate(270deg)}
100%{transform:rotate(540deg)}
}
@keyframes rotate22 {
0%{transform:rotate(0deg)}
50%{transform:rotate(90deg)}
100%{transform:rotate(360deg)}
}
@keyframes rotate360 {
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
@keyframes rotate3602 {
0%{transform:rotate(120deg)}
100%{transform:rotate(480deg)}
}
@keyframes rotate3603 {
0%{transform:rotate(270deg)}
100%{transform:rotate(-90deg)}
}
@keyframes ring11 {
0%{transform:rotate(-223deg)}
50%{transform:rotate(-170deg)}
100%{transform:rotate(-223deg)}
}
@keyframes ring12 {
0%{transform:rotate(-205deg)}
50%{transform:rotate(-135deg)}
100%{transform:rotate(-205deg)}
}
@keyframes ring2 {
0%{transform:rotate(-45deg)}
35.5%{transform:rotate(135deg)}
100%{transform:rotate(135deg)}
}
@keyframes ring3 {
0%{transform:rotate(0deg)}
50%{transform:rotate(0deg)}
64.5%{transform:rotate(180deg)}
100%{transform:rotate(180deg)}
}
@keyframes ring4 {
0%{transform:rotate(-45deg)}
35.5%{transform:rotate(-45deg)}
50%{transform:rotate(135deg)}
100%{transform:rotate(135deg)}
}
@keyframes ring5 {
0%{transform:rotate(0deg)}
64.5%{transform:rotate(0deg)}
100%{transform:rotate(180deg)}
}
@keyframes ring6 {
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
20 — Анимированный прелоадер «Лего»
HTML разметка:
<div id="animationWindow"></div>
CSS:
body{background-color:#FDC800;overflow:hidden;text-align:center}
body,html{height:100%;width:100%;margin:0;padding:0}
#animationWindow{width:100%;height:100%}
JS:
var animData = {
wrapper: document.querySelector('#animationWindow'),
animType: 'svg',
loop: true,
prerender: true,
autoplay: true,
path: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/LEGO_loader.json'
};
var anim = bodymovin.loadAnimation(animData);
anim.setSpeed(3.4);