Tarayıcıda yerleşik olarak gelen <progress> bileşeni, bir ilerleme göstergesi oluşturmanızı sağlar.

<progress value={0.5} />

Referans

<progress>

Ekranda bir ilerleme göstergesi göstermek için yerleşik tarayıcı bileşeni <progress>’i render edin.

<progress value={0.5} />

Daha fazla örnek için aşağıya bakınız.

Prop’lar

<progress> tüm ortak eleman prop’larını destekler.

Ek olarak, <progress> bu prop’ları destekler:

  • max: Bir sayı. value için maksimum değeri belirtir. Varsayılan değeri 1’dir.
  • value: 0 ve max arasında bir sayı, veya belirsiz (ne zaman tamamlanacağı belli olmayan) ilerlemeler için null. Yapılan işin ne kadar tamamlandığını belirtir.

Kullanım

Bir ilerleme göstergesini kontrol etme

Ekranda bir ilerleme göstergesi göstermek için, <progress> bileşenini render edin. 0 ve belirlediğiniz max değeri arasında bir value sayısı girebilirsiniz. Eğer max değerini belirtmezseniz, varsayılan değer 1 olarak kabul edilir.

İşlem devam etmiyorsa, ilerleme göstergesini belirsiz bir duruma getirmek için value={null} değerini geçin.

export default function App() {
  return (
    <>
      <progress value={0} />
      <progress value={0.5} />
      <progress value={0.7} />
      <progress value={75} max={100} />
      <progress value={1} />
      <progress value={null} />
    </>
  );
}
Previous<option>
Next<select>