İlerleme · Armada

Doğrusal

Etiketli, tonlu, çizgili ve belirsiz.

Yükleniyor72%

Disk88%

Hazırlanıyor

Kodu göster

<div class="sc-col sc-narrow">
    <armada:progress :value="72" label="Yükleniyor" show-value />
    <armada:progress :value="45" tone="success" />
    <armada:progress :value="88" tone="danger" label="Disk" show-value size="8px" />
    <armada:progress :value="60" striped tone="purple" />
    <armada:progress label="Hazırlanıyor" />
</div>

Segmentli

Depolama dağılımı gibi parçalar.

Medya 42%Belgeler 18%Diğer 12%

Kodu göster

<div class="sc-narrow">
    <armada:progress :segments="[['value' => 42, 'tone' => 'primary'], ['value' => 18, 'tone' => 'success'], ['value' => 12, 'tone' => 'warning']]" size="10px" />
    <div class="arm-chart__legend" style="margin-top:10px"><span><i style="--c:var(--arm-primary)"></i>Medya 42%</span><span><i style="--c:var(--arm-success)"></i>Belgeler 18%</span><span><i style="--c:var(--arm-warning)"></i>Diğer 12%</span></div>
</div>

Dairesel ve spinner

25% 68% 92%

Kodu göster

<div class="sc-row" style="gap:24px">
    <armada:progress circular :value="25" show-value />
    <armada:progress circular :value="68" show-value tone="success" size="72px" />
    <armada:progress circular :value="92" show-value tone="danger" size="40px" />
    <armada:progress circular size="40px" />
    <armada:spinner />
    <armada:spinner size="24px" style="color:var(--arm-primary)" />
</div>

Özellikler

<armada:progress>

Prop	Varsayılan	Not
`value`	`null`	0–100; null = indeterminate
`tone`	`'primary'`
`label`	`null`
`show-value`	`false`
`circular`	`false`
`size`	`null`	circular: 40px … ; linear: track height (4px)
`striped`	`false`
`segments`	`null`	[['value' => 40, 'tone' => 'success'], …] stacked bar

<armada:spinner>

Değerler: e.g. 24px

Prop	Varsayılan	Not
`size`	`null`