Css эффект загрузки страницы

Эффект загрузки страницы — создание эффекта при загрузке страницы

Долго грузиться сайт? И вы не хотите чтобы человек видел как сайт загружается по частям, а хотите чтобы он видел только полностью загруженный сайт? Тогда этот урок для вас. То есть посетитель заходит на сайт и видит индикатор загрузки, по истечении которого появляется сайт с красивым переходом. Может для блогов или порталов использование такого эффекта будет только мешать посетителям, то на продающих страницах он будет весьма кстати. Скачать (необходимо будет подождать 10 секунд) и посмотреть пример вы можете по ссылкам ниже:

Смотреть примерСкачать

Ну и вот еще несколько статей о том, что можно сделать с помощью jQuery:

Эффект при загрузке страницы

В чем, собственно, суть: когда пользователь попадает на сайт, он видит перед собой серый фон, на котором изображен логотип сайта. Также он видит индикатора загрузки, который постепенно заполняется. Для индикатора загрузки используем SVG. После заполнения с помощью красивого эффекта появляется уже загруженная страница сайта, а область с логотипом плавно исчезает.

Вот страница после исчезновения индикатора загрузки:

Разметка HTML

У нас есть блок , с серым фоном, логотипом сайта и индикатором загрузки. То есть то, что пользователь видит как зашел на сайт.

Далее идет блок с классом ip-main, где находится основной контент страницы.

1 2 3 4 5 6 7 8 9 10 11 12 13 14

div id="ip-container" class="ip-container"> class="ip-header"> div class="ip-loader"> class="ip-inner" width="60px" height="60px" viewBox="0 0 80 80"> class="ip-loader-circlebg" d="M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z"/> id="ip-loader-circle" class="ip-loader-circle" d="M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z"/> /svg> /div> /header> div class="ip-main"> /div> /div>

link rel="stylesheet" type="text/css" href="css/effect1.css" />

link rel="stylesheet" type="text/css" href="css/effect2.css" />

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

@font-face font-weight: normal; font-style: normal; font-family: 'Blokk'; src: url('../fonts/blokk/BLOKKRegular.eot'); src: url('../fonts/blokk/BLOKKRegular.eot?#iefix') format('embedded-opentype'), url('../fonts/blokk/BLOKKRegular.woff') format('woff'), url('../fonts/blokk/BLOKKRegular.svg#BLOKKRegular') format('svg'); } @font-face font-weight: normal; font-style: normal; font-family: 'feather'; src:url('../fonts/feather/feather.eot?-9jv4cc'); src:url('../fonts/feather/feather.eot?#iefix-9jv4cc') format('embedded-opentype'), url('../fonts/feather/feather.woff?-9jv4cc') format('woff'), url('../fonts/feather/feather.ttf?-9jv4cc') format('truetype'), url('../fonts/feather/feather.svg?-9jv4cc#feather') format('svg'); }

.ip-header { position: fixed; /* фиксированное позиционирование */ top: 0; /* указывая 0 (ноль), мы "прижимаем" к верху этот блок */ z-index: 100; /* позиционирование по оси Z */ min-height: 480px; /* минимальная высота блока */ width: 100%; /* ширина блока на всю ширину экрана */ height: 100%; /* высота блока на всю высоту экрана */ background: #f1f1f1; /* фоновый цвет */ }

Скрипты подключаем перед закрывающим тегом :

script src="js/classie.js">/script> script src="js/pathLoader.js">/script> script src="js/main.js">/script>

Вывод

Сейчас у нас всё красиво работает и страница появляется по истечению таймера в индикаторе загрузки. Вы увидели 2 эффекта загрузки страницы и можете выбирать любой свой вкус. На продающей странице, где много изображений, видео, и я не говорю о количестве скриптов, данный способ показать посетителю заранее подгруженный сайт — очень подойдет.

Источник

19 CSS спиннеров анимации загрузки

Подборка бесплатных HTML и CSS спиннеров анимации загрузки.

• Автор: Зено Роча, 5 июля 2017 года.
• Ссылки: демо-версия и код .
• Создано с помощью: HTML / CSS.

TERMINAL SPINNER

Совместимые браузеры : Google Chrome, Firefox, Opera, Safari.

• Автор: fox_hover, 14 марта 2017 года.
• Ссылки: демо-версия и код .
• Создано с помощью: HTML / CSS (SCSS).

CSS3 ANIMATIONS SPINNERS

Анимация загрузки, созданная на чистом CSS3 без использования JavaScript.

Совместимые браузеры : Google Chrome, IE, Edge, Firefox, Opera, Safari.

Зависимости : Google Fonts, Reset.css, Autoprefixer.js

• Автор: Milk Studio, 2 июня 2016 г.
• Ссылки: демо-версия и код .
• Создано с помощью: HTML / CSS (SCSS).

SUGARCUBE SPINNER

Красивая HTML и CSS анимация кубика сахара.

Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

• Автор: Юлиан Савин, 27 апреля 2016 г.
• Ссылки: демо-версия и код .
• Создано с помощью: HTML (Pug) / CSS.

CSS SPINNERS

Простой CSS индикатор загрузки. Он создан с помощью CSS и минимального количества HTML-разметки.

Совместимые браузеры : Google Chrome, IE, Edge, Firefox, Opera, Safari.

• Автор: Адитая Брандари, 4 марта 2016 г.
• Ссылки: демо-версия и код .
• Создано с помощью: HTML / CSS (SCSS).

SPINNER

Анимация загрузки, созданная на чистом CSS.

Совместимые браузеры : Google Chrome, IE, Edge, Firefox, Opera, Safari.

• Автор: Фабио Оттавиани, 22 января 2016 г.
• Ссылки: демо-версия и код .
• Создано с помощью: HTML / CSS (SCSS).

CSS AND SVG SPINNER

Современный SVG спиннер, созданный на основе CSS.

Совместимые браузеры : Google Chrome, Edge, Firefox, Opera, Safari.

Зависимости : Reset.css, Autoprefixer.js

• Автор: neil tron 18 июня, 2015 года.
• Ссылки: демо-версия и код .
• Создано с помощью: HTML / CSS / JavaScript.

POLYGON SPINNER

Анимация загрузки, которая выводит SVG-треугольник, а затем преобразует его в многоугольник и обратно.

Совместимые браузеры : Google Chrome, IE, Edge, Firefox, Opera, Safari.

Зависимости : TweenMax.js, Underscore.js.

• Автор: Фабрицио Бьянки, 23 марта 2015 г.
• Ссылки: демо-версия и код .
• Создано с помощью: HTML (Haml) / CSS.

8 BIT SPINNER

Пиксельная круговая анимация загрузки с использованием свойства box-shadow.

Совместимые браузеры : Google Chrome, IE, Edge, Firefox, Opera, Safari.

Зависимости : Reset.css, Prefixfree.js.

• Автор: Мартин ван Дрил, 17 марта 2015 г.
• Ссылки: демо-версия и код .
• Создано с помощью: HTML / CSS.

CSS LOADING ANIMATION

Красивый эффект CSS спиннера анимации загрузки.

Совместимые браузеры : Google Chrome, IE, Edge, Firefox, Opera, Safari.

• Автор: Хьюго Виледаль, 21 октября 2014 г.
• Ссылки: демо-версия и код .
• Создано с помощью: HTML / CSS (SCSS).

SIMPLE REPEATING SPINNER

Простой повторяющийся спиннер с красивой анимацией.

Совместимые браузеры : Google Chrome, IE, Firefox, Opera, Safari.

• Автор: Меттью Роэль, 19 сентября 2014 г.
• Ссылки: демо-версия и код .
• Создано с помощью: HTML (Haml) / CSS (Sass).

CSS3 LOADING SPINNER

Крутая CSS3 анимация загрузки.

Совместимые браузеры : Google Chrome, IE, Edge, Firefox, Opera, Safari.

Зависимости : Google Fonts, Autoprefixer.js.

• Автор: Омер Фатих, 22 августа 2014 г.
• Ссылки: демо-версия и код .
• Создано с помощью: HTML / CSS (Less).

PURE CSS SPINNER

Точечный сппиннер, созданный на чистом CSS.

Совместимые браузеры : Google Chrome, IE, Edge, Firefox, Opera, Safari/

• Автор: Макс Руйгеваард, 21 августа 2014 г.
• Ссылки: демо-версия и код .
• Создано с помощью: HTML / CSS.

SPINNER

Простой спиннер, созданный с помощью HTML и CSS-анимации.

Совместимые браузеры : Google Chrome, IE, Edge, Firefox, Opera, Safari.

• Автор: Кети ДеКора, 28 мая 2014 г.
• Ссылки: демо-версия и код .
• Создано с помощью: HTML (Haml) / CSS (SCSS).

LOADING SPINNER

Анимация загрузки на основе CSS 3.

Совместимые браузеры : Google Chrome, IE, Edge, Firefox, Opera, Safari.

Зависимости : Reset.css, Autoprefixer.js, Modernizr.js.

• Автор: Игор Амадо, 23 февраля 2014 г.
• Ссылки: демо-версия и код .
• Создано с помощью: HTML (Haml) / CSS (SCSS).

RAINBOW SPINNER

Совместимые браузеры : Google Chrome, IE, Edge, Firefox, Opera, Safari.

Зависимости : Reset.css, Prefixfree.js.

• Автор: Мэтт Систо, 3 декабря 2013 г.
• Ссылки: демо-версия и код .
• Создано с помощью: HTML / CSS (SCSS).

SIMPLE CSS-ONLY LOADING SPINNER

Простой CSS-спиннер анимации загрузки, созданный с помощью SASS.

Совместимые браузеры : Google Chrome, IE, Edge, Firefox, Opera, Safari.

• Автор: Кристиан Денни Сторгард, 4 июля 2013 г.
• Ссылки: демо-версия и код .
• Создано с помощью: HTML / CSS.

DIGITAL SPINNER

CSS3-спинннер с дисками, вращающимися с разной скоростью.

Совместимые браузеры : Google Chrome, IE, Edge, Firefox, Opera, Safari.

• Автор: Хаким Эль Хатта, 7 июля 2013 г.
• Ссылки: демо-версия и код .
• Создано с помощью: HTML (Haml) / CSS (SCSS).

CSS SPINNER ANIMATION

Еще один CSS-спиннер анимации загрузки. Непрактичный, так как в нем используется много элементов DOM.

Совместимые браузеры : Google Chrome, IE, Edge, Firefox, Opera, Safari.

• Автор: Ноэль Дельгадо, 3 апреля 2013 г.
• Ссылки: демо-версия и код .
• Создано с помощью: HTML (Haml) / CSS (SCSS).

SPINNER

Стрелки часов созданы с помощью псевдоэлементов :before и :after . Анимация применяется к псевдоэлементам.

Совместимые браузеры : Google Chrome, IE, Edge, Firefox, Opera, Safari.

Зависимости : Normalize.css, Autoprefixer.js.

Источник

Css эффект загрузки страницы

Частная коллекция качественных материалов для тех, кто делает сайты

• Creativo.one2000+ уроков по фотошопу
• Фото-монстр300+ уроков для фотографов
• Видео-смайл200+ уроков по видеообработке
• Жизнь в стиле «Кайдзен» Техники и приемы для гармоничной и сбалансированной жизни

Изучив рубрику «CSS», вы узнаете, как с помощью каскадных таблиц стилей (CSS) можно легко управлять дизайном сайта и упростить создание самого сайта. Данная рубрика заменит Вам полноценный «учебник по CSS».

Бесплатные уроки CSS для начинающих

Вдобавок к текстовым урокам по каскадным таблицам стилей, в данном разделе также представлены полезные уроки CSS для начинающих. Все материалы изложены в максимально простой и понятной форме, поэтому даже абсолютный новичок сможет быстро освоить все премудрости создания красивого оформления сайтов.

Забавные эффекты для букв

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Источник