FacebookXInstagramPinterest
Descarga Circular Animada: demostración con el botón circular en éxito (anillo completo) y en fallo (63 %)
Descarga real de un archivo de prueba completada con el estado SUCCESS en Descarga Circular Animada
Demostración de Descarga Circular Animada en un móvil, con el progreso animado de las secuencias de éxito y fallo

Descarga Circular Animada — WEB + WordPress

$5.00

Las dos versiones en una sola compra: web (HTML, CSS y JavaScript) + plugin para WordPress. US$5.

Un botón circular de descarga con anillo de progreso animado y estados claros: listo, descargando, éxito y fallo. Recibes los dos ZIP oficiales de la versión 1.1.0.

▶ Ver demostración

La demo pública muestra las secuencias de éxito y fallo (simuladas) y la descarga real de un archivo de prueba.

Categoría:

Descripción

/* Descarga Circular Animada: maquetación estándar de la tienda, acotada a esta ficha por su clase propia .cn-dca-resumen (sin IDs). */body.single-product #main .product.type-product:has(.cn-dca-resumen) #tab-description>h3,body.single-product #main .product.type-product:has(.cn-dca-resumen) #tab-description .fusion-woocommerce-tab-title,body.single-product #main .product.type-product:has(.cn-dca-resumen) #tab-description .post-content>h3:first-child{display:none!important}@media (min-width:1000px){body.single-product #main .product.type-product:has(.cn-dca-resumen){display:flow-root!important}body.single-product #main .product.type-product:has(.cn-dca-resumen)>.summary,body.single-product #main .product.type-product:has(.cn-dca-resumen)>.summary>.summary-container{display:contents!important}body.single-product #main .product.type-product:has(.cn-dca-resumen)>.fusion-clearfix{display:none!important}body.single-product #main .product.type-product:has(.cn-dca-resumen)>.avada-single-product-gallery-wrapper{float:left!important;width:42%!important;max-width:none!important;margin:0!important;padding:0!important;box-sizing:border-box!important}body.single-product #main .product.type-product:has(.cn-dca-resumen) .summary .woocommerce-product-details__short-description{float:left!important;clear:left!important;width:42%!important;margin:24px 0 0!important;position:static!important;top:auto!important;left:auto!important}body.single-product #main .product.type-product:has(.cn-dca-resumen) .summary-container>:not(.woocommerce-product-details__short-description),body.single-product #main .product.type-product:has(.cn-dca-resumen)>.woocommerce-tabs{margin-left:calc(42% + 32px)!important;float:none!important;clear:none!important;width:auto!important}body.single-product #main .product.type-product:has(.cn-dca-resumen) .summary .product_title{margin-top:0!important}body.single-product #main .product.type-product:has(.cn-dca-resumen) .summary-container>:is(p.price,.avada-availability){display:block!important}body.single-product #main .product.type-product:has(.cn-dca-resumen)>.woocommerce-tabs{margin-top:24px!important}body.single-product #main .product.type-product:has(.cn-dca-resumen)>:is(.social-share,.related,.upsells){clear:both!important}body.single-product #main .product.type-product:has(.cn-dca-resumen) .woocommerce-tabs .tabs{float:none!important;width:100%!important;display:flex!important;gap:20px!important}body.single-product #main .product.type-product:has(.cn-dca-resumen) .woocommerce-tabs .tabs li{margin-right:0!important}body.single-product #main .product.type-product:has(.cn-dca-resumen) .woocommerce-tabs .panel{float:none!important;width:100%!important;padding:24px!important;margin-left:0!important;margin-right:0!important;box-sizing:border-box!important}}

Mostrar descripción

Descarga Circular Animada — WEB + WordPress

Un botón circular de descarga con anillo de progreso animado y estados claros: listo, descargando, éxito y fallo. Sirve para ofrecer archivos en tu web con una presentación más cuidada que un enlace normal. Una compra de US$5 incluye las dos versiones: la versión web independiente (HTML, CSS y JavaScript) y el plugin para WordPress. Versión 1.1.0.

Cómo funciona

  • Progreso real, no simulado: el porcentaje solo se muestra cuando el archivo es del mismo dominio, el servidor indica su tamaño (Content-Length) sin compresión y el navegador puede leer la transferencia. En los demás casos (archivos de más de 8 MiB, sin tamaño fiable o comprimidos) la descarga la gestiona el navegador y el anillo gira sin porcentaje.
  • Archivos de otro dominio: se abren en una pestaña nueva, sin sacar al visitante de la página.
  • Estados claros: SUCCESS cuando el navegador ha recibido todos los bytes e iniciado la descarga; FAIL ante errores del servidor, respuestas incompletas o fallos de red; botón «Cancelar» durante la descarga. La página no puede confirmar que el archivo quedó guardado en disco, y así se indica.
  • Sin descargas duplicadas: los clics repetidos durante una descarga se ignoran.
  • Demostración de éxito y fallo: secuencias simuladas, marcadas como DEMO, para mostrar los estados sin transferir archivos.
  • Accesibilidad: se maneja con el teclado, el foco no se pierde, los cambios de estado se anuncian a los lectores de pantalla y respeta «reducir movimiento».
  • Privacidad: sin recursos externos, analítica, rastreadores ni cookies propias.

Versión web (HTML, CSS y JavaScript)

Sin dependencias. Cargas descarga-circular.css y descarga-circular.js, copias el marcado del widget e indicas la dirección y el nombre del archivo con atributos data-dc-*. Incluye una API sencilla (DescargaCircular.mount, evento dc:statechange), una página de demostración y un ejemplo de integración.

Plugin para WordPress

Dos shortcodes: [descarga_circular id="123"] para descargar un archivo público de la Biblioteca de medios (con el texto del botón opcional label="…") y [descarga_circular_demo] para mostrar la demostración. El plugin solo acepta adjuntos públicos guardados en la carpeta de subidas del sitio; no admite rutas ni URLs arbitrarias. Sin panel de ajustes ni configuración global; los estilos y scripts solo se cargan en las páginas que usan los shortcodes.

Qué recibes

Dos archivos descargables: descarga-circular-web-1.1.0.zip (versión web) y descarga-circular-animada-1.1.0.zip (plugin instalable desde Plugins → Añadir nuevo → Subir plugin). Cada uno incluye sus instrucciones (LEEME.txt) y la licencia GPL-2.0-or-later.

Requisitos y límites

Versión web: un servidor web o hosting (no funciona abriendo el archivo con doble clic). Plugin: WordPress 6.0 o superior y PHP 7.4 o superior. Probado en Microsoft Edge y Brave (motor Chromium); Firefox y Safari aún no se han probado. El aspecto dentro de WordPress puede variar según los estilos del tema. Las etiquetas de estado (READY, DOWNLOADING, SUCCESS, FAIL) están en inglés.

Demostración: demo.creanexo.com/descarga-circular-animada

Valoraciones

No hay valoraciones aún.

Solo los usuarios registrados que hayan comprado este producto pueden hacer una valoración.

Productos relacionados

Go to Top