Анимированный прелоадер на чистом СSS · Блог веб-студии Keengo
<div> <div> <div> <div></div> <div></div> <div></div> </div> <p>Loading</p> </div> </div>
/* Этот код для примера */
.site-container {
position: relative;
height: 300px;
width: 100%;
}
/* Далее код прелоадера */
.loader {
position: absolute; /* Заменить на fixed, чтобы прелоадер был на весь экран */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 100;
}
.loader p {
margin: 1em 0 0 0;
font-size: 16px;
}
.logo {
width: 100px;
height: 100px;
box-sizing: border-box;
position: relative;
background-color: white;
}
.
logo::before,
.logo::after {
z-index: 1;
box-sizing: border-box;
content: '';
position: absolute;
border: 4px solid transparent;
width: 0;
height: 0;
animation-direction: alternate;
animation-timing-function: linear;
}
.logo::before {
top: 0;
left: 0;
animation: border-before 1.5s infinite;
animation-direction: alternate;
}
.logo::after {
bottom: 0;
right: 0;
animation: border-after 1.5s infinite;
animation-direction: alternate;
}
.logo > div {
position: absolute;
opacity: 0;
}
.white {
border-left: 4px solid #333;
top: 0;
bottom: 0;
right: 0;
width: 0;
animation: white 1.5s infinite;
animation-direction: alternate;
}
.orange {
border-top: 4px solid #333;
left: 0;
bottom: 0;
right: 0;
height: 0;
background-color: #1967c3;
animation: orange 1. 5s infinite;
animation-direction: alternate;
}
.red {
border-right: 4px solid #333;
top: 0;
bottom: 0;
left: 0;
width: 0;
background-color: #EA5664;
animation: red 1.5s infinite;
animation-direction: alternate;
}
@keyframes border-before {
0% {
width: 0;
height: 0;
border-top-color: #333;
border-right-color: transparent;
}
12.49% {
border-right-color: transparent;
}
12.5% {
height: 0;
width: 100%;
border-top-color: #333;
border-right-color: #333;
}
25%,
100% {
width: 100%;
height: 100%;
border-top-color: #333;
border-right-color: #333;
}
}
@keyframes border-after {
0%,
24.99% {
width: 0;
height: 0;
border-left-color: transparent;
border-bottom-color: transparent;
}
25% {
width: 0;
height: 0;
border-left-color: transparent;
border-bottom-color: #333;
}
37. 
logo::before,
.logo::after {
z-index: 1;
box-sizing: border-box;
content: '';
position: absolute;
border: 4px solid transparent;
width: 0;
height: 0;
animation-direction: alternate;
animation-timing-function: linear;
}
.logo::before {
top: 0;
left: 0;
animation: border-before 1.5s infinite;
animation-direction: alternate;
}
.logo::after {
bottom: 0;
right: 0;
animation: border-after 1.5s infinite;
animation-direction: alternate;
}
.logo > div {
position: absolute;
opacity: 0;
}
.white {
border-left: 4px solid #333;
top: 0;
bottom: 0;
right: 0;
width: 0;
animation: white 1.5s infinite;
animation-direction: alternate;
}
.orange {
border-top: 4px solid #333;
left: 0;
bottom: 0;
right: 0;
height: 0;
background-color: #1967c3;
animation: orange 1.
Анимация загрузки страницы.
Модуль Preloader 03.02.2014Для одного из проектов понадобилось как-то реализовать красивую имитацию загрузки страницы и прежде чем писать самому, решил посмотреть, что есть на эту тему из существующего. В результате не долго поиска наткнулся вот на этот проект — Pace, который полностью меня устроил в частности функционала, подробной документации и что, как оказалось в дальнейшем – автоматически определяет степень «загрузки страницы», что не могло ни радовать. Демонстрацию работы вы можете посмотреть здесь.
Как вы могли заметить, тем оформления там достаточно много – поэтому решил написать модуль под Drupal 7, который позволял бы пользователям самостоятельно выбирать тему оформления, а так же цветовое оформление темы.
А теперь подробнее о модуле – Preloader. Как вы наверное уже поняли, что на D.org он опять же не появится, а будет находится на этом сайте – доступный для скачивания любому пользователю.
Установка, такая же как и у всех модулей – только для работоспособности вам необходим модуль jQuery_update, скачать его можно здесь, ну и минимально поддерживаемая версия jquery – 1.
После активации модуля, в разделе «Конфигурация», у вас появится новый раздел – «Preloader Settings»
Не забываем так же изменить используемую версию Jquery на 1.7
Теперь о настройках модуля Preloader.
Модуль имеет всего лишь 2 основные настройки,
- Выбор темы оформления
- Ввод цвета
Список доступных тем:
- Minimal
- Flash
- Barber Shop
- Mac OSX
- Flat Top
- Big Counter
- Corner Indicator
- Bounce
- Loading Bar
- Center Cicle
- Center Atom
- Center Radar
- Center Simple
Список доступных тем
Замечу, что тема «Mac OSX» — не содержит цветовое оформление, поэтому ввод цвета для данной темы не доступен:
Цвета необходимо вводить в шестнадцатиричном формате (HEX), например: cc0000.
Замечу, что цвета вводятся без символа «#» — по умолчанию цвет будет иметь значение 29d.
Вроде с настройками разобрались. Обо всех замеченных багах – просьба писать в комментариях.
Скачать модуль Preloader:
версия 1.0
модуль preloader
Вывод поля из профиля пользователя в ноду
Drupal 8 – Отправка результатов заполнения формы в чат Telegram
Миграция контента в Drupal 8 с использованием пользовательского интерфейса
Обновляем версию Drupal
Работаем с drupal через drush
Ускоряем загрузку страниц сайта в Drupal 7. Модуль Boost
Создаем табы для административных страниц своего модуля в Drupal 7
Drupal 8 — Cоздание страниц администрирования (реализация локальных задач)
Form API — часть 1. Базовые понятия и создание простейшей формы.
Список значений «info» файла
Drupal 8 – Необходимая среда разработки под Windows
Отдаем файл на скачивание пользователям сайта — с задержкой
Узнавай о новых статьях сайта — первым.
Просто подпишись на рассылку.
Лучшие веб -сайты для предварительных загрузки — Webflow
Сделано в Webflow
PreloaderallanimationInteractionScmseCommercePortfolio
Наиболее понравился
. Робин Гранквист
Подробнее
Redis Agency Webflow
Redis Agency
Подробнее
Предварительную анимацию
CJ Hersh
Подробности просмотра
Dylan Brouwer Portfolio
Dylan Brouwer
View
Bertani Webflow Rebuild-Horizontal Scrolling Websity
. Наклейки
Timothy Ricks
Подробнее
Lions Slider WebGl ⟋ webgl
Federico
Подробнее
Lisa Ribeiro Portfolio Rebuild
Chintan Savaliya
Подробности просмотра
Philipp Girzalsky Portfolio 2023
Philipp Girzalsky
Подробности
Loftgarten Inspired Animation Animation
ilja van eck
.
Детали. Out
SketchzLab
Подробнее
Sleek Site Preloader [Cloneable]
Marcin Rzymek
Подробнее
Lottie pre-loader
Pretty Nice Websites
Подробности просмотра
Солнечный Eclipse-Loader
OSED
Подробности просмотра
Фотография дизайн 2 Клонируемый герой раздел
Ths-Герой раздел
Подробности Посмотреть
Photograph THS — The Hero Раздел
Подробнее
svg-loaders
Иван
Почему предварительный загрузчик хорош для вашего сайта | by Imia Hazel
Если ваши страницы насыщены контентом, вы, несомненно, выиграете от предварительной загрузки веб-сайта.
Эта проблема может возникать на страницах с бесконечной прокруткой, а на любом веб-сайте имеется более нескольких основных страниц. Кроме того, каждый скрипт, плагин и запрос к базе данных будут способствовать увеличению времени загрузки. Когда это становится проблемой, некоторые веб-сайты выбирают предварительный загрузчик вместо того, чтобы тратить усилия на уменьшение размера страницы или выбор одностраничных шаблонов веб-сайтов. Кроме того, существует несколько обстоятельств, при которых веб-сайт никогда не сможет быстро загружаться для большинства пользователей. Это связано с SEO-оптимизацией вашего WordPress и может создать серьезные проблемы.
Preloader — это статическая картинка или анимированные загрузчики css, отображаемые на экране во время загрузки веб-сайта в фоновом режиме. Анимация предварительного загрузчика завершается, когда сайт полностью загружается и готов к показу, а ваша страница отображается для посетителей. Утомительно наблюдать за загрузкой страницы поэлементно.
Многочисленные загрузчики, как и любой другой загрузочный экран, отмечены логотипом компании или короткой анимацией. Хотя на удивление много фирм веб-дизайна пренебрегают ими, в некоторых исследованиях дизайна UX было обнаружено, что предварительные загрузчики являются критическим компонентом опыта веб-сайта. В конце концов, правильно расположенный прелоадер убеждает ваших посетителей в том, что сайт не рухнул; их браузер просто занят обработкой данных. В большинстве случаев отличительный экран загрузки является решающим фактором между тем, чтобы посетитель остался на вашем сайте или без колебаний щелкнул по нему.
Хотя анимация экрана загрузки может быть сложной, даже самая простая анимация, разработанная с помощью инструментов анимации HTML5, может принести пользу вашим пользователям.
Это очень важно, поскольку анимация экрана загрузки улучшает взаимодействие с пользователем, но также визуально привлекательна. Предварительные загрузчики, особенно анимированные, выглядят красиво и производят надежное первое впечатление. Правильно используя анимацию экрана загрузки, вы можете привлечь и удержать интерес посетителей. Хороший предварительный загрузчик также должен разочаровывать и демонстрировать что-то ценное для вашего бизнеса. Естественно, контроль ожиданий посетителей путем предварительного просмотра того, что они ожидают, будет поддерживать их интерес дольше.
Вы когда-нибудь попадали на страницу, где продолжает мигать символ загрузки, и вы не уверены, будет ли отображаться содержимое или вам следует закрыть вкладку? Вообще склоняюсь ко второму. Это основано на личном опыте, но я уверен, что многие со мной согласятся. Google провел исследование и обнаружил, что более половины пользователей покинут веб-сайт, загрузка которого занимает более трех секунд.
Некоторые веб-сайты намного хуже, так как у них нет индикатора загрузки вместо отображения простой белой страницы. Это приводит к более значительному показателю отказов. В наши дни предварительные загрузчики необходимы, поскольку объем внимания продолжает сокращаться, а интернет-соединения продолжают улучшаться в силе и скорости. Если бы мне пришлось разъяснить это для вас, вот несколько причин, почему прелоадер стоит того:
- Чтобы сообщить клиентам, что ваш сайт не завис и не завис, а просто загружается.
- Чтобы ваши потребители могли чем-то заняться, пока они ждут загрузки материала.
- Чтобы повысить узнаваемость вашего бренда и произвести впечатление (некоторые загрузчики позволяют настроить его таким образом, чтобы ваш бренд был в центре внимания еще до того, как пользователи увидят ваш контент)
Предварительные загрузчики не только выглядят фантастически, но и играют важную роль в функционале вашего сайта. Хотя длительное время загрузки неудобно, оно не должно нарушать условия сделки.
Развертывая предварительные загрузчики там, где это необходимо, вы можете уменьшить потерю дохода, вызванную плохим соединением. Они даже могут помочь вам в развитии более значимых отношений с вашими потребителями.
Даже если вашему сайту не требуется предварительный загрузчик, добавить его — хорошая идея; ваши потребители это оценят. Кроме того, положительный и эффективный пользовательский опыт повысит вовлеченность. По крайней мере, предварительный загрузчик уменьшит количество упущенных шансов из-за проблем с загрузкой и придаст вашему веб-сайту более профессиональный вид.
В предварительные загрузчики стоит инвестировать хотя бы для того, чтобы увеличить вероятность того, что посетители останутся на вашем сайте в течение длительного периода времени. ROI более заманчива, чем опасность того, что она не сработает на вашем сайте. Поскольку продолжительность концентрации внимания аудитории так коротка, вы также должны сделать все возможное, чтобы вызвать даже самую маленькую положительную реакцию.