Integración en una página

Incluye el CSS y JavaScript, luego añade el marcado de un widget. El botón usa un archivo público configurado en data-dc-url. El progreso real solo se mide con archivos del mismo origen; un archivo de otro dominio se abre en una pestaña nueva y el navegador lo gestiona sin porcentaje.

<link rel="stylesheet" href="assets/descarga-circular.css">
<script defer src="assets/descarga-circular.js"></script>
<div class="dc-widget dc-real-widget" data-dc-widget data-dc-mode="real"
 data-dc-url="/media/archivo.zip" data-dc-filename="archivo.zip">…marcado SVG…</div>

Los atributos determinan la URL y el nombre del archivo. También puedes configurarlo con la API desde un script cargado después de descarga-circular.js y escuchar los estados:

const widget = document.querySelector('[data-dc-widget]');
DescargaCircular.mount(widget, {
  url: '/media/archivo.zip', filename: 'archivo.zip',
  onState: ({ state, progress, message }) => console.log(state, progress, message)
});

Prueba dos instancias independientes con el archivo local incluido:

El navegador decide la ubicación final del archivo y no es posible confirmar que quedó guardado en disco.