Dieprogress()CSSFunktion gibt einen<number> Wert zurück, der die Position eines Werts (des Fortschrittswerts) relativ zu zwei anderen Werten (dem Fortschrittsstart- und Ende-Wert) darstellt.

Syntax

/* With fixed progress value */progress(300, 0, 1000)progress(50px, 0px, 100px)progress(50%, 30%, 80%)/* With custom property */progress(var(--container-width), 320, 1200)/* Inside math function */calc((progress(var(--container-width), 20%, 80%) / 2) + 0.5)/* Inside non-math function */rgb(  calc(255 * progress(var(--container-width), 320px, 1200px))  calc(255 * progress(var(--container-width), 320px, 1200px)) 255 / 0.5);/* Math function inside progress() */progress(calc(20 + 30), 0, 100)

Parameter

Dieprogress() Funktion nimmt drei durch Kommata getrennte<calc-sum> Ausdrücke als Parameter an:

progress(<calc-sum>, <calc-sum>, <calc-sum>)

Diese entsprechen:

Fortschritt

Der Wert, dessen Position relativ zu den anderen beiden Werten berechnet wird.

Fortschrittsstart

Die untere Grenze des Fortschritts.

Fortschrittsende

Die obere Grenze des Fortschritts.

Rückgabewert

Ein<number>, der die Position des Fortschrittswerts relativ zu den anderen beiden Werten darstellt. Dies wird wie folgt berechnet:

(progress - progress start) / (progress end - progress start)

Wenn der Fortschrittswert zwischen den Fortschrittsstart- und Ende-Werten liegt, liegt der Rückgabewert zwischen0 und1 und stellt einen Prozentsatz dar. Wenn der Fortschrittswert kleiner als der Fortschrittsstartwert oder größer als der Fortschrittsendwert ist, bleibt die Funktion gültig, aber der Rückgabewert wird auf0 oder1 begrenzt, jeweils.

Beschreibung

Die CSSprogress() Funktion bietet eine Möglichkeit, ein Fortschrittsverhältnis zu berechnen, was nützlich ist für Anwendungsfälle wie Fortschrittsbalkenanimationen oder Boxen, die einblenden, wenn sie breiter werden, um ihren Inhalt anzuzeigen.

Die einfachstmögliche Verwendung könnte so aussehen:

opacity: progress(5, 0, 10);

In diesem Fall wäre der berechnete Wert vonopacity0.5, da 5 genau mittig zwischen0 und10 liegt.

Erlaubte Einheitentypen

Die Parameter einerprogress() Funktion können mathematische Ausdrücke oder einfache Werte sein. Die Werte (oder Ergebnisse von Ausdrücken) können jeden<number>,<dimension> oder<percentage> Wert annehmen. Sie können unterschiedliche Einheiten haben, müssen aber alle vom selben Typ sein, sonst ist die Funktion ungültig.

Das zuvor gesehene Beispiel ist gültig — alle seine Parameter sind einheitenlose<number> Werte:

progress(5, 0, 10)

Das nächste Beispiel ist ebenfalls gültig — alle seine Parameter haben<length> Einheiten. Im Hintergrund werden die berechneten Werte für die Berechnung verwendet. Angenommen, diefont-size beträgt16px zum Zeitpunkt der Berechnung, dann wird3em zu48px aufgelöst, was48% des Weges zwischen0px und100px ist, sodass der Rückgabewert0.48 beträgt.

progress(3em, 0px, 100px)

Die letzten beiden Beispiele in diesem Abschnitt sind jedoch nicht gültig. Die Typen stimmen nicht überein, sodass die resultierenden Berechnungen keinen Sinn ergeben.

progress(3s, 0px, 100px)progress(3em, 0, 100)

Erstellen von einheitenlosen Werten

Dieprogress() Funktion gibt einheitenlose Werte zurück, daher kann sie verwendet werden, um Einheiten von Werten in derselben Weise zu entfernen wie dertan(atan2()) Hack. Beachten Sie jedoch, dass dies aufgrund der Aktualisierungen im Verhalten rund umCSS typed arithmetic auch durch einfache Division erreicht werden kann.

Kombination vonprogress() mit anderen Funktionen und benutzerdefinierten Eigenschaften

Daprogress() immer nur einen einheitenlosen Wert zwischen0 und1 zurückgibt, ist es üblich, es mit einer anderen mathematischen Funktion wiecalc() zu kombinieren, um den gewünschten Wert und die gewünschten Einheiten zu erhalten. Sie können auchCSS benutzerdefinierte Eigenschaften innerhalb vonprogress() Funktionen verwenden — dies macht Sinn, da Sie oft dieselben Werte an mehreren Stellen festlegen möchten und/oder sie auf benutzerdefinierte Eigenschaften basieren, die über JavaScript gesetzt werden.

Das folgende Beispiel berechnet, wie viel Prozent die Ansichtbreite zwischen einer minimalen Breite von320px und einer maximalen Breite von1200px beträgt. Diecalc() Funktion wird verwendet, um denprogress() Rückgabewert mit600px zu multiplizieren, um ihn in einen Pixelwert umzuwandeln, der die Hälfte des Fortschrittswerts der Ansichtbreite zwischen320px und1200px beträgt.

width: calc(progress(100vw, 320px, 1200px) * 600px);

Zum Beispiel, wenn die Ansichtbreite700px ist, wird der Fortschrittswert als((700 - 320) / (1200 - 320)) =0.431818 berechnet. Die Breite wird dann als0.431818 * 600px berechnet, was259.1px ergibt.

Das nächste Beispiel ist eine Aktualisierung des vorherigen, in dem wir benutzerdefinierte Eigenschaften für die Fortschritts-, Fortschrittsstart- und Fortschrittsendwerte verwendet haben.

width: calc(  progress(      var(--container-width),      var(--custom-min-width),      var(--custom-max-width)    ) *    var(--custom-max-width));

Es ist möglich,progress() Funktionen zu verwenden, um einzelne Werte innerhalb anderer Funktionen und Komponentenvorwerten innerhalb verkürzter Eigenschaftswerte zu berechnen, vorausgesetzt Ihre Funktionen geben gültige Typen für diese Werte zurück.

Dies kann zu einigen komplexen Ausdrücken führen. Zum Beispiel berechnen wir hier die ersten zwei Kanäle einerrgb() Farbe proportional zum gleichen Breitenverhältnis wie zuvor:

background-color: rgb(  calc(      255 *        progress(          var(--container-width),          var(--custom-min-width),          var(--custom-max-width)        )    )    calc(      255 *        progress(          var(--container-width),          var(--custom-min-width),          var(--custom-max-width)        )    )    255 / 0.5);

Formale Syntax

<progress()> =
progress(<calc-sum> ,<calc-sum> ,<calc-sum>)

<calc-sum> =
<calc-product>[[ '+'| '-']<calc-product>]*

<calc-product> =
<calc-value>[[ '*'| /]<calc-value>]*

<calc-value> =
<number>|
<dimension>|
<percentage>|
<calc-keyword>|
  (<calc-sum>)

<calc-keyword> =
e|
pi|
infinity|
-infinity|
NaN

Beispiele

Grundlegende Verwendung vonprogress()

In diesem Beispiel zeigen wir die grundlegende Verwendung derprogress() Funktion, um diewidth eines Fortschrittsbalkens auf einen Prozentsatz zu setzen, der dem Fortschrittsverhältnis seiner Elternwidth zwischen seinermin-width undmax-width entspricht.

HTML

Unser HTML enthält ein<section> Element, das unseren Inhalt darstellt, und ein<div> Element, das den Fortschrittsbalken darstellt.

<section>  <div></div></section>

CSS

In unserem CSS setzen wir zuerst einige benutzerdefinierte Eigenschaften auf unserem<section> Element, um seinemin-width,max-width undwidth darzustellen. Dann setzen wir diese Eigenschaften auf die entsprechenden benutzerdefinierten Eigenschaftswerte, bevor wir unserem<section> einen solidenbackground-color geben, damit es sichtbar ist.

html {  height: 100%;  font-family: sans-serif;}body,section {  height: inherit;}

section {  --custom-min-width: 300px;  --custom-max-width: 700px;  --custom-width: 600px;  min-width: var(--custom-min-width);  max-width: var(--custom-max-width);  width: var(--custom-width);  background-color: cyan;}

Nun zu unserem<div> — Wir geben ihm zuerst eineheight und eine dunklebackground-color, damit es sich von unserem<section> Element abhebt. Dann berechnen wir seinewidth, indem wir eineprogress() Funktion verwenden, um das Fortschrittsverhältnis der Breite zwischen der minimalen und maximalen Breite zu berechnen und dann einecalc() Funktion verwenden, um denprogress() Rückgabewert mit100% zu multiplizieren, um einen Prozentsatz zurückzugeben.

.progress {  height: 4px;  background-color: red;  width: calc(    progress(        var(--custom-width),        var(--custom-min-width),        var(--custom-max-width)      ) *      100%  );}

Ergebnis

Dieses Demo wird wie folgt dargestellt:

Die Breite des<div> beträgt75% der<section> Breite, da diemin-width400px beträgt, diemax-width700px und diewidth600px, was75% des Abstands zwischen den vorherigen beiden Werten entspricht.

Größenänderungseffekte auf einem Container

Dieses Beispiel zeigt einige komplexere Verwendungen derprogress() Funktion, was zu interessanten Effekten führt, wenn die Größe des Browserfensters geändert wird.

Dieses Beispiel funktioniert viel besser, wenn es in voller Größe in einem Desktop-Browser-Tab gerendert wird. Daher haben wir es nicht als eingebettetes Live-Beispiel auf dieser Seite dargestellt. Stattdessen finden Sie es live unterCSSprogress() Funktionsdemo ausgeführt (siehe auch denQuellcode).

Öffnen Sie das Live-Beispiel in einem separaten Tab, und versuchen Sie, die Breite des Browserfensters zu vergrößern und zu verkleinern, um den Effekt zu sehen. Lassen Sie dies offen, damit Sie darauf zurückkommen können, während Sie die Erklärung unten lesen.

HTML

Unser HTML enthält ein<article> Element, das den Rest unseres Inhalts enthält, und zwei<section> Elemente — eines, um ein Hintergrundbild zu platzieren, und das andere, um unseren Inhalt zu enthalten. Der<section> enthält auch ein<div>, das einen Breitenfortschrittsbalken darstellt, genauso wie der in unserem vorherigen Demo. Wir haben den Rest des Inhalts der Kürze halber weggelassen.

<article>  <section></section>  <section>    <div></div>    <!-- Content here -->  </section></article>

JavaScript

In unserem Skript holen wir uns zuerst eine Referenz auf unser<article> Element. Dann definieren wir eine Funktion namenssetContainerWidth(), die die Client-Breite des<article> überElement.getBoundingClientRect() abruft und eine benutzerdefinierte Eigenschaft darauf einstellt, die--container-width genannt wird. Diese ist gleich der abgerundeten Client-Breite, zu derpx hinzugefügt wird.

Wir setzen dann einenresize Ereignis-Listener auf dasWindow Objekt, dassetContainerWidth() ausführt, wenn die Größe des Browserfensters geändert wird. Wir führen es auch einmal aus, um die--container-width benutzerdefinierte Eigenschaft auf dem<article> Element beim Laden der Seite zu setzen.

const articleElem = document.querySelector("article");function setContainerWidth() {  const clientWidth = articleElem.getBoundingClientRect().width;  articleElem.style.setProperty(    "--container-width",    `${Math.floor(clientWidth)}px`,  );}window.addEventListener("resize", setContainerWidth);setContainerWidth();

Mit dieser Einrichtung können wir nun einige Eigenschaftswerte basierend auf der--container-width festlegen, sodass Teile unseres Designs dynamisch geändert werden, wenn die Fenstergröße angepasst wird.

CSS

Der folgende Abschnitt erklärt nur das CSS, das relevant ist, wie wir dieprogress() Funktion im Demo verwendet haben. Für das vollständige CSS, siehe denCSS-Quellcode.

Wir zentrieren zuerst das<article> im<body> mitflexbox, setzen dann einige benutzerdefinierte Eigenschaften darauf, um diemin-width undmax-width Werte darzustellen, die wir anderswo verwenden werden. Wir setzen dann das<article> Element, indem wir ihmmin-width undmax-width Werte geben, die gleich den zuvor gesetzten benutzerdefinierten Eigenschaften sind. Wir setzen seineposition aufrelative, damit wir seinen Inhalt relativ dazu positionieren können, dann geben wir ihm eine prozentualewidth, eine festeheight, und eineborder.

body {  height: inherit;  display: flex;  justify-content: center;  align-items: center;  --custom-min-width: 320px;  --custom-max-width: 1200px;}article {  min-width: var(--custom-min-width);  max-width: var(--custom-max-width);  position: relative;  width: 70%;  height: 600px;  border: 3px solid black;}

Nun zu unserem<div> mitprogress. Wir setzen seinewidth gleich einem Prozentsatz, basierend auf dem Fortschrittsverhältnis der--container-width benutzerdefinierten Eigenschaft, die über JavaScript auf dem<article> Element festgelegt wurde, zwischen dermin-width undmax-width (wir verwenden hier dieselben benutzerdefinierten Eigenschaften für die zweite und dritteprogress() Parameter wie wir für diemin-width undmax-width des<article> verwendet haben).

Wir geben ihm auch eineheight undbackground-color, dann positionieren wir ihn absolut in der linken oberen Ecke des<article>.

.progress {  width: calc(    progress(        var(--container-width),        var(--custom-min-width),        var(--custom-max-width)      ) *      100%  );  height: 4px;  background-color: red;  position: absolute;  top: 0;  left: 0;}

Als nächstes betrachten wir unser<section> mit Hintergrund. Wir positionieren es absolut relativ zu unserem<article>, indem wirinset: 0 darauf setzen, sodass es die gleiche Größe annimmt und darüber liegt. Wir setzen dann ein ziemlich breitesbackground-image darauf, und positionieren das Hintergrundbild, indem wir der Eigenschaftbackground-position-x denselben Wert geben wie der Breitenprozentwert des Fortschrittsbalkens. Dies hat den Effekt, dass, wenn Sie die Breite des Browserfensters vergrößern, das Hintergrundbild nach links verschoben wird und einen schönen Bildscroll-Effekt erzeugt.

.background {  position: absolute;  inset: 0;  background-image: url("https://mdn.github.io/shared-assets/images/examples/wide-background.jpg");  background-position-x: calc(    progress(        var(--container-width),        var(--custom-min-width),        var(--custom-max-width)      ) *      100%  );}

Wir positionieren das<section> mit Inhalt absolut, sodass es über dem Hintergrund<section> liegt, und geben ihm ein wenigpadding. Dann variieren wir zwei Eigenschaftswerte, während das Browserfenster angepasst wird, unter Verwendung desselben Fortschrittsverhältnisses wie zuvor:

• Wir variieren die R- und G-Komponenten derbackground-color, indem wir das Fortschrittsverhältnis in beiden Fällen mit 255 multiplizieren, um einen proportionalen Kanalwert zu erhalten. Wenn das Fenster breiter wird, wird die Hintergrundfarbe weniger blau und mehr weiß, wodurch die Szene aussieht, als würde sie von Nacht zu Tag wechseln (der Farbwert hat eine Deckkraft von0.5, sodass er wie ein Farbton für das darunterliegende Bild wirkt).
• Wir variieren dieopacity, damit der Inhalt ein wenig einblendet, wenn das Fenster breiter wird.

.content {  position: absolute;  inset: 0;  padding: 20px;  background-color: rgb(    calc(        255 *          progress(            var(--container-width),            var(--custom-min-width),            var(--custom-max-width)          )      )      calc(        255 *          progress(            var(--container-width),            var(--custom-min-width),            var(--custom-max-width)          )      )      255 / 0.5  );  opacity: calc(    (        progress(            var(--container-width),            var(--custom-min-width),            var(--custom-max-width)          ) /          2      ) +      0.5  );}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS Werte und Einheiten Modul
• Containereigenschaftsabfragen
• Medienabfragen
• Feature-Abfragen