Css эффект загрузки страницы: Эффекты предзагрузки страниц на html и css (30 штук) – Анимация загрузки страницы на CSS

Всем привет! Сегодня мы рассмотрим еще один классный пример анимации загрузки страницы. У некоторых Web сайтов загрузка страницы длится долго и посетитель не дожидаясь долгожданного контента покидает сайт. Хорошим отвлекающим эффектом является анимация, она же и придает некую красоту для сайта.

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

Похожие статьи на эту тему:

HTML

Создаем <div> состоящий из 3-х внутренних <div> которые отвечают за отображение эффекта загрузки страницы.

HTML КОД

1
2
3
4
5

<div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

Данный код встроен в саму Web страницу

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
95
96
97

body{
    background: #555;
}
 
.loading-wrap {
    width: 60px; 
    height: 60px;
    position: absolute;
    top: 50%; 
    left: 50%;
    margin: -30px 0 0 -30px;
    background: #777;      
    -moz-animation: rotation ease-in-out 2s infinite;
    -webkit-animation: rotation ease-in-out 2s infinite;
    -ms-animation: rotation ease-in-out 2s infinite;
    animation: rotation ease-in-out 2s infinite;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}
 
.triangle1, .triangle2, .triangle3 {
    border-width: 0 20px 30px 20px;
    border-style: solid;
    border-color: transparent;
    border-bottom-color: #67cbf0;
    height: 0; width: 0;
    position: absolute;
    left: 10px; 
    top: -10px;
    -moz-animation: fadecolor 2s 1s infinite;
    -webkit-animation: fadecolor 2s 1s infinite;
    -ms-animation: fadecolor 2s 1s infinite;
    animation: fadecolor 2s 1s infinite;
}
 
.triangle2, .triangle3 {
    content: '';
    top: 20px; 
    left: 30px;
    -moz-animation-delay: 1.1s;
    -webkit-animation-delay: 1.1s;
    -ms-animation-delay: 1.1s;
    animation-delay: 1.1s;
}
 
.triangle3 {
    left: -10px;
    -moz-animation-delay: 1.2s;
    -webkit-animation-delay: 1.2s;
    -ms-animation-delay: 1.2s;
    animation-delay: 1.2s;
}
 
@-moz-keyframes rotation {
    0% {-moz-transform: rotate(0deg);}
    20% {-moz-transform: rotate(360deg);}
    100% {-moz-transform: rotate(360deg);}	
}
 
@-webkit-keyframes rotation {	
    0% {-webkit-transform: rotate(0deg);}
    20% {-webkit-transform: rotate(360deg);}
    100% {-webkit-transform: rotate(360deg);}
}
 
@-ms-keyframes rotation {
    0% {-webkit-transform: rotate(0deg);}
    20% {-webkit-transform: rotate(360deg);}
    100% {-webkit-transform: rotate(360deg);}	
}		
 
@keyframes rotation {
    0% {transform: rotate(0deg);}
    20% {transform: rotate(360deg);}
    100% {transform: rotate(360deg);}
}          
 
@-moz-keyframes fadecolor {	
    0% {border-bottom-color: #eee;}
    100%{border-bottom-color: #67cbf0;}
}
 
@-webkit-keyframes fadecolor {
    0% {border-bottom-color: #eee;}
    100%{border-bottom-color: #67cbf0;}
}
 
@-ms-keyframes fadecolor {
    0% {border-bottom-color: #eee;}
    100% {border-bottom-color: #67cbf0;}
}		
 
@keyframes fadecolor {
   0% {border-bottom-color: #eee;}
   100%{border-bottom-color: #67cbf0;}
}

Как видите не такой уж и сложный эффект, теперь загрузка страницы стала еще интереснее для посетителей.

Успехов!

С Уважением, Бышкин Константин

Анимация загрузки страницы с помощью CSS

Если говорить о самом preloaders, то больше вам известный как загрузчики, что каждый кто зашел на сайт будет наблюдать. Все зависит от скорости интернет, пока вы смотрите на этот загрузчик, то по сути страница полностью загружается, в то время как он пропадет, то вам откроется полностью загруженная страница, на которую вы перешли. Предварительные загрузчики часто представляют собой как простую, так и сложную анимационную фигуру, которая безусловно используется для того, чтобы посетители или гости развлекались во время обработки на ресурсе.

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

Приступаем к установке:

HTML

Код

<body onload=»zarnukdsa()»>
  <h2>Привет</h2>
  <div>
  <div></div>
  </div>
</body>

Код

function loader(){
  loader = setTimeout(showPage, 36000)
}
function showPage(){
  document.getElementById(«Loading»).style.display = «none»
}

Код

#Sarnukansuv>div:before{width:100%;height:100%;animation:zarnukdsa 5s linear infinite}
#Sarnukansuv>div:after{
  width:148px;
  height:148px;
  top:25px;
  left:25px;
  animation:zarnukdsa 5s linear infinite reverse
  }
@keyframes zarnukdsa{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
  }

Демонстрация

19 CSS спиннеров анимации загрузки

Подборка бесплатных HTML и CSS спиннеров анимации загрузки.

• Автор: Зено Роча, 5 июля 2017 года.
• Ссылки: демо-версия и код.
• Создано с помощью: HTML / CSS.

О коде

Совместимые браузеры: Google Chrome, Firefox, Opera, Safari.

• Автор: fox_hover, 14 марта 2017 года.
• Ссылки: демо-версия и код.
• Создано с помощью: HTML / CSS (SCSS).

О коде

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

Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

Зависимости: Google Fonts, Reset.css, Autoprefixer.js

• Автор: Milk Studio, 2 июня 2016 г.
• Ссылки: демо-версия и код.
• Создано с помощью: HTML / CSS (SCSS).

О коде

Красивая HTML и CSS анимация кубика сахара.

Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

Зависимости: Autoprefixer.js.

• Автор: Юлиан Савин, 27 апреля 2016 г.
• Ссылки: демо-версия и код.
• Создано с помощью: HTML (Pug) / CSS.

О коде

Простой CSS индикатор загрузки. Он создан с помощью CSS и минимального количества HTML-разметки.

Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

• Автор: Адитая Брандари, 4 марта 2016 г.
• Ссылки: демо-версия и код.
• Создано с помощью: HTML / CSS (SCSS).

О коде

Анимация загрузки, созданная на чистом CSS.

Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

• Автор: Фабио Оттавиани, 22 января 2016 г.
• Ссылки: демо-версия и код.
• Создано с помощью: HTML / CSS (SCSS).

О коде

Современный SVG спиннер, созданный на основе CSS.

Совместимые браузеры: Google Chrome, Edge, Firefox, Opera, Safari.

Зависимости: Reset.css, Autoprefixer.js

• Автор: neil tron 18 июня, 2015 года.
• Ссылки: демо-версия и код.
• Создано с помощью: HTML / CSS / JavaScript.

О коде

Анимация загрузки, которая выводит SVG-треугольник, а затем преобразует его в многоугольник и обратно.

Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

Зависимости: TweenMax.js, Underscore.js.

• Автор: Фабрицио Бьянки, 23 марта 2015 г.
• Ссылки: демо-версия и код.
• Создано с помощью: HTML (Haml) / CSS.

О коде

Пиксельная круговая анимация загрузки с использованием свойства box-shadow.

Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

Зависимости: Reset.css, Prefixfree.js.

• Автор: Мартин ван Дрил, 17 марта 2015 г.
• Ссылки: демо-версия и код.
• Создано с помощью: HTML / CSS.

О коде

Красивый эффект CSS спиннера анимации загрузки.

Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

• Автор: Хьюго Виледаль, 21 октября 2014 г.
• Ссылки: демо-версия и код.
• Создано с помощью: HTML / CSS (SCSS).

О коде

Простой повторяющийся спиннер с красивой анимацией.

Совместимые браузеры: Google Chrome, IE, Firefox, Opera, Safari.

• Автор: Меттью Роэль, 19 сентября 2014 г.
• Ссылки: демо-версия и код.
• Создано с помощью: HTML (Haml) / CSS (Sass).

О коде

Крутая CSS3 анимация загрузки.

Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

Зависимости: Google Fonts, Autoprefixer.js.

• Автор: Омер Фатих, 22 августа 2014 г.
• Ссылки: демо-версия и код.
• Создано с помощью: HTML / CSS (Less).

О коде

Точечный сппиннер, созданный на чистом CSS.

Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari/

• Автор: Макс Руйгеваард, 21 августа 2014 г.
• Ссылки: демо-версия и код.
• Создано с помощью: HTML / CSS.

О коде

Простой спиннер, созданный с помощью HTML и CSS-анимации.

Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

Зависимости: Autoprefixer.js.

• Автор: Кети ДеКора, 28 мая 2014 г.
• Ссылки: демо-версия и код.
• Создано с помощью: HTML (Haml) / CSS (SCSS).

О коде

Анимация загрузки на основе CSS 3.

Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

Зависимости: Reset.css, Autoprefixer.js, Modernizr.js.

• Автор: Игор Амадо, 23 февраля 2014 г.
• Ссылки: демо-версия и код.
• Создано с помощью: HTML (Haml) / CSS (SCSS).

О коде

HTML и CSS спиннер.

Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

Зависимости: Reset.css, Prefixfree.js.

• Автор: Мэтт Систо, 3 декабря 2013 г.
• Ссылки: демо-версия и код.
• Создано с помощью: HTML / CSS (SCSS).

О коде

Простой CSS-спиннер анимации загрузки, созданный с помощью SASS.

Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

Зависимости: Normalize.css

• Автор: Кристиан Денни Сторгард, 4 июля 2013 г.
• Ссылки: демо-версия и код.
• Создано с помощью: HTML / CSS.

О коде

CSS3-спинннер с дисками, вращающимися с разной скоростью.

Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

• Автор: Хаким Эль Хатта, 7 июля 2013 г.
• Ссылки: демо-версия и код.
• Создано с помощью: HTML (Haml) / CSS (SCSS).

О коде

Еще один CSS-спиннер анимации загрузки. Непрактичный, так как в нем используется много элементов DOM.

Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

• Автор: Ноэль Дельгадо, 3 апреля 2013 г.
• Ссылки: демо-версия и код.
• Создано с помощью: HTML (Haml) / CSS (SCSS).

О коде

Стрелки часов созданы с помощью псевдоэлементов :before и :after. Анимация применяется к псевдоэлементам.

Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

Зависимости: Normalize.css, Autoprefixer.js.

Данная публикация представляет собой перевод статьи «19 CSS Spinners» , подготовленной дружной командой проекта Интернет-технологии.ру

13 крутых эффектов загрузки страницы

Рассмотрим, какие эффекты можно применить во время загрузки страницы. Такие эффекты довольно нетривиальны. Для создания анимированной части, используем библиотеку Snap.svg. Эта библиотека позволяет создавать любые формы, пригодные к использованию в качестве анимации загрузки. Основной целью является создание слоя, отображающегося во время загрузки, чтобы пользователь видел готовую страницу, а не процесс ее загрузки.

Эффекты загрузки страницы, смотреть и скачать:

ДемоСкачать

Для этого сначала подключим SVG:

Благодаря атрибуту class с именем pageload-overlay блочный элемент <div>  будет отображаться на всей странице. В это время будет происходить загрузка запрашиваемой пользователем страницы. Присвоив элементам width и height тега <svg> значение 100%, мы зададим отображение нашего слоя на весь экран.

Используя CSS, присвоим нашему слою состояние по умолчанию. В этом состоянии он должен быть скрыт.

Заданное значение position:absolute отображает наш блок поверх содержимого страницы, что, собственно, и требовалось для того, чтобы закрепить слой поверх содержимого запрашиваемой страницы.

Осталось подключить пару скриптов:

Данные эффекты загрузки страницы можно применять на целевых страницах (лендингах). Добавлять такие эффекты на другие типы сайтов обычно не рекомендуют. Однако, как показывает практика, такие эффекты допустимы, в зависимости от дизайна сайта.

Возможно, Вам будет интересно ↓↓↓

Индикатор загрузки страницы с помощью CSS3

scss.centered, #spin-wrap, #spin:after {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

scss.round, #spin-wrap, #spin:after {

border-radius: 50%;

}

@keyframes spin {

0% {

transform: rotate(90deg);

}

100% {

transform: rotate(-270deg);

}

}

@keyframes reset {

0% {

transform: translate(-50%, -50%) rotate(-90deg);

}

100% {

transform: translate(-50%, -50%) rotate(270deg);

}

}

#spin-wrap {

width: 100px;

height: 100px;

background: #187ed8;

box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3), 0 3px 6px rgba(0, 0, 0, 0.3), 0 4px 2px -2px rgba(0, 0, 0, 0.3);

}

#spin {

position: absolute;

top: 0;

left: 0;

width: 50%;

height: 100%;

border-radius: 100% 0 0 100% / 50%;

background: url(«data:bg») no-repeat;

background-size: 200% 100%;

transform-origin: right center;

animation: spin 1.5s linear infinite;

}

#spin:before {

content: »;

display: block;

position: absolute;

top: 0;

left: 100%;

width: 100%;

height: 100%;

border-radius: 0 100% 100% 0 / 50%;

background: url(«bg») no-repeat right center;

background-size: 200% 100%;

transform-origin: left center;

animation: spin 1s linear infinite reverse;

}

#spin:after {

left: 100%;

content: »;

display: block;

width: 184%;

height: 92%;

background: aliceblue;

box-shadow: inset 0 5px 20px rgba(0, 0, 0, 0.3), inset 0 3px 6px rgba(0, 0, 0, 0.3), inset 0 4px 2px -2px rgba(0, 0, 0, 0.3);

animation: reset 1.5s linear infinite;

}

body {

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

background: aliceblue;

box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3);

}

Создание эффектов загрузки страницы

Сегодня мы создадим набор оригинальных эффектов загрузки страницы. Основная задача – показать накрывающий слой с интересной анимацией формы, пока загружается новое содержимое.

Демонстрация работы – Скачать исходный код

Если вы были на сайтах с отличных дизайном Nicolas Zezuka и Active Theory, то могли заметить интересную анимацию загрузки, которая происходит перед тем, как будет показано новое содержимое. Этот вид стиля загрузки довольно популярен сейчас, и мы хотели бы вдохновить вас на эксперименты. Основная задача — анимировать форму накрывающего слоя в окне браузера и показать индикатор активности. Когда новое содержимое будет загружено, произойдет обратная анимация формы накрывающего слоя, чтобы показать страницу. Мы используем анимированные SVG с Snap.svg для эффектов, так как это позволит  создать сложные формы и интересные перетекающие переходы.

Пожалуйста, обратите внимание на то, что эти примеры служат только для вдохновения. Мы не использовали запасных вариантов, и мы только изображаем динамическую загрузку нового содержания. Также обратите внимание, что мы анимируем SVG и псевдоэлементы, а это может отображаться неправильно в некоторых браузерах.

Мы показываем накрывающий слой загрузки, определяя анимацию на пути, который мы указали в следующем SVG:

<div data-opening="M 0,0 80,-10 80,60 0,70 0,0" data-closing="M 0,-10 80,-20 80,-10 0,0 0,-10">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 60" preserveAspectRatio="none">
<path d="M 0,70 80,60 80,80 0,80 0,70"/>
</svg>
</div><!-- /накрывающий слой загрузки -->

Мы указываем изначальный путь, который не видим в окне браузера в SVG, и открывающий и закрывающий пути в признаках данных блока pageload-overlay. Как Вы видите, мы используем маленький viewBox, но растягиваем изображение до 100% ширины и высоты окна, не сохраняя пропорций. Если мы не определим закрывающий путь, то произойдет обратная анимация по изначальному пути.

Заметьте, что можно добавить больше, чем один путь, разделив их точкой с запятой, что позволит воспроизвести поэтапную анимацию SVG изображения, как в первом примере.

Мы задаем блоку накрывающего слоя фиксированное положение, закрывающее всю страницу, и используем индикатор загрузки, сделанный с помощью чистого CSS, задавая стили псевдоэлементам :before и :after блока.

.pageload-overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
visibility: hidden;
}

.pageload-overlay.show {
visibility: visible;
}

.pageload-overlay svg {
: absolute;
: 0;
: 0;
}
.pageload-overlay svg path {
fill: #fff;
}

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

Вы могли заметить, что анимация круга также сделана анимированием от одного пути к другому, конечно, существуют и другие способы, как это можно сделать, например, с помощью масштабирования, но мы использовали следующие значения, чтобы круг был точно адаптивным, но не растягивался, как другие формы:

width="100%" viewBox="0 0 80 60" preserveAspectRatio="xMidYMid slice"

Использование свойства slice сохранит пропорции, смасштабировав изображение, так что все окно браузера будет закрыто viewBox.

Мы создали только несколько эффектов, но, как вы видите, возможности бесконечны.

Мы надеемся, вам понравились эти эффекты, и они вдохновят вас.

Демонстрация работы – Скачать исходный код

Автор урока Mary Lou

Перевод — Дежурка

Смотрите также:

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

Время чтения: 3 мин.

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

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

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

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

HTML часть

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<ul> <li> <div></div> <div></div> </li> <li> <div></div> <div></div> </li> <li> <div></div> <div></div> </li> <li> <div></div> <div></div> </li> <li> <div></div> <div></div> </li> </ul>

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-gradient(90deg, #2187e7 25%, #a0eaff); background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff);   width:15px; height:15px; border-radius:50px; -moz-transform:scale(0); -webkit-transform:scale(0);   -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:scale(0); -webkit-transform:scale(0);   -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:scale(0,0);} 100%{-moz-transform:scale(1,1);} }   @-webkit-keyframes loading { 0%{-webkit-transform:scale(0,0);} 100%{-webkit-transform:scale(1,1);} }     @-moz-keyframes pulse { 0% {-moz-transform: scale(0);opacity: 0;} 10% {-moz-transform: scale(1);opacity: 0.5;} 50% {-moz-transform: scale(1.75);opacity: 0;} 100% {-moz-transform: scale(0);opacity: 0;} }   @-webkit-keyframes pulse { 0% {-webkit-transform: scale(0);opacity: 0;} 10% {-webkit-transform: scale(1);opacity: 0.5;} 50% {-webkit-transform: scale(1.75);opacity: 0;} 100% {-webkit-transform: scale(0);opacity: 0;} }

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

HTML часть

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

1 2 3

<div> <span></span> </div>

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 rgba(0,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

<ul> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> </ul>

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-gradient(45deg, #2187e7 25%, #a0eaff); background-image: -webkit-linear-gradient(45deg, #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.

Успехов!

Источник: alessioatzeni.com