Прелоадер для сайта ▶ как сделать?
Сегодня Вы научитесь делать прелоадер на страницу. Прелоадер это анимация, которая отображается пользователю, чтобы он не скучал, пока грузится сайт. Рекомендую посмотреть видео-урок «Хауди Хо» о том как сделать 2 типа прелоадера:
- Который просто анимируется до тех пор, пока страница не загрузится;
- Который отображает процент загруженности.
Я сделал интересную подборку 20-и готовых решений, которые можно использовать в своем проекте, просто скопировав код:
1 - Анимированный прелоадер «Вращающийся Кот»
HTML разметка:
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 разметка:
Loading . . .
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 разметка:
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 разметка:
LoadingWaitPleaseCSS:
@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 разметка:
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 разметка:
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 разметка:
G o o g l e
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 разметка:
LOADINGCSS:
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 разметка:
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 разметка:
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 разметка:
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 разметка:
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 разметка:
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 разметка:
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 разметка:
LoadingCSS:
#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 разметка:
Loading…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 разметка:
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 разметка:
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 разметка:
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 разметка:
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);
Похожие статьи:
Вертикальное hover hide меню для сайта на HTML и CSS Стилизация Input File Стилизация checkbox и radio Учим HTML5 Canvas за 30 минут Красивые заголовки ▶ подборка Красивые CSS3 кнопки с анимацией и hover эффектами Как скрыть элементы в Bootstrap | Классы .hidden и .visible Адаптивный дизайн для сайта через @media
Комментарии ()