Как сделать прелоадер на чистом CSS3.
Всем привет! Сегодня мы рассмотрим, как сделать прелоадер на чистом CSS3.
Раньше, чтобы выполнить такую задачу, нам пришлось бы использовать javascript, однако теперь мы можем делать все на чистом CSS3. И, как это сделать, мы и рассмотрим в этой статье.
Для начала создадим разметку
<div class="pre-loader">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
Как видите, разметка достаточно простая. Все заключено в стилях
Пропишем базовые стили для всех блоков
.pre-loader {
margin: 200px auto;
width: 66px;
height: 50px;
}
.pre-loader > div {
background-color: #34495e;
height: 100%;
width: 10px;
display: inline-block;
}
Создадим анимацию
@keyframes myMove {
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
И еще несколько анимаций
@-webkit-keyframes heightChange {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@keyframes heightChange {
0%, 40%, 100% { transform: scaleY(0.4); }
20% { transform: scaleY(1.0); }
}
Запишем анимацию блокам
.pre-loader > div {
background-color: #fff;
height: 100%;
width: 10px;
display: inline-block;
-webkit-animation: heightChange 1s infinite ease-in-out;
animation: heightChange 1s infinite ease-in-out;
}
И все, что осталось сделать, это добавить задержку анимации каждому блоку, чтобы они анимировались по очереди.
.pre-loader .box2 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.pre-loader .box3 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
.pre-loader .box4 {
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.pre-loader .box5 {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
Вот и все! Вот так просто можно сделать прелоадер на чистом CSS3.
Спасибо за внимание!
-
Создано 12.05.2015 19:00:00
-
Михаил Русаков
Комментарии (17):
А демо есть? Без демо - голый код который думаешь, использовать, не использовать...
Ответить
Результат можно посмотреть на он-лайн генераторах типа данного: http://codepen.io/anon/pen/WvwxpK
Ответить
Все конечно красиво!Понимать бы, что каждое из свойств выполняет!?К примеру: @keyframes myMove
Ответить
Здесь используются абсолютно все изученные ранее свойства. Нет ничего нового. Если Вам не понятно какое-то свойство, вы можете ввести его в поиск(слева сверху на сайте), выбрать нужную статью и прочитать. Конкретно про анимации вот Вам статья - http://myrusakov.ru/animation.html Удачи! :)
Ответить
А как сделать так чтобы он во время загрузки отображался? Подскажите пожалуйста.
Ответить
Не совсем понял, что именно вы имеете ввиду.
Ответить
Ну прелоадер должен отображаться во время загрузки страницы, как это сделать?
Ответить
Ну, это нужно делать с помощью скриптов. В комментариях я Вам не смогу все описать.
Ответить
Если не трудно, сможете написать нужный скрипт для этого прелоадера на сайте https://jsfiddle.net ? Заранее спасибо :)
Ответить
Все, что Вам нужно сделать, это написать простой скрипт с if() {} else {} условием, где запускать прелоадер тогда, когда Вам это нужно. Самый простой способ конкретно с этим прелоадером это добавить к классу pre-loader свойство display со значением none и менять его на display со значением block, когда у Вас что-то происходит на сайте
Ответить
В js не разбираюсь вообще, практики не было, да и в теории не очень. Поэтому и не знаю что да как, вот и попросил Вас. А на счёт display none и block, это ничего не даст, потому что в css нету псевдоэлемента :onload.
Ответить
Причем здесь псевдоэлемент? Когда у Вас начинается какая-то работа(к примеру, вы удаляете 1 миллион записей), которая занимает продолжительное время, Вы просто скриптом меняете свойство display на block. Когда работа заканчивается, Вы опять же скриптом меняете свойство display на none. Вот и все. Чтобы убедиться, что это работает, Вы можете перейти по ссылке http://codepen.io/anon/pen/WvwxpK и там в классе .pre-loader добавить свойство display: none;, убедиться, что прелоадер исчез, вернуть свойство display в значение block и убедиться, что анимация снова работает. Теперь же все, что Вам осталось, это сделать абсолютно то же самое, но не вручную, а с помощью javascript. Попозже скину код.
Ответить
Мне надо чтобы прелоадер показывался во время загрузки. Как на сайте http://uquotes.net, а не во время удаления 1 миллиона записей. Я не знал как вставить этот прелоадер таким образом.
Ответить
Уже передумали спрашивать на форуме?) В любом случае я скидываю Вам код: http://codepen.io/anon/pen/gpMPBq Может быть, пригодится.
Ответить
Вот то, что вы имеете ввиду: http://codepen.io/anon/pen/pJbgYy
Ответить
Уже спросил,а за код спасибо. Но как сделать чтобы у него (прелоадера) был не прозрачный фон, а белый как на сайте http://uquotes.net ? Просто проблема в том что на главной странице (да и вообще на всех страницах) сайта есть картинки (прямо сразу как заходишь на страницу) и они мешают, но убрать их это не вариант. Если нужно поменять какое-то свойство в js коде, то просто скажите какое (сам я в js не разбираюсь вообще). За вашу помощь большое спасибо.
Ответить
Искал прелоадер без использования скрипта, попал сюда. Но у вас просто "как сделать анимацию на css". А для работы прелоадера все-равно нужен скрипт.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.