Hola en ocasiones, al ofrecer descargas en nuestra página web, queremos asegurarnos de que el usuario tenga tiempo suficiente para leer información importante antes de descargar el archivo. Para ello, podemos utilizar un botón de descarga con temporizador y animación de carga, que le dará al usuario una cuenta regresiva de 20 segundos antes de iniciar la descarga. Además, la animación de carga le indicará al usuario que la página está trabajando en segundo plano para ofrecerle la descarga.

Funcionamiento

El botón de descarga con temporizador y animación de carga se activará cuando el usuario haga clic en él. En ese momento, el botón desaparecerá y en su lugar aparecerá un temporizador de 20 segundos y una animación de carga. Durante los 20 segundos, el temporizador mostrará una cuenta regresiva y la animación de carga se llenará progresivamente para indicarle al usuario que la página está trabajando en segundo plano para ofrecerle la descarga. Una vez que el temporizador llegue a cero, la descarga se iniciará automáticamente y se abrirá en una nueva ventana.

Con un botón de descarga con temporizador y animación de carga, podemos ofrecer una mejor experiencia al usuario al darle tiempo para leer información importante antes de descargar un archivo, al mismo tiempo que le indicamos que la página está trabajando en segundo plano para ofrecerle la descarga. Este tipo de botón es fácil de implementar en una página de Blogger utilizando solo HTML, CSS y JavaScript, y puede hacer que la experiencia del usuario sea mucho más agradable y eficiente.

Demostración

Título de la página

CÓDIGO HTML, CSS, JAVASCRIPT

HTML

<button id="download-button" data-link="https://www.example.com/download" target="_blank">Descargar</button>
<div id="timer"></div>
<div id="loading"></div>

CSS

#download-button {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #007bff;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

#timer {
  text-align: center;
  font-size: 24px;
  margin-bottom: 10px;
}

#loading {
  width: 0%;
  height: 5px;
  background-color: #007bff;
  transition: width 0.2s ease-out;
  margin-bottom: 20px;
}

@media screen and (max-width: 768px) {
  #download-button {
    font-size: 16px;
  }
  #timer {
    font-size: 18px;
  }
}

JAVASCRIPT

const downloadBtn = document.getElementById('download-button');
const timer = document.getElementById('timer');
const loading = document.getElementById('loading');

downloadBtn.addEventListener('click', function() {
  downloadBtn.style.display = 'none';
  timer.style.display = 'block';
  loading.style.width = '100%';
  
  let timeLeft = 20;
  let downloadLink = downloadBtn.getAttribute('data-link');
  
  let countdown = setInterval(function() {
    timeLeft--;
    timer.innerText = `La descarga comenzará en ${timeLeft} segundos...`;
    
    if (timeLeft == 0) {
      clearInterval(countdown);
      window.open(downloadLink, '_blank');
    }
  }, 1000);
});

créditos:  ChatGPT