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 aralıklı ilerleme 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>

How do you like these docs?