Bileşenler

Loader

Bir şeyin yüklendiğini gösterir: süre belli değilse dönen ikon, ilerleme belliyse çubuk, ya da marka işareti.

TasarımcıGeliştirici

Playground

TipTon

Figma varyantı

🎛 Type=Infinitive
Style=Primary

Tipler

Infinite, ton renkli dairede refresh ikonunu döndürür. Finite bir çubuğu doldurur; altında isteğe bağlı yüzde ve miktar olur. Brand, Ladom tuşunu döndürür.

%5445 Mb/ 98 Mb

Tokenlar

Part	Size	Color
Infinite circle	`24px (--space-xlarge)`	`--color-{tone} (secondary: --color-secondary-soft)`
Infinite icon	`16px`	`--color-on-{tone}`
Finite track	`--loader-track-height`	`--color-{tone}-soft`
Finite fill	`--loader-track-height`	`--color-{tone}`
Value text	`ui/text small/regular`	`--color-foreground-medium-emphasis`
Amount	`ui/footnote/regular`	`--color-foreground-high-emphasis / --color-foreground-medium-emphasis`
Brand	`24px`	`--color-static-brand-color`

Hareket

Infinite saniyede bir tur, doğrusal döner. Brand, Figma’daki T0–T8 adımlarını (0°, 15°, 30°, 60°, 90°, 105°, 135°, 165°, 180°) bir saniyede izler, ikinci yarım tur için tekrarlar. Kullanıcı azaltılmış hareket isterse ikisi de durur.

Figma notları

Figma’da dönüş için süre ya da easing yok; kod, Button loader’ı gibi tur başına 1s kullanır.
Finitive yalnızca Primary’de var; kod her tonu uygular (tone-soft zemin, tone dolgu).
Finitive çubuğu 5px yüksekliğinde, ham değer; kod --loader-track-height ekler. Zemin ve dolgu köşeleri (8px ve 4px) 5px çubukta ikisi de yuvarlak görünür.
Brand varyantında tuşun altında tamamen örtülen primary bir refresh vektörü var; kod yalnızca tuşu çizer.
Secondary spinner, diğer tonların aksine daire rengi olarak secondary-soft kullanır.

Figma’dan koda

Figma	React
🎛 Type = Infinitive	`variant='infinite' (default)`
🎛 Type = Finitive	`variant='finite' value={…}`
🎛 Type = Finitive with Text	`variant='finite' value={…} valueText loaded total`
🎛 Type = Brand	`variant='brand'`
Style = Primary / … / Danger / Warning / Information	`tone='primary' / … / 'error' / 'warning' / 'info'`