Предварительная загрузка анимации — отображение по щелчку

#javascript #css-animations

#javascript #css-анимации

Вопрос:

Я работаю над простой страницей, но застрял в попытке заставить анимацию предварительной загрузки (автоматически анимируется при загрузке страницы) отображаться только после нажатия на кнопку.

CodePen

Я попытался изменить

 document.addEventListener("DOMContentLoaded", function(event) {
  

Для

 document.getElementById("Loadthis")addEventListener("click", function(event) {
  

Однако теперь текстовая анимация не отображается при загрузке, но анимированный значок загружается при загрузке (бесконечно).

Я пытаюсь создать кнопку на странице, отображающую этот стиль экрана загрузки.

Есть идеи? Заранее спасибо.

Комментарии:

1. Вам не хватает . ошибки копирования-вставки, или это ваш реальный код? Это во второй строке — должно быть document.getElementById("Loadthis") ** . ** addEventListener("click", function(event) {...})

2. Привет, спасибо, что указали. Я исправил, но наблюдал такое же поведение при загрузке анимации. Я разветвил исходный codepen, который воссоздает то, что я испытываю здесь ( codepen.io/anon/pen/LaROKL )