Все для веб-дизайнера
Индикатор загрузки страницы с помощью CSS3
Вы создаете сайт, при этом вы понимаете, что сайт получился достаточно весомый, красивые эффекты, качественная графика требует большего времени загрузки чем обычный сайт, для этого существует маленькая хитрость, чтобы пользователь не смотрел ваш сайт по частям можно реализовать индикатор загрузки, он будет отображаться пока сайт подгружается в фоновом режиме, в данном уроке мы рассмотрим как можно реализовать достаточно простой индикатор с помощью только css.
Индикатор округлой формы, по кольцу индикатора будут двигаться две разнонаправленные полоски и эффектом затухания, благодаря правильно подобранным теням эффект смотрится достаточно эффектно. И так, приступим.
Шаг 1. HTML
Разметка будет элементарной, так как у нас есть два элемента, первый — это углубленная точка, которая будет находится в середине индикатора, а вторая окружность, синего оттенка с градиентным оттенком который будет анимироваться, по сути мы создаем визуальное наложение двух элементов.
|
1 2 |
<div id='spin-wrap'> <div id='spin'> |
Теперь перейдем к следующему шагу.
Шаг 2. 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 |
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); } |
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Интересно:
| Опубликовал admin 12.06.2013 в 10:57, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
Загрузка ...