Блог

У меня есть несколько предложений, которые я хочу использовать в анимации загрузки.

«Ты похудел?», «Просто сосчитай до 10», «Почему так серьезно?», «Это не ты. Это я».

У меня есть этот css-код для представления загрузки:

 .loading .spinner:Before{content:"Discovering new ways of making you wait..."; position:absolute; bottom:50px; text-align:center; left:0; right:0; font-size:23px}
 

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

Большое вам спасибо за вашу помощь 🙂

Вы можете присвоить content свойству data-content атрибут элемента, а затем использовать JavaScript для случайного задания значения из массива этому атрибуту.

 const possibleContent = ["Have you lost weight?", "Just count to 10", "Why so serious?", "It's not you. It's me."];

spinner.setAttribute('data-content', possibleContent[Math.floor(Math.random() * possibleContent.length)]); 

 .loading .spinner:Before {
  content: attr(data-content);
  position: absolute;
  bottom: 50px;
  text-align: center;
  left: 0;
  right: 0;
  font-size: 23px
} 

 <div class="loading"><div class="spinner" id="spinner"></div></div>