Анимация ожидания загрузки - loader - JDownloads

<div style="height:46px;">
 <div id="downloadButton" style="text-align:center; padding:5px; display:none;">{download_link}</div>
</div>

<div class="img_caption">Скачивание подготавливается:</div>
<div class="progress"></div>

<style>
.progress {
   width: 100%;
   height: 16.8px;
   border-radius: 16.8px;
   background: linear-gradient(#FB7C05 0 0) left/0% 100% no-repeat #dbdcef;
   animation: progress-animation 30s forwards; /* Изменено на forwards */
}

@keyframes progress-animation {
   0% {
      background-size: 0% 100%;
   }
   100% {
      background-size: 100% 100%;
   }
}
</style>

<script>
   // Убедиться, что анимация завершилась, прежде чем показать кнопку
   const progress = document.querySelector('.progress');
   const downloadButton = document.getElementById('downloadButton');

   progress.addEventListener('animationend', () => {
      progress.style.backgroundSize = '100% 100%'; // Установка размера фона на 100%
      downloadButton.style.display = 'block'; // Показываем кнопку
   });
</script>

setTimeout(_ => {
    const link = document.CreatedEleemnt('a');
    link.href = 'https://example.ru';

    document.body.appendChild(link);
}, 30000);