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()?

The CSS progress() function is a mathematical mapping function (Chrome 138+) that converts an input value from one numeric range into a 0-1 progress value. For example, progress(scroll-position from 0 to 500) returns 0 when the scroll position is 0, 1 when it reaches 500, and 0.5 at 250. This progress value can drive any numeric CSS property, eliminating complex calc() chains for scroll-linked effects, viewport-relative sizing, and custom property interpolation.

Respuesta rápida

Use CSS progress(input from min to max) to map any numeric value to a 0-1 progress range. Drive opacity, scale, transform, color-mix percentages, or any number-accepting CSS property based on scroll position, viewport dimensions, or custom properties. Chrome 138+. Wrap in clamp(0, ..., 1) to bound the output.

Limitaciones

  • progress() requires Chrome 138+. Firefox, Safari, and older Chrome versions do not support it. Use scroll-driven animation keyframes or JavaScript-based scroll listeners as fallbacks for cross-browser support.
  • The function only works with numeric CSS properties. It cannot directly drive color stops, gradient angles, or shape functions. For color transitions, combine progress() with color-mix() using the progress value as the mixing percentage.
  • scroll-position in progress() measures the document scroll position by default, not an element's scroll container. Use self-scroll-position for a specific scroll container, but ensure the container is scrollable and has a defined scroll range.

Cómo usar esta herramienta

  1. Enter the input source and its range — choose from scroll-position, viewport width/height, viewport inline/block size, or a custom CSS property with its minimum and maximum values.
  2. Set the target CSS property you want to drive and its value at progress 0 and progress 1 — for example opacity 0 to 1, or scale 0.5 to 1.5.
  3. Optionally enable clamp() wrapping to keep the result bounded within the output range even when the input exceeds the defined range.
  4. Copy the generated CSS and add it to your stylesheet. The output includes both the progress() rule and the full property declaration.

Para qué puedes usarla

  • Drive a sticky header's opacity from fully transparent to opaque as the user scrolls from 0 to 200 pixels down the page.
  • Scale a hero image from 1 to 1.2 as the viewport width grows from 320px to 1920px, creating a subtle zoom effect on wider screens.
  • Control a color-mix() mixing percentage to transition from one color to another based on how far through a section the user has scrolled.

Casos de uso

Ejemplos prácticos

Ejemplo

Fade-in on scroll with progress()

A hero section should fade in as the user scrolls the first 300 pixels. Use progress(scroll-position from 0 to 300) mapped to opacity: the element is fully transparent at the top of the page (progress=0) and fully opaque after 300px of scroll (progress=1). No IntersectionObserver or scroll event listener needed.

Ejemplo

Responsive card scale by viewport

A card grid should scale each card from 0.9 at 320px viewport width to 1.1 at 1440px. Use progress(100vw from 320 to 1440) as the input with scale as the target property. The cards subtly grow as the viewport widens, creating a responsive grid without media queries.

Errores comunes

  • Using progress() without realizing it returns a raw 0-1 value — most properties need an additional calc() or scaling to convert progress into the desired output range, but the tool handles this mapping for you.
  • Forgetting that scroll-position is relative to the document scroll position by default — for an element's scroll container, use progress(self-scroll-position from 0 to N) instead.
  • Assuming progress() works in all CSS properties — it works in any property that accepts a number or percentage, but does not work in color functions like rgb() directly (use color-mix() instead).

Verificación

  1. Inspect the element in DevTools and confirm the computed value of the target property matches the expected value at known input positions (e.g., scroll exactly 200px and check opacity is 0.5 for a 0-to-400 range).
  2. Test the edge cases: verify the property value at the minimum and maximum input range boundaries, and test with an input value beyond the range to confirm clamp() behavior if wrapping is enabled.

FAQ

Preguntas sobre Calculadora de funcion CSS progress()

How is progress() different from scroll-driven animation timelines with view-timeline?

progress() is a pure mathematical function that maps one numeric range to 0-1 — it has no link to animation timelines, keyframes, or animation-range. Use progress() for declarative value mapping in any CSS property without creating a scroll-timeline. Use view-timeline and animation-range when you need full keyframe-based scroll-driven animations with multiple steps, easing, and direction control.

What happens when the input value is outside the defined range?

progress() returns values outside 0-1 when the input is outside the from-to range. For example, progress(x from 0 to 100) returns 1.5 when x=150. Wrap the result in clamp(0, ..., 1) to bound the output. This tool includes an optional clamp() wrapping toggle to handle this automatically.

Can progress() reference custom properties as input?

Yes. You can use any CSS custom property as the input value, such as progress(--scroll-offset from 0 to 500). This is useful when you want to drive a value based on JavaScript-set custom properties or when chaining multiple progress() calculations together through intermediate custom properties.

Herramientas relacionadas

Más herramientas css

Prueba también

Prueba también