jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas CSS

Gratis Calculadora de funcion CSS progress()

Calcule valores de la funcion CSS progress() para animaciones basadas en scroll y mapeo de valores.

Cargando herramienta...

Qué es Calculadora de funcion CSS progress()?

La función CSS progress() es una función de mapeo matemático (Chrome 138+) que convierte un valor de entrada de un rango numérico en un valor de progreso de 0 a 1. Por ejemplo, progress(scroll-position from 0 to 500) devuelve 0 cuando la posición de desplazamiento es 0, 1 cuando alcanza 500 y 0.5 en 250. Este valor de progreso puede controlar cualquier propiedad CSS numérica, eliminando cadenas complejas de calc() para efectos vinculados al desplazamiento, tamaños relativos al viewport e interpolación de propiedades personalizadas.

Respuesta rápida

Use CSS progress(input from min to max) para mapear cualquier valor numérico a un rango de progreso de 0 a 1. Controle opacidad, escala, transform, porcentajes de color-mix o cualquier propiedad CSS que acepte números basándose en la posición de desplazamiento, dimensiones del viewport o propiedades personalizadas. Chrome 138+. Envuelva en clamp(0, ..., 1) para acotar la salida.

Last updated: 2026-05-30

Limitaciones

  • progress() requiere Chrome 138+. Firefox, Safari y versiones antiguas de Chrome no lo soportan. Use keyframes de animación basados en desplazamiento o listeners de desplazamiento en JavaScript como alternativa para compatibilidad entre navegadores.
  • La función solo funciona con propiedades CSS numéricas. No puede controlar directamente color stops, ángulos de gradiente o funciones de forma. Para transiciones de color, combine progress() con color-mix() usando el valor de progreso como porcentaje de mezcla.
  • scroll-position en progress() mide la posición de desplazamiento del documento por defecto, no el contenedor de desplazamiento de un elemento. Use self-scroll-position para un contenedor de desplazamiento específico, pero asegúrese de que el contenedor sea desplazable y tenga un rango de desplazamiento definido.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

  1. Ingrese la fuente de entrada y su rango: elija entre scroll-position, ancho/alto del viewport, tamaño inline/block del viewport o una propiedad CSS personalizada con sus valores mínimo y máximo.
  2. Establezca la propiedad CSS de destino que desea controlar y su valor en progreso 0 y progreso 1, por ejemplo, opacidad de 0 a 1, o escala de 0.5 a 1.5.
  3. Active opcionalmente el envoltorio clamp() para mantener el resultado acotado dentro del rango de salida incluso cuando la entrada supere el rango definido.
  4. Copie el CSS generado y añádalo a su hoja de estilos. La salida incluye tanto la regla progress() como la declaración completa de la propiedad.

Para qué puedes usarla

  • Controlar la opacidad de un encabezado fijo de completamente transparente a opaco a medida que el usuario se desplaza de 0 a 200 píxeles hacia abajo.
  • Escalar una imagen principal de 1 a 1.2 a medida que el ancho del viewport crece de 320px a 1920px, creando un efecto de zoom sutil en pantallas más anchas.
  • Controlar un porcentaje de mezcla de color-mix() para transitar de un color a otro según cuánto ha avanzado el usuario en una sección.

Casos de uso

Ejemplos prácticos

Ejemplo

Aparición gradual al desplazarse con progress()

Una sección principal debe aparecer gradualmente a medida que el usuario se desplaza los primeros 300 píxeles. Use progress(scroll-position from 0 to 300) mapeado a opacity: el elemento es completamente transparente en la parte superior de la página (progress=0) y completamente opaco después de 300px de desplazamiento (progress=1). No se necesita IntersectionObserver ni listener de eventos de desplazamiento.

Ejemplo

Escala de tarjeta responsive por viewport

Una cuadrícula de tarjetas debe escalar cada tarjeta de 0.9 a 320px de ancho de viewport a 1.1 a 1440px. Use progress(100vw from 320 to 1440) como entrada con scale como propiedad destino. Las tarjetas crecen sutilmente a medida que el viewport se ensancha, creando una cuadrícula responsive sin media queries.

Errores comunes

  • Usar progress() sin saber que devuelve un valor bruto de 0 a 1: la mayoría de las propiedades necesitan un calc() adicional o escalado para convertir el progreso en el rango de salida deseado, pero la herramienta maneja este mapeo por usted.
  • Olvidar que scroll-position es relativo a la posición de desplazamiento del documento por defecto: para el contenedor de desplazamiento de un elemento, use progress(self-scroll-position from 0 to N).
  • Asumir que progress() funciona en todas las propiedades CSS: funciona en cualquier propiedad que acepte un número o porcentaje, pero no funciona directamente en funciones de color como rgb() (use color-mix() en su lugar).

Verificación

  1. Inspeccione el elemento en DevTools y confirme que el valor calculado de la propiedad destino coincida con el valor esperado en posiciones de entrada conocidas (por ejemplo, desplácese exactamente 200px y verifique que la opacidad sea 0.5 para un rango de 0 a 400).
  2. Pruebe los casos límite: verifique el valor de la propiedad en los límites mínimo y máximo del rango de entrada, y pruebe con un valor de entrada más allá del rango para confirmar el comportamiento de clamp() si el envoltorio está activado.

FAQ

Preguntas sobre Calculadora de funcion CSS progress()

¿En qué se diferencia progress() de las líneas de tiempo de animación basadas en desplazamiento con view-timeline?

progress() es una función matemática pura que mapea un rango numérico a 0-1: no tiene vínculo con líneas de tiempo de animación, keyframes o animation-range. Use progress() para mapeo declarativo de valores en cualquier propiedad CSS sin crear un scroll-timeline. Use view-timeline y animation-range cuando necesite animaciones completas basadas en keyframes con múltiples pasos, easing y control de dirección.

¿Qué sucede cuando el valor de entrada está fuera del rango definido?

progress() devuelve valores fuera de 0-1 cuando la entrada está fuera del rango from-to. Por ejemplo, progress(x from 0 to 100) devuelve 1.5 cuando x=150. Envuelva el resultado en clamp(0, ..., 1) para acotar la salida. Esta herramienta incluye un interruptor opcional de envoltorio clamp() para manejar esto automáticamente.

¿Puede progress() hacer referencia a propiedades personalizadas como entrada?

Sí. Puede usar cualquier propiedad personalizada CSS como valor de entrada, como progress(--scroll-offset from 0 to 500). Esto es útil cuando desea controlar un valor basado en propiedades personalizadas establecidas por JavaScript o al encadenar múltiples cálculos de progress() a través de propiedades personalizadas intermedias.

Herramientas relacionadas

Más herramientas css

Prueba también

Prueba también