Анимированный текстовый прелоадер на чистом CSS
Надеюсь, что такое прелоадоры и зачем они нужны, всем известно, для тех кто до сих пор в непонятках, вкратце объясню. Прелоадер(preloader) — это попросту предзагрузчик, или если хотите — индикатор загрузки, который предназначен информировать посетителя о процессе загрузки основного контента и занимать внимание посетителя сайта на это время.
Сейчас, в интернетах можно найти массу готовых решений, существуют целые библиотеки и онлайн-генераторы прелоадеров. В большинстве своём, в качестве индикаторов загрузки используются различные графические элементы с анимацией, линии, круги, квадраты, эвёзды и т.д.
Сегодня продемонстрирую простой пример создания индикатора загрузки в виде текста с анимацией из обоймы CSS3. Все параметры индикатора легко настраиваются непосредственно в CSS, так что изменить основной фон, начертание и цвет шрифта, а также скорость анимации, не составит большого труда.
Как видите всё довольно просто, ну, а поковыряться в коде и поэкспериментировать с параметрами вы можете непосредственно в облачном редакторе. В примере использована надпись на буржуинском, при желании, ничто вам не мешает прописать родное слово «Загрузка» ))).
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
Андрей, спасибо! Пожалуйста, напиши код или укажи ссылку, как его установить и убрать после полной загрузки страницы.
Подключить jQuery, если ещё не используете:
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>Без задержки:
<script type=”text/javascript”>
$(window).load(function() {
$(“.page-preloader”).delay(100).fadeOut().remove();
});
</script>
<script type=”text/javascript”>
$(window).load(function() {
$(“.page-preloader”).delay(100).fadeOut().remove(); });
</script>
С задержкой:
<script type=”text/javascript”>
$(window).load(function() {
setTimeout(function () {
$(“.page-preloader”).delay(100).fadeOut().remove();
}, 2000);
});
</script>
<script type=”text/javascript”>
$(window).load(function() {
setTimeout(function () {
$(“.page-preloader”).delay(100).fadeOut().remove();
}, 2000);
});
</script>
Спасибо! Это было очень полезно для меня!
Прошу еще добавить в коду без задержки задержку появления самой анимации. Т.е. хочу видеть сначала только фон, а через 1 секунду анимацию.