Как сделать загрузку с помощью символов на JavaScript?

311

09 января 2017, 20:11

Как сделать анимацию загрузки с помощь символов, как было на DOS или в Ubuntu терминале?

А символы эти:

Думал CSS анимация (возможно), но нет. Это относится с JS, а как сделать её: я не понимаю. Как сделать такую анимацию?

Answer 1

Можно и с помощью одного CSS такое осуществить:

body {background-color: blue;} 
.loader:before { 
  color: white; 
  content: ''; 
  animation: loader 1s infinite; 
} 
@keyframes loader { 
    0% { content: '--' } 
    25% { content: '/' } 
    50% { content: '|' } 
    75% { content: '\5c' } 
    100% { content: '--' } 
}

<div class="loader"></div>

Но к сожалению данный способ будет работать только в малых кругах браузеров, среди которых Google Chrome. Так что всё же лучше, для кроссбраузерности, воспользоваться JavaScript:

setInterval(function() { 
  document.getElementById('loader').innerHTML = '--'; 
  setTimeout(function() { 
    document.getElementById('loader').innerHTML = '/'; 
    setTimeout(function() { 
      document.getElementById('loader').innerHTML = '|'; 
      setTimeout(function() { 
        document.getElementById('loader').innerHTML = '&#92;'; 
      }, 250); 
    }, 250); 
  }, 250); 
}, 1000);

body {background-color: blue;} 
#loader { 
  color: white; 
}

<div id="loader">--</div>

Answer 2

Чтобы данное решение поддерживалось разными браузерами надо использовать Javascript-функцию setInteval, создать массив из строк для анимации и брать для каждого шага следующую строку по индексу:

(function() { 
  var chars = [ "--", "/", "|", "\\" ]; 
  var index = 0; 
  setInterval(function() { 
    document.getElementById("loader").innerText = chars[index]; 
    ++index; 
    if (index === chars.length) index = 0; 
  }, 250); 
})();

body { 
  background-color: blue; 
} 
 
#loader { 
  color: white; 
}

<div id="loader"></div>

Создание Интернет магазина Ивано-Франковск

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как сделать загрузку с помощью символов на JavaScript?

Почему IsBackground не работает?

C# Вывод данных sqlite в datagridview без datasource

Selenium. Получение Cookie с сайта

Исчезли элементы формы