| Kosten | Суббота, 07 Июля 2018, 01:50 | Сообщение 1 |
| В этой статье мы собираемся сделать довольно красивый загрузчик на чистом CSS без использования каких-либо JS с небольшой разметкой HTML. Все написаны в CSS, но вы можете найти важные куски кода в знакомых блоках. Теперь, когда оптимизация страниц для дисплеев сетчатки и мобильных устройств становится все более важной, вы найдете множество страниц, предлагающих загрузчики CSS роликов. К сожалению, многие из них довольно тяжелы и требуют, чтобы вы добавляли элементы на свою страницу, чтобы их создать.
Мне удобнее просто добавить класс к элементу, в котором мне нравится показывать прядильщик. В тот же день класс установил анимированный GIF в качестве фонового изображения. С современными браузерами мы можем добиться этого с помощью чистого CSS. Заметили, что существует большое количество загружаемых прядильщиков Javascript для динамического контента, однако технология CSS может сделать то же самое с лучшей производительностью и меньшей кодировкой.
В этом посте я хотел бы поделиться с вами списком выбранных из возможно лучших загрузочных прядильщиков, анимированных чистым CSS для вашего следующего проекта, для вдохновения или для ваших конкретных пользователей. Также их можно загружать и использовать их в качестве индикатора загрузки для вашего динамического контента, такого как загрузчик AJAX, индикатор загрузки ленивого изображения или содержимого, предварительный загрузчик изображений и многое другое.
Здесь приведены несколько примеров progressbars, индикаторов загрузки и CSS-роликов, построенных исключительно с CSS - без JavaScript и без изображений.
Google / Material Design Loader
HTML
Код <div class="quiremen"> <div class="nawsletter-indicates"></div> <div class="nawsletter-indicates"></div> <div class="nawsletter-indicates"></div> </div>
CSS
Код .quiremen {
position: relative;
margin-top: 15px;
width: 100%;
height: 5px;
background-color: #fdba2c;
}
.nawsletter-indicates {
content: "";
display: inline;
position: absolute;
width: 0;
height: 100%;
left: 50%;
text-align: center;
}
.nawsletter-indicates:nth-child(1) {
background-color: #da4733;
animation: loading 3s linear infinite;
}
.nawsletter-indicates:nth-child(2) {
background-color: #3b78e7;
animation: loading 3s linear 1s infinite;
}
.nawsletter-indicates:nth-child(3) {
background-color: #fdba2c;
animation: loading 3s linear 2s infinite;
}
@keyframes loading {
from {left: 50%; width: 0;z-index:100;}
33.3333% {left: 0; width: 100%;z-index: 10;}
to {left: 0; width: 100%;}
}
Демонстрация
Начнем с обозначения как функция transform- одна из многих, которая может модифицировать css непосредственно перед загрузкой на страницу стильным загрузчиком. Эта функция будет вызываться в css, который будет загружен, и возвращаемое значение функции будет загружено на страницу вместо исходного CSS. Если возвращаемое значение transform функции ложно, где стили вообще не будет загружаться на страницу.
Это может быть использовано для не локального развития и производства. Этот параметр в основном используется в качестве обходного пути для CSS столкновений при использовании одного или нескольких.
Windows Style Loader
Приступаем к установке:
HTML
Код <div class="default_behavior"></div>
CSS
Код .default_behavior {
width: 57px;
height: 57px;
margin: 57px;
animation: rotate 1.5s infinite ease-in-out, background 1.5s infinite ease-in-out alternate;
}
@keyframes rotate {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
50% {
transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
}
100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
}
}
@keyframes background {
0% {
background-color: #165a33;
}
50% {
background-color: #7c339a;
}
100% {
background-color: #b12011;
}
}
По умолчанию загрузчик стилей вставляет style элементы в head тег страницы. Если вы хотите, чтобы теги были вставлены где-то еще, вы можете указать селектор CSS для этого элемента здесь.
Если вы нацеливаете IFrame, убедитесь, что у вас есть достаточные права доступа, стили будут введены в заголовок документа содержимого, чтоб все корректно выглядело, и смотрелось красиво и по теме.
Демонстрация
Круговой поворот CSS Spinner
Поскольку анимации CSS теперь так хорошо поддерживаются с использованием анимированного .gif для загрузчика, теперь больше не требуется. Разработчик показал мне, как сделать загрузчик для загрузки CSS, поэтому я решил, что поделился своей техникой с помощью гибкого SCSS mixin шаг за шагом. Ранее мы использовали изображения GIF для создания анимации в течение многих лет, но они не очень нравятся градиентам или изображениям и без альфа канала, без сглаживания, из которых переполнены современные сайты.
Основной трюк полукруга исходит из старого трюка использования границы, которую мы использовали для создания эффекта. Сама форма формируется, но перед оживлением нам нужно применить еще несколько стилей. Эффект «нарастания и убирания» создается с использованием широкого штриха. Инсульт «нажимается» вокруг кругового пути, увеличивая смещений.
HTML
Код <div class="second_transform"></div>
CSS
Код .second_transform {
box-sizing: border-box;
height: 57px;
width: 57px;
margin: 73px;
border: 0px solid #27ae60;
border-radius: 83%;
box-shadow: 0 -19px 0 23px #27ae60 inset;
animation: rotate 1s infinite linear;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Воскресенье, 08 Июля 2018, 23:57 | Сообщение 2 |
|
| Простой и заметный сигнальный погрузчик, который будет показан, пока будет происходить загрузка. Здесь не чего обычного нет. Разве, что можно его изначально выставить под свою палитру цвета. Но главный плюс в нем, он создан на чистой стилистике CSS.
Сигнальный погрузчик
HTML
Код <div class="procesukens-doesn"></div>
CSS
Код .procesukens-doesn {
border: 6px solid #383535;
border-radius: 28px;
height: 28px;
left: 49%;
margin: -14px 0 0 -14px;
opacity: 0;
position: absolute;
top: 50%;
width: 28px;
animation: pulsate 1s ease-out;
animation-iteration-count: infinite;
}
@keyframes pulsate {
0% {
transform: scale(.1);
opacity: 0.0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.2);
opacity: 0;
}
}
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Понедельник, 09 Июля 2018, 00:07 | Сообщение 3 |
|
| Один из самых оригинальных загрузчиков, как плавающие точки, которые идут в темном цвете, что изначально созданы для светлого фона. Сама анимация здесь не похоже на другие, если с левой стороны пошла она, то здесь идет с прерывистой линией. Где в начале в раздроблено все происходит, но по центру страницы она сравниваются и опять идет в повторение в разнобой.
Плавающие точки
HTML
Код <div class="amazing-bananas"> <div></div> <div></div> <div></div> <div></div> </div>
CSS
Код .amazing-bananas div {
width: 19px;
height: 19px;
position: absolute;
left: -19px;
top: 40px;
background-color: #333;
border-radius: 93%;
animation: move 4s infinite cubic-bezier(.2,.64,.81,.23);
}
.amazing-bananas div:nth-child(2) {
animation-delay: 150ms;
}
.amazing-bananas div:nth-child(3) {
animation-delay: 300ms;
}
.amazing-bananas div:nth-child(4) {
animation-delay: 450ms;
}
@keyframes move {
0% {left: 0%;}
75% {left:100%;}
100% {left:100%;}
}
Демонстрация
| | Страна: (RU) |
| |
