Создаем таймер обратного отсчета на JS и HTML без CSS

<p id="countdown">10</p> <!-- Отобразится обратный отсчёт -->
<script>
let time = 10; // Задаём начальное время
const timer = setInterval(() => {
  document.getElementById('countdown').textContent = time <= 0 
    ? clearInterval(timer) // Останавливаем таймер, поскольку время истекло
    : time--; // С каждой секундой уменьшаем время
}, 1000); // Интервал делаем одной секунды
</script>

<p id="countdown">Загрузка начнётся через 10 секунд.</p> <!-- Отсчёт уже идёт -->
<script>
let time = 10; // Задаём время обратного отсчёта
const timer = setInterval(() => {
  const countdownElement = document.getElementById('countdown'); // Последим за элементом отсчёта
  if(time > 0) {
    countdownElement.textContent = `Загрузка начнётся через ${time--} секунд.`;
  } else {
    clearInterval(timer); // Заканчиваем работу таймера
    countdownElement.textContent = 'Идёт загрузка...'; // Сообщение о старте загрузки
  }
}, 1000);
</script>

<progress id="countdown" value="10" max="10"></progress> <!-- Прогресс заполнения -->
<script>
let time = 10; // Начинаем с 10
const timer = setInterval(() => {
  const countdownElement = document.getElementById('countdown'); // Наблюдаем за полосой прогресса
  if(time >= 0) {
    countdownElement.value = time--; // Заполняем полосу прогресса
  } else {
    clearInterval(timer); // Полностью останавливаем таймер
    countdownElement.textContent = 'Отсчёт завершён!'; // Сообщение о завершении
  }
}, 1000);
</script>

🕝...🕒...🕞...🕓...🕟...🕔...🕠...🕕...🕡...🕖... 🚀 Стартуем!

<!-- Отсчёт времени -->
<p id="timer">10</p>
<script>
// Время исчисляется секундами
setInterval(function() {
  if(countdown > 0) {
    document.getElementById('timer').textContent = --countdown;
    // Каждый тик уменьшает время
  }
}, 1000); // Отсчёт продолжается непрерывно
</script>

<button id="startBtn">Запустить загрузку</button> 
<p id="countdown">Готовы к старту!</p>
<script>
document.getElementById('startBtn').onclick = function() {
  let time = 10; // Начало отсчёта
  document.getElementById('countdown').textContent = 'Начало через 10 секунд.';
  const timer = setInterval(() => {
    const countdownElement = document.getElementById('countdown');
    if(time > 0) {
      countdownElement.textContent = `Начало через ${time--} секунд.`;
    } else {
      clearInterval(timer); // Остановка ожидания
      countdownElement.textContent = 'Началась загрузка!'; // Сообщаем пользователю об этом
    }
  }, 1000);
};
</script>

<download-timer></download-timer>
<script>
class DownloadTimer extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<p id="countdown">10</p>`;
    this.startCountdown();
  }

  startCountdown() {
    let time = 10; // Стартуем отсчёт
    const timer = setInterval(() => {
      this.querySelector('#countdown').textContent = time--; // Время уменьшается
      if(time < 0) {
        clearInterval(timer); // Остановка обязательна
        this.textContent = 'Загрузка завершена!'; // Сообщаем о готовности
      }
    }, 1000);
  }
}

customElements.define('download-timer', DownloadTimer); // Регистрируем новый элемент 'download-timer'
</script>