Leave Yamada UI a star

Star
Yamada UIYamada UIv1.6.4

Progress

Progress is a component for visually indicating progress.

Source@yamada-ui/progress

Theming

The Progress is a multi part component.

export const Progress: ComponentMultiStyle<"Progress"> = {
baseStyle: {
filledTrack: ({
colorScheme: c = "primary",
filledTrackColor,
hasStripe,
isAnimation,
}) => {
hasStripe = !isAnimation && hasStripe
return {
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",
},
}
Copied!

Edit this page on GitHub

PreviousSkeletonNextCircleProgress