Анимация иконок

Здесь вы узнаете, как создать анимированный эффект для иконок.

Зарядка батареи

Шаг 1) Добавляем HTML:

<div id="charging" class="fa"></div>

Шаг 2) Подключаем библиотеку иконок Font Awesome:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Шаг 3) Добавляем JavaScript:

<script>
function chargebattery() {
  var a;
  a = document.getElementById("charging");
  a.innerHTML = "&#xf244;";
  setTimeout(function () {
    a.innerHTML = "&#xf243;";
  }, 1000);
  setTimeout(function () {
    a.innerHTML = "&#xf242;";
  }, 2000);
  setTimeout(function () {
    a.innerHTML = "&#xf241;";
  }, 3000);
  setTimeout(function () {
    a.innerHTML = "&#xf240;";
  }, 4000);
}
chargebattery();
setInterval(chargebattery, 5000);
</script>

Объяснение примера

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

Замену и вывод иконок осуществляет JavaScript функция chargebattery().

Сначала функция выводит иконку пустой батареи:

Через секунду иконка меняется на другую иконку:

Иконка меняется на новую иконку каждую секунду, пока не будет достигнуто состояние "батарея полностью заряжена":

Этот процесс повторяется каждые 5 секунд, создавая впечатление, что батарея заряжается.

Еще анимированные иконки