Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

Анимированный текстовый прелоадер на чистом CSS

Надеюсь, что такое прелоадоры и зачем они нужны, всем известно, для тех кто до сих пор в непонятках, вкратце объясню. Прелоадер() — это попросту предзагрузчик, или если хотите — индикатор загрузки, который предназначен информировать посетителя о процессе загрузки основного контента и занимать внимание посетителя сайта на это время.

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

Анимированный текстовый прелоадер на CSS

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

Как видите всё довольно просто, ну, а поковыряться в коде и поэкспериментировать с параметрами вы можете непосредственно в облачном редакторе. В примере использована надпись на буржуинском, при желании, ничто вам не мешает прописать родное слово «Загрузка» ))).

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Всего комментариев: 5

  • Алексей: 6 марта, 2018 в 03:01

    Андрей, спасибо! Пожалуйста, напиши код или укажи ссылку, как его установить и убрать после полной загрузки страницы.

    Ответить
    • driver: 6 марта, 2018 в 06:33

      Подключить 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>

      Ответить
      • Алексей: 9 марта, 2018 в 02:52

        Спасибо! Это было очень полезно для меня!

        Ответить
      • Алексей: 10 марта, 2018 в 23:59

        Прошу еще добавить в коду без задержки задержку появления самой анимации. Т.е. хочу видеть сначала только фон, а через 1 секунду анимацию.

        Ответить

Оставить комментарий

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>