Веб-дизайнеру
Веб-разработчику
Дополнительно
Креативная иконка загрузки (loader) на CSS3 + 3 примера!
Скачать
Демо
↓ Также Вам будет интересно ↓
Привет народ, на этот раз наша цель – иконка загрузки. Мы собираемся увидеть и создать три цикла анимации на CSS3, которые могут быть использованы во многих областях, таких как например loader для изображений с JQuery, или при ajax загрузке.
Как видите, мы имеем 3 css анимации. Давайте рассмотрим каждый в отдельности.
Другие современные эффекты с более чем 30 кнопками, смотрите здесь.
→ Первый пример CSS3 анимации
В этом первом примере, необходимо создать только два DIV и благодаря свойству border-radius, они примут форму круга.
|
1 2 |
<div class="ball"></div> <div class="ball1"></div> |
В стилях тоже нет ничего сложного: внешний вид Вы можете видеть ниже, а что касается анимации, то нужно просто использовать свойство transform:rotate.
|
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 |
.ball { background-color: rgba(0,0,0,0); border: 5px solid rgba(0,183,229,0.9); opacity: .9; border-top: 5px solid rgba(0,0,0,0); border-left: 5px solid rgba(0,0,0,0); border-radius: 50px; box-shadow: 0 0 35px #2187e7; width: 50px; height: 50px; margin: 0 auto; -moz-animation: spin .5s infinite linear; -webkit-animation: spin .5s infinite linear; } .ball1 { background-color: rgba(0,0,0,0); border: 5px solid rgba(0,183,229,0.9); opacity: .9; border-top: 5px solid rgba(0,0,0,0); border-left: 5px solid rgba(0,0,0,0); border-radius: 50px; box-shadow: 0 0 15px #2187e7; width: 30px; height: 30px; margin: 0 auto; position: relative; top: -50px; -moz-animation: spinoff .5s infinite linear; -webkit-animation: spinoff .5s infinite linear; } @-moz-keyframes spin { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); }; } @-moz-keyframes spinoff { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(-360deg); }; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); }; } @-webkit-keyframes spinoff { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); }; } |
→ Второй пример CSS3 анимации
Второй пример в html почти ничем не отличается от первого, только в названии класса. Основные отличия Вы можете найти в css стилях.
|
1 2 |
<div class="circle"></div> <div class="circle1"></div> |
В этом примере мы будем делать уклон на вращение, и добавим такую анимацию, которая позволит нам иметь импульсный эффект.
Этот эффект будет работать только в первом круге.
|
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 |
.circle { background-color: rgba(0,0,0,0); border: 5px solid rgba(0,183,229,0.9); opacity: .9; border-right: 5px solid rgba(0,0,0,0); border-left: 5px solid rgba(0,0,0,0); border-radius: 50px; box-shadow: 0 0 35px #2187e7; width: 50px; height: 50px; margin: 0 auto; -moz-animation: spinPulse 1s infinite ease-in-out; -webkit-animation: spinPulse 1s infinite linear; } .circle1 { background-color: rgba(0,0,0,0); border: 5px solid rgba(0,183,229,0.9); opacity: .9; border-left: 5px solid rgba(0,0,0,0); border-right: 5px solid rgba(0,0,0,0); border-radius: 50px; box-shadow: 0 0 15px #2187e7; width: 30px; height: 30px; margin: 0 auto; position: relative; top: -50px; -moz-animation: spinoffPulse 1s infinite linear; -webkit-animation: spinoffPulse 1s infinite linear; } @-moz-keyframes spinPulse { 0% { -moz-transform: rotate(160deg); opacity: 0; box-shadow: 0 0 1px #2187e7; } 50% { -moz-transform: rotate(145deg); opacity: 1; } 100% { -moz-transform: rotate(-320deg); opacity: 0; }; } @-moz-keyframes spinoffPulse { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); }; } @-webkit-keyframes spinPulse { 0% { -webkit-transform: rotate(160deg); opacity: 0; box-shadow: 0 0 1px #2187e7; } 50% { -webkit-transform: rotate(145deg); opacity: 1; } 100% { -webkit-transform: rotate(-320deg); opacity: 0; }; } @-webkit-keyframes spinoffPulse { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); }; } |
→ Третий пример CSS3 анимации
В этом последнем примере мы имеем эффект css3 анимации благодаря свойству transform:scale.
Код html длиннее, чем примеры выше, но это может варьироваться в зависимости от количества блоков, которые Вы хотите вставить.
|
1 2 3 4 5 |
<div id="block_1" class="barlittle"></div> <div id="block_2" class="barlittle"></div> <div id="block_3" class="barlittle"></div> <div id="block_4" class="barlittle"></div> <div id="block_5" class="barlittle"></div> |
Здесь стили гораздо легче отрегулировать, так как мы собираемся применить эффект, с помощью свойства animation:delay, для каждого блока.
|
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 |
.barlittle { background-color: #2187e7; background-image: -moz-linear-gradient(45deg, #2187e7 25%, #a0eaff); background-image: -webkit-linear-gradient(45deg, #2187e7 25%, #a0eaff); border-left: 1px solid #111; border-top: 1px solid #111; border-right: 1px solid #333; border-bottom: 1px solid #333; width: 10px; height: 10px; float: left; margin-left: 5px; opacity: 0.1; -moz-transform: scale(0.7); -webkit-transform: scale(0.7); -moz-animation: move 1s infinite linear; -webkit-animation: move 1s infinite linear; } #block_1 { -moz-animation-delay: .4s; -webkit-animation-delay: .4s; } #block_2 { -moz-animation-delay: .3s; -webkit-animation-delay: .3s; } #block_3 { -moz-animation-delay: .2s; -webkit-animation-delay: .2s; } #block_4 { -moz-animation-delay: .3s; -webkit-animation-delay: .3s; } #block_5 { -moz-animation-delay: .4s; -webkit-animation-delay: .4s; } @-moz-keyframes move { 0% { -moz-transform: scale(1.2); opacity: 1; } 100% { -moz-transform: scale(0.7); opacity: 0.1; }; } @-webkit-keyframes move { 0% { -webkit-transform: scale(1.2); opacity: 1; } 100% { -webkit-transform: scale(0.7); opacity: 0.1; }; } |
Заключение
Я надеюсь, что в этом уроке Вы узнали, как создать простой цикл css3 анимации, используя только CSS3 свойств. Теперь Вы имеете 3 иконки загрузки, которые можете использовать в своих проектах. Желаю успехов! 
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
