Fortschritt (Progress)

Progress indicators commonly known as spinners, express an unspecified wait time or display the length of a process. The animation works with CSS, not JavaScript.

Fortschrittsanzeigen informieren Benutzer über den Status laufender Prozesse, z. B. Laden einer App, Senden eines Formulars oder Speichern von Updates. Sie kommunizieren den Status der App und zeigen verfügbare Aktionen an, beispielsweise, ob Benutzer vom aktuellen Bildschirm weg navigieren können.

Bestimmte Indikatoren zeigen an, wie lange eine Operation dauert.

Unbestimmt Indikatoren visualisieren eine nicht angegebene Wartezeit.

Fortschritt als Gruppe

Wenn Sie den Fortschritt für eine Folge von Prozessen anzeigen, geben Sie den Gesamtfortschritt und nicht den Fortschritt der einzelnen Aktivitäten an.

Kreisförmig

Zirkulärer Fortschritt unterstützt sowohl bestimmte als auch unbestimmte Prozesse.

Bestimmte zirkuläre Fortschritte füllen die unsichtbare, kreisförmige Spur mit Farbe, wenn sich der Indikator von 0 bis 360 Grad bewegt.
Unbestimmte zirkuläree Fortschritte vergrößern und verkleinern sich, während sie sich entlang der unsichtbaren Spur bewegen.

Zirkular Unbestimmt

<CircularProgress />
<CircularProgress color="secondary" />

Interaktive Integration

Zirkular Bestimmt

<CircularProgress variant="determinate" value={progress} />
<CircularProgress variant="determinate" value={progress} color="secondary" />

Zirkular Statisch

<CircularProgress variant="static" value={5} />
<CircularProgress variant="static" value={25} />
<CircularProgress variant="static" value={50} />
<CircularProgress variant="static" value={75} />
<CircularProgress variant="static" value={100} />
<CircularProgress variant="static" value={completed} />

Linear

Linearer Fortschritt Indikator.

Linear Unbestimmt

<LinearProgress />
<LinearProgress color="secondary" />

Linear Bestimmt

<LinearProgress variant="determinate" value={completed} />
<LinearProgress variant="determinate" value={completed} color="secondary" />

Linearer Puffer

<LinearProgress variant="buffer" value={completed} valueBuffer={buffer} />
<LinearProgress variant="buffer" value={completed} valueBuffer={buffer} color="secondary" />

Linear Abfrage

<LinearProgress variant="query" />
<LinearProgress variant="query" color="secondary" />

Nicht-standardmäßige Bereiche

Die Fortschrittskomponenten akzeptieren einen Wert im Bereich von 0 - 100. Dies vereinfacht die Benutzer von Bildschirmleseprogrammen, wenn dies die voreingestellten Min / Max-Werte sind. Manchmal arbeiten Sie jedoch mit einer Datenquelle, bei der die Werte außerhalb dieses Bereichs liegen. So können Sie einen Wert in einem beliebigen Bereich auf eine Skala von 0 - 100 leicht umwandeln:

// MIN = Minimaler erwarteter Wert
// MAX = Maximaler erwarteter Wert
// Funktion zur Normalisierung der Werte (MIN / MAX kann integriert werden)
const normalize = Wert => (Wert - MIN) * 100 / (MAX - MIN.));

// Beispielkomponente, die an der Stelle des Renderns die Funktion "normalise" verwendet.
function Progress(props) {
  return (
    <React.Fragment>
      <CircularProgress variant="determinate" value={normalise(props.value)} />
      <LinearProgress variant="determinate" value={normalise(props.value)} />
    </React.Fragment>
  )
}

Individueller Fortschritt

Hier sind einige Beispiele, wie man die Komponente anpassen kann. Mehr dazu erfahren Sie auf der Überschreibungsdokumentationsseite.

Erscheinung verzögern

Es gibt 3 wichtige Grenzwerte, um die Reaktionszeit zu kennen. Der Ripple Effekt der ButtonBase Komponente stellt sicher, dass der Benutzer das Gefühl hat, dass das System sofort reagiert. Normalerweise ist keine spezielle Rückmeldung bei Verzögerungen von mehr als 0,1 Sekunden und weniger als 1,0 Sekunden erforderlich. Nach 1,0 Sekund können Sie einen Fortschritt anzeigen, um den Gedankenfluss des Benutzers nicht zu unterbrechen.

Einschränkungen

Bei starker Belastung verlieren Sie möglicherweise die Strich-Animation oder sehen zufällige CircularProgress-Ringbreiten. Sie sollten prozessorintensive Vorgänge in einem Web-Worker oder in Batches ausführen, um den Haupt-Rendering-Thread nicht zu blockieren.

schwere Last

When it's not possible, you can leverage the disableShrink property to mitigate the issue. See this issue.

<CircularProgress disableShrink />