Разное

Прелоадер svg: Анимированный текст анимации загрузки GIF, SVG, APNG (загрузчики AJAX)

22.12.2022

Содержание

javascript — Как сделать прелоадер с изменением размера и цвета кругов

Прелоадер SVG

С помощью SVG довольно легко сделать необычные прелоадеры. Ниже пример идущего человечка вдоль пути

<meta charset="utf-8">
 <svg 
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="www://www.w3.org/1999/xlink"> 
	<defs>
	   <filter 
		  
		  x="-20%" y="-20%" 
		 >
		  <feGaussianBlur stdDeviation="1" />
      </filter>
	</defs>
	<!-- Прерывистая линия -->
    <polyline points="100,180 304,180" stroke-width="15" stroke="yellowgreen" stroke-dasharray="5 5" stroke-dashoffset="100"  />
	<!-- Анимация движения человечка вдоль пути   -->
  <g transform="translate(100,170) scale(2,-2)">
    <path stroke="yellowgreen" stroke-width="2"  fill="none" filter="url(#dropShadow2)">
      <animateTransform 
	    attributeName="transform" 
		attributeType="XML"
                type="translate" 
		values="0;100" 
		dur="6s"
        begin="0s"
		repeatCount="indefinite" />
		 <!-- Анимация фигурки человека   -->
        <animate attributeName="d" begin="1s" dur="0.
 
 3s" repeatCount="indefinite"
          values="M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,-5 M0,16 c4,4 -4,4 0,0;
                  M 0,0 0,10 0,0 M0,10 0,16 l 0,-5 M0,16 l 0,-5 M0,16 c4,4 -4,4 0,0;
                  M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,-5 M0,16 c4,4 -4,4 0,0"/>
    </path>
  </g>
   <!-- Анимация текста LOADING   -->
   <text x="150" y="100" font-size="24" font-weight="900" fill="yellowgreen" filter="url(#dropShadow2)" > LOADING
	   <animate 
		attributeName="opacity" 
		values="1;0.2;1" 
		dur="3.5s" 
		repeatCount="indefinite" />
   </text>
  </svg>

Вариант с обратным ходом человечка

<meta charset="utf-8">
 <svg 
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="www://www.w3.org/1999/xlink"> 
	<!-- Прерывистая линия -->
    <polyline points="100,180 304,180" stroke-width="14" stroke="#337ab7" stroke-dasharray="5 5" stroke-dashoffset="100" />
	<!-- Анимация движения человечка вдоль пути   -->
  <g transform="translate(100,170) scale(2,-2)">
    <path stroke="dodgerblue" stroke-width="2"  fill="none">
      <animateTransform 
	      attributeName="transform" 
	      attributeType="XML"
        type="translate" values="100;0" dur="6s"
        begin="0s" repeatCount="indefinite" />
		 <!-- Анимация фигурки человека   -->
        <animate
          attributeName="d" 
          begin="1s" 
          dur="0.
 
 3s" 
          repeatCount="indefinite"
          values="M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,-5 M0,16 c4,4 -4,4 0,0;
                  M 0,0 0,10 0,0 M0,10 0,16 l 0,-5 M0,16 l 0,-5 M0,16 c4,4 -4,4 0,0;
                  M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,-5 M0,16 c4,4 -4,4 0,0"/>
    </path>
	  <!-- Анимация текста  LOADING  -->
  </g>
   <text x="150" y="100" font-size="24" font-weight="900" fill="dodgerblue"> LOADING
   <animate
    attributeName="opacity" 
	   values="1;0.2;1" 
	   dur="3s" 
	   repeatCount="indefinite" />
   </text>
  </svg>

Вариант с реверсом движения

<meta charset="utf-8">
 <svg 
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="www://www.w3.org/1999/xlink"> 
	<!-- Прерывистая линия -->
    <polyline points="100,180 304,180" stroke-width="10"    stroke="#337ab7" stroke-dasharray="5 5" stroke-dashoffset="100" />
	<!-- Анимация движения человечка вдоль пути   -->
  <g transform="translate(100,170) scale(2,-2)">
    <path stroke="dodgerblue" stroke-width="1.
 
 5"  fill="none">
      <animateTransform 
        attributeName="transform" 
        attributeType="XML"
        type="translate" 
        values="0;100;0" 
        dur="6s"
        begin="0s" 
        repeatCount="indefinite" />
		 <!-- Анимация фигурки человека   -->
        <animate 
          attributeName="d"
          begin="1s" 
          dur="0.3s" 
          repeatCount="indefinite"
          values="M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,-5 M0,16 c4,4 -4,4 0,0;
                  M 0,0 0,10 0,0 M0,10 0,16 l 0,-5 M0,16 l 0,-5 M0,16 c4,4 -4,4 0,0;
                  M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,-5 M0,16 c4,4 -4,4 0,0"/>
    </path>
  </g> 
  
   <text x="150" y="100" font-size="24" fill="dodgerblue"> LOADING
   <animate 
    attributeName="opacity" 
    values="1;0.2;1" dur="3s"
    repeatCount="indefinite" />
   </text>
  </svg>

Вариант с реверсным движением полосы загрузки и фигуры человечка

<meta charset="utf-8">
 <svg 
    xmlns="http://www. w3.org/2000/svg"
    xmlns:xlink="www://www.w3.org/1999/xlink"> 
	<!-- Прерывистая линия -->
    <polyline points="100,180 304,180" stroke-width="14" stroke="greenyellow" stroke-dasharray="5 5" stroke-dashoffset="100" > 
	<!-- Анимация движения прерывистой линии -->
	<animate 
   attributeName="stroke-dashoffset" 
   values="0;100;0"
   dur="10s"
   repeatCount="indefinite" />
	</polyline>
	<!-- Анимация движения человечка вдоль пути   -->
  <g transform="translate(100,170) scale(2,-2)">
    <path stroke="greenyellow" stroke-width="1.5"  fill="none">
      <animateTransform
        attributeName="transform"
        attributeType="XML"
        type="translate"
        values="0;100;0"
        dur="10s"
        begin="0s"
        repeatCount="indefinite" />
		 <!-- Анимация фигурки человека   -->
        <animate
        attributeName="d"
        begin="1s"
        dur="0.
 
 
 3s"
        repeatCount="indefinite"
        values="M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,-5 M0,16 c4,4 -4,4 0,0;
                  M 0,0 0,10 0,0 M0,10 0,16 l 0,-5 M0,16 l 0,-5 M0,16 c4,4 -4,4 0,0;
                  M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,-5 M0,16 c4,4 -4,4 0,0"/>
    </path>
  </g> 
  
  <text x="150" y="100" font-size="24" fill="greenyellow"> LOADING
   <animate
    attributeName="opacity"
    values="1;0.1;0.1;1;1"
    dur="6s"
    repeatCount="indefinite" />
   </text>
   
  </svg>

Update

SVG лоадер в виде часов

body {
 background:black;
 }
.container{
margin:2em;
 width:18vh;
 height:auto;
 }
<div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
  viewBox="0 0 100 100" >
<circle fill="none" stroke="cyan" stroke-width="8" stroke-miterlimit="10" cx="50" cy="50" r="48" stroke-dasharray="2. 12 23"/>
<line fill="none" stroke-linecap="round" stroke="cyan" stroke-width="4"  x1="50" y1="50" x2="85" y2="50.5" >
  <animateTransform 
       attributeName="transform" 
       dur="2s"
       type="rotate"
       from="0 50 50"
       to="360 50 50"
       repeatCount="indefinite" />
</line>
<line fill="none" stroke-linecap="round" stroke="cyan" stroke-width="4"  x1="50" y1="50" x2="49.5" y2="74">
  <animateTransform 
       attributeName="transform" 
       dur="15s"
       type="rotate"
       from="0 50 50"
       to="360 50 50"
       repeatCount="indefinite" />
</line>
</svg>
</div>

SVG лоадер в виде полярных координат

body {
 background:black;
 }
.container{
 width:15%;
 height:15%;
 margin:5rem;
 }
<div >
<svg version="1.1" xmlns="http://www. w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
  viewBox="0 0 100 100" >
  <path fill="greenyellow"  d="M31.6,3.5C5.9,13.6-6.6,42.7,3.5,68.4c10.1,25.7,39.2,38.3,64.9,28.1l-3.1-7.9c-21.3,8.4-45.4-2-53.8-23.3
  c-8.4-21.3,2-45.4,23.3-53.8L31.6,3.5z">
      <animateTransform 
         attributeName="transform" 
         attributeType="XML" 
         type="rotate"
         dur="2s" 
         from="0 50 50"
         to="360 50 50" 
         repeatCount="indefinite" />
  </path>
 <path fill="greenyellow" d="M42.3,39.6c5.7-4.3,13.9-3.1,18.1,2.7c4.3,5.7,3.1,13.9-2.7,18.1l4.1,5.5c8.8-6.5,10.6-19,4.1-27.7
  c-6.5-8.8-19-10.6-27.7-4.1L42.3,39.6z">
      <animateTransform 
         attributeName="transform" 
         attributeType="XML" 
         type="rotate"
         dur="1s" 
         from="0 50 50"
         to="-360 50 50" 
         repeatCount="indefinite" />
  </path>
 <path fill="greenyellow" d="M82,35.
 
 7C74.1,18,53.4,10.1,35.7,18S10.1,46.6,18,64.3l7.6-3.4c-6-13.5,0-29.3,13.5-35.3s29.3,0,35.3,13.5
  L82,35.7z">
      <animateTransform 
         attributeName="transform" 
         attributeType="XML" 
         type="rotate"
         dur="2s" 
         from="0 50 50"
         to="360 50 50" 
         repeatCount="indefinite" />
  </path>
</svg> 
  </div>

Ещё вариант прелоадера SVG в виде индикатора зарядки

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
<div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <g>
      <path d="M65,19v-6c0-3.3-2.7-6-6-6h51c-3.3,0-6,2.7-6,6v6H65z" fill="#10004f"/>
      <path d="M76,17h34.1c-2.3,0-4.1,1.8-4.1,4v70c0,2.2,1.9,4,4.1,4H76c2.3,0,4-1.8,4-4V21C80,18.8,78.3,17,76,17z M72,29v54v4h-4. 3 h42.4h38v-4V29v-4h5.4h45.3H72V29z" fill="#10004f" />
     </g>
      <rect x="35" y="72" fill="#00e62c">
          <animate 
              attributeName="opacity" 
              from="0" to="1" 
              dur="1s" 
              repeatCount="indefinite" 
              values="0;0;1;1" 
              keyTimes="0;0.1;0.3;1"/>
      </rect>
      <rect x="35" y="58" fill="#00e62c">
          <animate 
              attributeName="opacity" 
              from="0" 
              to="1" 
              dur="1s" 
              repeatCount="indefinite" 
              values="0;0;1;1" 
              keyTimes="0;0.3;0.5;1"/>
      </rect>
      <rect x="35" y="44" fill="#00e62c">
          <animate 
              attributeName="opacity"
              from="0"
              to="1"
              dur="1s" 
              repeatCount="indefinite" 
              values="0;0;1;1" 
              keyTimes="0;0. 5;0.7;1" />
      </rect>
      <rect x="35" y="30" fill="#00e62c">
          <animate 
              attributeName="opacity"
              from="0"
              to="1"
              dur="1s"
              repeatCount="indefinite"
              values="0;0;1;1"
              keyTimes="0;0.7;0.9;1" />
      </rect>
  </svg>
</div>

Источник

Preloader Matrix — Плагин для WordPress

  • Детали
  • Отзывы
  • Установка
  • Разработка

Поддержка

Add your own image, gif or pre loaded loading SVG & text animation, set where to show this loading animation.

Features

  • Select & exclude loader display location, for example : entire website or only home page.
  • Animate loader text with the animation you like
  • Show loader only once per session or always.
  • Pre loaded SVG animation & color customization.
  • Add custom image, background color, opacity.
  • Add text & color to loading screen.
  • Add animation to screen & text.
  • Show close button on loader screen.
  • Compatible with major browsers.
  • Light weight, Responsive & fast.
  • Easy to use & no coding required.
  • Delay Time ,Set a minimum load time to prevent the
    pre-loader from disappearing too fast.
  • More then 40 loading animation type
  • ** Matrix Pre Loader Settings**

Installation

  1. Upload the folder to the ‘/wp-content/plugins/’ directory.
  2. Activate the plugin through the ‘Plugins’ menu in WordPress.
  3. Go to Settings menu > Matrix Pre loader.
  4. Enter your background color code and set or upload your Preloader image.
  5. Choose display Location, default is «In The Entire Website».
  6. That is all.

Thank you!! And thank you for keeping it free and on GitHub!

Excellent plugin, laconic, small

Simply amazing, I was looking for a preloader plugin and after searching a lot finally I got this one that works out of the box and does exactly what I was looking for. It a very user-friendly, Lightweight, compatible, and easy to use. I highly recommend using this plugin. Thumbs up for the plugin developer.

After activating the plug in you cannot really delete this plugin. After activating the plugin if you try to remove or delete the plugin from your website your site will not show any more and stuck into a blank page so you are stuck with this pre-loader and don’t have any other option to undo it. However the developer is good tried to fix the issue but it didn’t work for me. Use it at your own risk.

I must say, that this preloader is great. Works without any hassle, just install and go.. Works fine with Elementor. Works straight out of the box. Small & Easy to configure. Free More than 10+ loader images You can add your own, or why not write a loading text? Choose Background Color & Text Color And don’t forget to check out the Matrix loading function! The creator of this plug-in is very nice & helpful if any problems would appear..

Посмотреть все 5 отзывов

«Preloader Matrix» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники

  • Lukman Nakib

Перевести «Preloader Matrix» на ваш язык.

Заинтересованы в разработке?

Посмотрите код, проверьте SVN репозиторий, или подпишитесь на журнал разработки по RSS.

1.0
  • First version.
1.2

  • Fixed css

  • Added more icons

1.3
  • Add text animation
  • Fixed elementor issue.
2.0
  • Add exclude post or page option
  • background image
  • opacity
  • animate.style animation css & animation loop
  • show per session
  • close button
2.01
  • Update WordPress supported version

Оценки

Посмотреть все

  • 5 звёзд 4
  • 4 звезды 0
  • 3 звезды 0
  • 2 звезды 0
  • 1 звезда 1

Войдите, чтобы оставить отзыв.

Участники

  • Lukman Nakib

Поддержка

Решено проблем за последние 2 месяца:

0 из 2

Перейти в форум поддержки

200+ Превосходный анимированный загрузчик SVG

Наличие отличного загрузчика SVG в сочетании с загрузчиком CSS делает время загрузки приемлемым. Чтобы сделать это простым, вы можете просто сказать, что это загрузка счетчика. Некоторыми из распространенных счетчиков загрузки могут быть GIF-изображения индикатора выполнения, также известные как GIF-изображения загрузки. Например, если вы поручили своему веб-сайту выполнить какую-либо задачу и хотите получить отчет о состоянии, вы можете использовать GIF-анимацию индикатора выполнения. Loading Spinner в основном используется, если ваше содержимое загружается немного дольше, чем другие. Вы можете использовать PNG, например Загрузка PNG, чтобы оживить экран загрузки.

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

Связанный пост:
25+ умопомрачительных примеров SVG-анимации
300+ бесплатных анимированных SVG-иконок в стиле Material Design
5 Лучший анимированный слайдер SVG
10+ Эффект прокрутки параллакса на чистом CSS

Представьте, что вы просматриваете веб-сайт в поисках какого-то контента, и когда вы его находите, все, что вы получаете, — это загрузочный экран. Понравится ли вам веб-сайт, даже если на нем есть все, что вы хотите. Ответ может быть неверным. Так почему бы не избежать этой проблемы, используя один из лучших загружаемых GIF на рынке.

Загрузчик SVG

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

Демо | Download/GitHub

SVG Loader Animation

Хорошо, если вы создаете веб-сайт с огромным содержимым, что может привести к увеличению времени загрузки. Итак, как вы можете сделать время загрузки хоть как-то терпимым. Что ж, все, что вам нужно сделать, это использовать некоторые из этих загружаемых PNG, и вы готовы к работе. От автора Nikhil Krishnan вы можете увидеть, как простое использование CSS сделало загрузчик намного лучше.

Автор: Nikhil Krishnan
Демо/Код

GIF, SVG, APNG Анимация загрузки

Потеря зрителей может стать серьезной проблемой, если содержимое загружается слишком долго. Предположим, вы можете сделать загрузку PNG лучше, когда они загружаются. Тогда вы можете сделать время загрузки намного веселее. Есть так много вариантов для вас внизу. Например, вы можете выбрать радугу или просто выбрать обычный загрузчик и добавить его на свой сайт. Эти загрузчики видны, когда ваш контент огромен и требует времени для загрузки. Все они находятся в файле SVG, что упрощает работу.

Демо/загрузка

Создайте свой значок загрузки Ajax

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

Демонстрация/загрузка

Анимация загрузки Cog

Созданный Джейми Коултер, этот вид погрузчика уникален и привлекателен. Как вы можете видеть в демоверсии, есть три колеса разных цветов, которые имеют несколько уникальный вид. Такие загрузчики можно использовать для привлечения посетителей и сделать сайт максимально привлекательным. Подводя итог, если вы используете этот загрузчик, вы можете сэкономить время и мгновенно увеличить количество зрителей.

Автор: Джейми Коултер
Демонстрация/Код

Анимация загрузки CSS3

Вашему веб-сайту может понадобиться что-то новое и интересное, чтобы оставаться на рынке. Но если у вас есть какой-то контент, который имеет более огромный контент и требует больше времени для загрузки, что вы будете делать. Вы можете сделать так, чтобы содержимое имело несколько замечательных загрузчиков, как показано ниже. Вы можете выбрать различные погрузчики, такие как круговой погрузчик или линейный погрузчик, или просто несколько простых линейных погрузчиков. Разработанный Manoz с помощью HTML и CSS, он может оказаться достойным вашего времени.

Автор: Manoz
Демонстрация/Код

Светящаяся полоса загрузки

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

Автор: Nick Pettit
Демонстрация/Код

DotsLoaderView

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

Demo/GitHub

Вид загрузчика со скользящим квадратом

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

Демо/GitHub

Загрузчик CSS Stairs

Наличие чего-то уникального и удивительного загрузчика может быть тем, что вам может понадобиться. Для чего-то уникального вам не нужно искать где-либо еще. Как вы можете видеть, насколько уникален его дизайн. Сначала, когда он начинает загружаться, столбцы находятся слева от вас, а затем столбики поворачиваются влево. Это маленький шарик, который поднимается по лестнице по мере загрузки вашего контента. Когда вы можете делать такие загрузчики с помощью CSS, чего вы ждете.

Автор: Ирко Палениус
Демо/Код

CSS Preloader

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

Автор: Пол
Демо/Код

DC SVG Loader v.1

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

Автор: Chris Kelley
Демонстрация/Код

Выравнивает загрузчик

Поскольку загрузчиков много, вы можете выбрать, почему бы не выбрать лучший. Когда ваш контент загружается долго, ваши зрители могут больше не захотеть возвращаться. Но что, если вы можете добавить счетчик загрузки, который будет удерживать внимание ваших зрителей. Для этого вы можете добавить такие загрузчики. На этом загрузчике вы можете видеть, что есть полосы, похожие на горы, которые поднимаются и опускаются по мере загрузки вашего контента. Пока ваш контент загружается, эта полоса будет подниматься и опускаться, что делает даже время загрузки более терпимым. Комбинируя CSS и HTML, вы тоже можете создавать подобные загрузчики.

Демонстрация/Код

Загрузчик №1 – Running Dots

Переход к чему-то новому и интересному для вашего веб-сайта. Как вы можете видеть, в загружаемом PNG ниже есть несколько пузырьков, которые вращаются по мере загрузки содержимого. Сначала тот, кто впереди, подходит к концу очереди, а затем то же самое для другого. Этот процесс продолжается до тех пор, пока ваш контент не будет полностью загружен. Этот загрузчик предоставлен нам Фабрицио Бьянки с комбинацией CSS и небольшого количества JavaScript.

Автор: Fabrizio Bianchi
Демонстрация/Код

Slack loader с одним элементом

Использование современных стилей практически во всех частях вашего веб-сайта имеет решающее значение, поскольку они отвечают за популярность веб-сайта. Как вы можете видеть, в этом загружаемом PNG нет ничего, кроме простого хэштега, который возникает только из простых точек. Сначала нет ничего, кроме точек, и эти точки соединены вместе, чтобы сформировать хэштег. Простой, но гораздо более эффективный способ представления времени загрузки любого веб-сайта. Поскольку для создания таких загрузчиков нужны только CSS и небольшие HTML-коды, у вас не возникнет проблем с их созданием.

Автор: CrocoDilon
Демонстрация/Код

SVG Загрузка иконок

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

Автор: Aurer
Демонстрация/Код

SVG Stopwatch Loader

Когда кто-то говорит «загрузка», он думает только о потраченном впустую времени. Но что, если вы можете сделать загрузчик, который выглядит как представление времени. Как вы можете видеть, в загрузчике ниже представлен секундомер. Когда ваш контент загружается, ваши зрители могут наслаждаться этим удивительным загрузчиком. Этот загрузчик содержит секундомер, который поднимается по мере загрузки вашего контента. Благодаря автору Крису Гэннону этот загрузчик прост и удобен в использовании в любом сценарии загрузки.

Автор: Chris Gannon
Демонстрация/Код

Загрузчик от Dave McCarthy

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

Автор: Dave McCarthy
Демонстрация/Код

Загрузчик css3

Индикатор выполнения GIF — один из лучших способов создания загрузчиков. С горизонтальной линией и эффектом желе вы можете сделать несколько потрясающих загрузчиков. Сначала на вашем экране отображается одна единственная строка. Затем по этой линии движется желеобразное вещество. По мере того, как линия движется к концу загрузки, текст ругается. Этот загрузчик может быть разработан с помощью простых кодов CSS и HTML.

Автор: Матье Ришар
Демо/Код

Анимированный загрузчик SVG

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

Автор: Тони
Демо/код

CSS-анимация SVG Spinner/Loader (SVG Animation)

С помощью загрузки PNG вы можете сделать так, чтобы тяжело загружаемое содержимое имело удивительные макеты. У таких загрузчиков Spinner есть несколько уникальных идей, которые сделают время загрузки более терпимым. Как видите, есть четыре точки, которые соединяются друг с другом, а затем перемещаются по мере загрузки вашего контента. Они даже подключаются друг к другу по мере загрузки контента.

Автор: Steven Sinatra
Демонстрация/Код

Анимация круга загрузки SVG

Spinner загрузки, используемый в вашем тяжелом контенте, может иметь огромное значение. Простой спиннер загрузки используется, если вы хотите что-то простое и градиентное. Например, если вы используете счетчик загрузки ниже, вы можете легко сделать это и сэкономить много времени. Нет ничего настолько сложного, что есть только полукруг, который ходит по кругу по мере загрузки вашего содержимого. С помощью простого CSS и прикосновения HTML вы тоже можете получить загрузчик, подобный этому.

Автор: Александр К
Демонстрация/Код

Ручная анимация – загрузка (SVG Animation)

Загрузка Spinner становится одной из самых важных частей любого веб-сайта. Добавление некоторого уникального загрузчика CSS, подобного этому, имеет большое значение. Как вы можете видеть, в этом загрузчике CSS есть пять пальцев, которые двигаются по одному по мере загрузки вашего контента. Это похоже на то, как вы двигаете пальцами, когда ждете, что что-то произойдет. Загрузчик CSS, подобный этому, легко создать, так как не используется JavaScript и используется только CSS.

Автор: r4ms3s
Демонстрация/Код

Newton’s Cradle Loader

Progress Bar GIF — это просто причудливый способ сказать, что загружается PNG. Как вы можете видеть, в загрузчиках ниже есть несколько шаров в формате png, из-за чего первый и последний шары попадают в другие шары по мере загрузки вашего контента. Цвета этих мячей не совпадают, так как цвет меняется по мере того, как они поднимаются выше. Загрузка PNG, подобных этим, проста в использовании, и вы можете использовать их на своем веб-сайте, просто добавив CSS в свой основной код.

Автор: Matt Smith
Демонстрация/Код

Индикатор загрузки Battlefield 3 (анимация SVG)

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

Автор: Gareth Weaver
Демонстрация/Код

Волнистые анимации загрузки

Выбор лучшего загрузчика — лучший способ увеличить посещаемость вашего сайта. От индикатора выполнения GIF до загрузки PNG у вас есть много вариантов на выбор. У нижеперечисленных загрузчиков есть из чего выбрать. Вы можете выбрать линии или волны, чтобы сделать загрузчик более свободным. Подводя итог, вы можете получить больше загрузчиков из одного места.

Автор: Кайл Брамм
Демонстрация/Код

Square Loader

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

Автор: Tashfeen
Демонстрация/Код

Идея загрузки

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

Автор: Чейз
Демонстрация/Код

Коллекция анимированных загрузчиков

От прогресс бара GIF до Загрузка PNG все виды загрузчиков можно найти по этой ссылке. Вы можете выбрать простые стержневые или круговые загрузчики в соответствии с вашими требованиями. Например, если вы хотите использовать загрузчик кругового типа вместо загрузчиков стержней, вы можете сделать именно это. Вы можете использовать любой из кодов для своего сайта и сделать загрузчик контента намного эффективнее.

Автор: Ана Тюдор
Демо/Код

Загрузчик песочных часов

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

Автор: Ленка
Демо/Код

Загрузка Надувной мяч (предварительно)

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

Автор: Кота Шимура
Демо/Код

Заключение

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *