Dobrovoi Master
сделано с душой

В состоянии постоянного подключения...
Главная » Сниппеты » Анимированный текстовый прелоадер на чистом CSS

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

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

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

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

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

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

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

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

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

5 комментариев
  1. Алексей:

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

    Ответить
    • driver:

      Подключить 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() {
        setTimeout(function () { 
          $(".page-preloader").delay(100).fadeOut().remove();   
        }, 2000);  
      });
      </script>
      Ответить
      • Алексей:

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

        Ответить
      • Алексей:

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

        Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Subscribe without commenting

Обновления комментариев по RSS RSS комментариев к этой записи »

Рейтинг@Mail.ru