mirror of
https://github.com/luxfi/design.git
synced 2026-10-30 16:58:57 +00:00
zeekay
d954227524
Monochrome, dark by default. One hue rendered through an opacity ladder. Tokens (color, type, spacing, radius, elevation, motion) + core/forms/navigation/ overlays components + brand guidelines + ui kit. The single source of truth for every Lux surface — loadable and editable.
12 lines
616 B
React
12 lines
616 B
React
import React from 'react'
|
|
|
|
export function Progress({ value = 0, max = 100, height = 6, style, ...rest }) {
|
|
const pct = Math.max(0, Math.min(100, (value / max) * 100))
|
|
return (
|
|
<div role="progressbar" aria-valuenow={value} aria-valuemin={0} aria-valuemax={max}
|
|
style={{position:'relative',width:'100%',height,borderRadius:'var(--radius-full)',background:'var(--neutral-800)',overflow:'hidden',...style}} {...rest}>
|
|
<div style={{height:'100%',width:pct+'%',background:'var(--primary)',borderRadius:'var(--radius-full)',transition:'width var(--duration-base) var(--ease-out)'}} />
|
|
</div>
|
|
)
|
|
}
|