Progress
Progress
is a component for visually indicating progress.
Theming
The Progress
is a multi part component.
If you want to change the style of the component, please check here.
export const Progress: ComponentMultiStyle<"Progress"> = {baseStyle: {filledTrack: ({colorScheme: c = "primary",filledTrackColor,hasStripe,isAnimation,}) => {hasStripe = !isAnimation && hasStripereturn {bgImage: hasStripe? `linear-gradient(45deg,$color 25%,transparent 25%,transparent 50%,$color 50%,$color 75%,transparent 75%,transparent)`: isAnimation? `linear-gradient(to right,transparent 0%,$filledTrackColor 50%,transparent 100%)`: undefined,transitionDuration: "slow",transitionProperty: "common",vars: [{name: "color",token: "colors",value: ["rgba(255, 255, 255, 0.15)", "rgba(0,0,0,0.1)"],},{name: "filledTrackColor",token: "colors",value: filledTrackColor? filledTrackColor: [`${c}.500`, `${c}.600`],},],...(hasStripe ? { bgSize: "1rem 1rem" } : {}),...(!isAnimation ? { bgColor: "$filledTrackColor" } : {}),}},track: {bg: "border",},},sizes: {xs: {track: {h: "1",},},sm: {track: {h: "2",},},md: {track: {h: "3",},},lg: {track: {h: "4",},},},defaultProps: {colorScheme: "primary",size: "md",},}
Edit this page on GitHub