Как сделать «вертушку» загрузки?

Question

[Unknownplayer]

Имеется определенный блок с id="title".
В него каждую секунду должны выводится новые данные:
1 тик - "--"
2 тик - "\"
3 тик - "|"
4 тик - "/"
5 тик - начать заново
Codepen

Comments

[Ruslan Ruslanov]

почему бы не использовать картинку?
ну если уж так нужно, то сделайте через setInterval, здесь все подробно описано.

Answer 1

[0xD34F]

Можно сделать через CSS.

<div class="spinner"><div>

.spinner {
  color: black;
  font-size: 5rem;
}
.spinner::before {
  display: inline-block;
  text-align: center;
  font-family: monospace;
  width: 5rem;
  content: "";
  animation: spinner .8s infinite steps(4);
}
@keyframes spinner {
  0%, 100% { content: "\2014"; }
       25% { content:    "\\"; }
       50% { content:     "|"; }
       75% { content:     "/"; }
}

https://codepen.io/anon/pen/mveNZN?editors=1100

Или через JS.

<div class="spinner"><div>

.spinner {
  color: black;
  font-size: 5rem;
  font-family: monospace;
}

const text = [ '\u2014', '\\', '|', '/' ];
let index = -1;

setInterval(block => {
  index = (index + 1) % text.length;
  block.textContent = text[index];
}, 200, document.querySelector('.spinner'));

https://codepen.io/anon/pen/VgeZYN?editors=1010