Обнинск сайт
  • Услуги
  • Портфолио
  • Шаблоны
  • Блог
+7 (999) 735-45-78
  • Главная
  • Блог программиста
  • HTML и CSS
  • Прелоадер для сайта ▶ как сделать?

Прелоадер для сайта ▶ как сделать?

Прелоадер для сайта ▶ как сделать?
06 июня 2018, 20:50    Alex HTML и CSS 0    2222 0

Сегодня Вы научитесь делать прелоадер на страницу. Прелоадер это анимация, которая отображается пользователю, чтобы он не скучал, пока грузится сайт. Рекомендую посмотреть видео-урок «Хауди Хо» о том как сделать 2 типа прелоадера:

  1. Который просто анимируется до тех пор, пока страница не загрузится;
  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 разметка:


	

		

		

			
Loading

			
Wait

			
Please

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 разметка:

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»

прелоадер 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»

прелоадер Minecraft

HTML разметка:


  
LOADING

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»

прелоадер 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»

прелоадер 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 разметка:


  

    

    

    

    

    

    

    

    

    

    

    

    

    

    
Loading

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 разметка:


  
  
  
    
  
  
    
  


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);

Похожие статьи:

Анимированный фон с плавающими облаками
 Красивое оформление 404 страницы
 Вертикальное hover hide меню для сайта на HTML и CSS
 Стилизация Input File
 Стилизация checkbox и radio
 Учим HTML5 Canvas за 30 минут
 Красивые заголовки ▶ подборка
 Красивые CSS3 кнопки с анимацией и hover эффектами
 Как скрыть элементы в Bootstrap | Классы .hidden и .visible
 Адаптивный дизайн для сайта через @media

Комментарии ()

    Вы должны авторизоваться, чтобы оставлять комментарии.

    Вы можете авторизоваться на сайте через:
    YandexVkontakte

    Блог программиста

    • PHP скрипты8
    • Javascript & jQuery10
    • HTML и CSS11
    • MODX Revo6
    • WordPress1
    • Уроки для фрилансеров4

    Продвижение сайтов

    • Новичкам3

    Мои инструменты

    • Дешевый и надежный хостинг
    • Покупка статей для сайта
    Современные шаблоны для сайтов на русском

    Последние комментарии

    Лебедев Евгений 20 мая 2019, 12:03
    Защищенная Авторизация и Регистрация на PHP + MySQL через PDO 81
    Михаил Шилов 30 апреля 2019, 23:45
    Стилизация checkbox и radio 1
    Андрей Карманов 08 марта 2019, 08:05
    Пишем на SQL без SQL: основы по RedBean PHP 13
    Денис 27 февраля 2019, 14:55
    WebParser - автоматический парсер контента 3
    Алексей Власов 08 февраля 2019, 21:50
    Удобная форма обратной связи без перезагрузки страницы 10
    Alexander Larin 14 января 2019, 12:31
    Как попросить посетителей своего сайта отключить AdBlock 1
    Леонид Кобяшев 26 декабря 2018, 20:20
    Обратный таймер на JavaScript 1
    Алексей Власов 16 октября 2018, 14:27
    Универсальный и очень простой PHP парсер 10
    Алексей Власов 13 октября 2018, 18:57
    Бесконечное сохранение ресурсов в MODX 2

    Как со мной связаться

    Контактное лицо: Алексей

    Телефон: +7 (999) 735-45-78

    E-mail: info@obninsksite.ru

    Skype: info_778267

    Режим работы

    Понедельник-Пятница: 10.00 - 19.00

    Суббота-Воскресенье: Выходной


    Вверх

    Быстрые ссылки

    • Заказать сайт в Обнинске
    • Услуги программиста
    • Шаблоны сайтов
    • Блог программиста
    • Карта сайта