Анимация при загрузке на CSS3

Анимация при загрузке на CSS3

Когда сайт подгружается, можно сделать так чтобы пользователь не смотрел на появление отдельных частей сайта, а дождался загрузки всего сайта и увидел его полностью загруженный вариант. Для этого используются прогресс бары. И обычно делается так, что основная часть затемняется, а видно только прогресс бар. И сегодня я хочу представить 3 вида анимации при загрузке на CSS3.

Пример 3-х прогресс баров можно увидеть здесь:

Посмотреть примерСкачать

Первый вид прогресс бара

Первый вид прогресс бара

HTML часть

Разметка очень проста. Мы создадим неупорядоченный список и внутри два блока &lt,div&gt, для создания эффекта анимации путем заполнения одного из них:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 &lt,ul id=progress&gt, &lt,li&gt, &lt,div id=layer1 class=ball&gt,&lt,/div&gt, &lt,div id=layer7 class=pulse&gt,&lt,/div&gt, &lt,/li&gt, &lt,li&gt, &lt,div id=layer2 class=ball&gt,&lt,/div&gt, &lt,div id=layer8 class=pulse&gt,&lt,/div&gt, &lt,/li&gt, &lt,li&gt, &lt,div id=layer3 class=ball&gt,&lt,/div&gt, &lt,div id=layer9 class=pulse&gt,&lt,/div&gt, &lt,/li&gt, &lt,li&gt, &lt,div id=layer4 class=ball&gt,&lt,/div&gt, &lt,div id=layer10 class=pulse&gt,&lt,/div&gt, &lt,/li&gt, &lt,li&gt, &lt,div id=layer5 class=ball&gt,&lt,/div&gt, &lt,div id=layer11 class=pulse&gt,&lt,/div&gt, &lt,/li&gt, &lt,/ul&gt,

CSS часть

Здесь мы сначала задаем простые стили для списков, а затем с помощью свойств анимации создаем эффект заполнения:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 ul#progress list-style:none, width:125px, margin:0 auto, padding-top:50px, padding-bottom:50px, ul#progress li float:left, position:relative, width:15px, height:15px, border:1px solid #fff, border-radius:50px, margin-left:10px, border-left:1px solid #111, border-top:1px solid #111, border-right:1px solid #333, border-bottom:1px solid #333, background:#000, ul#progress li:first-child margin-left:0, .running .ball background-color:#2187e7, background-image: -moz-linear-gradient90deg, #2187e7 25%, #a0eaff, background-image: -webkit-linear-gradient90deg, #2187e7 25%, #a0eaff, width:15px, height:15px, border-radius:50px, -moz-transform:scale0, -webkit-transform:scale0, -moz-animation:loading 1s linear forwards, -webkit-animation:loading 1s linear forwards, .running .pulse width:15px, height:15px, border-radius:30px, border: 1px solid #00c6ff, box-shadow: 0 0 5px #00c6ff, position:absolute, top:-1px, left:-1px, -moz-transform:scale0, -webkit-transform:scale0, -webkit-animation:pulse 1s ease-out, -moz-animation:pulse 1s ease-out, #layer1 -moz-animation-delay:0.5s, -webkit-animation-delay:0.5s, #layer2 -moz-animation-delay:1s, -webkit-animation-delay:1s, #layer3 -moz-animation-delay:1.5s, -webkit-animation-delay:1.5s, #layer4 -moz-animation-delay:2s, -webkit-animation-delay:2s, #layer5 -moz-animation-delay:2.5s, -webkit-animation-delay:2.5s, #layer7 -moz-animation-delay:1.5s, -webkit-animation-delay:1.5s, #layer8 -moz-animation-delay:2s, -webkit-animation-delay:2s, #layer9 -moz-animation-delay:2.5s, -webkit-animation-delay:2.5s, #layer10 -moz-animation-delay:3s, -webkit-animation-delay:3s, #layer11 -moz-animation-delay:3.5s, -webkit-animation-delay:3.5s, @-moz-keyframes loading { 0%-moz-transform:scale0,0, 100%-moz-transform:scale1,1, @-webkit-keyframes loading { 0%-webkit-transform:scale0,0, 100%-webkit-transform:scale1,1, @-moz-keyframes pulse { 0% -moz-transform: scale0,opacity: 0, 10% -moz-transform: scale1,opacity: 0.5, 50% -moz-transform: scale1.75,opacity: 0, 100% -moz-transform: scale0,opacity: 0, @-webkit-keyframes pulse { 0% -webkit-transform: scale0,opacity: 0, 10% -webkit-transform: scale1,opacity: 0.5, 50% -webkit-transform: scale1.75,opacity: 0, 100% -webkit-transform: scale0,opacity: 0,

Второй вид прогресс бара

Второй вид прогресс бара

HTML часть

В этом случае мы создадим полосу загрузки под любое разрешение экрана. Для нужен блок с шириной 100%, внутри которого находится полоса загрузки:

1 2 3 &lt,div id=content&gt, &lt,span class=expand&gt,&lt,/span&gt, &lt,/div&gt,

CSS часть

Код в файле стилей еще проще и меньше, чем в предыдущем примере. Это лишь основные стили и вы можете их изменить по своему усмотрению:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 #content width:100%, height:5px, margin:50px auto, background:#000, .fullwidth .expand width:100%, height:1px, margin:2px 0, background:#2187e7, position:absolute, box-shadow:0px 0px 10px 1px rgba0,198,255,0.7, -moz-animation:fullexpand 10s ease-out, -webkit-animation:fullexpand 10s ease-out, @-moz-keyframes fullexpand { 0% width:0px, 100% width:100%, @-webkit-keyframes fullexpand { 0% width:0px, 100% width:100%,

Третий вид прогресс бара

Третий вид прогресс бара

HTML часть

В этом последнем примере мы создадим анимацию на основе свойства opacity:

1 2 3 4 5 6 7 8 9 10 11 12 &lt,ul id=loadbar&gt, &lt,li&gt,&lt,div id=layerFill1 class=bar&gt,&lt,/div&gt,&lt,/li&gt, &lt,li&gt,&lt,div id=layerFill2 class=bar&gt,&lt,/div&gt,&lt,/li&gt, &lt,li&gt,&lt,div id=layerFill3 class=bar&gt,&lt,/div&gt,&lt,/li&gt, &lt,li&gt,&lt,div id=layerFill4 class=bar&gt,&lt,/div&gt,&lt,/li&gt, &lt,li&gt,&lt,div id=layerFill5 class=bar&gt,&lt,/div&gt,&lt,/li&gt, &lt,li&gt,&lt,div id=layerFill6 class=bar&gt,&lt,/div&gt,&lt,/li&gt, &lt,li&gt,&lt,div id=layerFill7 class=bar&gt,&lt,/div&gt,&lt,/li&gt, &lt,li&gt,&lt,div id=layerFill8 class=bar&gt,&lt,/div&gt,&lt,/li&gt, &lt,li&gt,&lt,div id=layerFill9 class=bar&gt,&lt,/div&gt,&lt,/li&gt, &lt,li&gt,&lt,div id=layerFill10 class=bar&gt,&lt,/div&gt,&lt,/li&gt, &lt,/ul&gt,

CSS часть

Как можете видеть ниже, данный пример похож на тот, который мы рассматривали самым первым, но в качестве заполнения в этом случае ппрямоугольники:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 ul#loadbar list-style:none, width:140px, margin:0 auto, padding-top:50px, padding-bottom:75px, ul#loadbar li float:left, position:relative, width:11px, height:26px, margin-left:1px, border-left:1px solid #111, border-top:1px solid #111, border-right:1px solid #333, border-bottom:1px solid #333, background:#000, ul#loadbar li:first-child margin-left:0, .ins .bar background-color:#2187e7, background-image: -moz-linear-gradient45deg, #2187e7 25%, #a0eaff, background-image: -webkit-linear-gradient45deg, #2187e7 25%, #a0eaff, width:11px, height:26px, opacity:0, -webkit-animation:fill .5s linear forwards, -moz-animation:fill .5s linear forwards, #layerFill1 -moz-animation-delay:0.5s, -webkit-animation-delay:0.5s, #layerFill2 -moz-animation-delay:1s, -webkit-animation-delay:1s, #layerFill3 -moz-animation-delay:1.5s, -webkit-animation-delay:1.5s, #layerFill4 -moz-animation-delay:2s, -webkit-animation-delay:2s, #layerFill5 -moz-animation-delay:2.5s, -webkit-animation-delay:2.5s, #layerFill6 -moz-animation-delay:3s, -webkit-animation-delay:3s, #layerFill7 -moz-animation-delay:3.5s, -webkit-animation-delay:3.5s, #layerFill8 -moz-animation-delay:4s, -webkit-animation-delay:4s, #layerFill9 -moz-animation-delay:4.5s, -webkit-animation-delay:4.5s, #layerFill10 -moz-animation-delay:5s, -webkit-animation-delay:5s, @-moz-keyframes fill { 0% opacity:0, 100% opacity:1, @-webkit-keyframes fill { 0% opacity:0, 100% opacity:1,

Вывод

В этой статье мы создали простые, но симпатичные прогресс бары. Если вы применяете данный способ загрузки, то возможно вам пригодятся эти решения. А работать анимация полноценно будет в современных браузерах: Mozilla, Safari и Chrome.

Рейтинг
( Пока оценок нет )
Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: