Progress
Progress (진행률)
로딩 스피너라고도 불리는 진행률 표시 컴포넌트를 알아볼게요. 알 수 없는 대기 시간을 표현하거나 프로세스의 길이를 보여줄 때 사용해요. 앱을 로딩하거나, 폼을 제출하거나, 업데이트를 저장하는 동안 사용자에게 진행 상황을 알려주고 싶다면 요긴해요.
출처: 문서
본문
흔히 스피너로 알려진 진행률 표시(progress indicator)는 알 수 없는 대기 시간을 표현하거나 프로세스의 길이를 표시해요.
진행률 표시는 앱 로딩, 폼 제출, 업데이트 저장 같은 진행 중인 프로세스의 상태를 사용자에게 알려줘요.
- Determinate(확정) 표시는 작업이 얼마나 걸릴지 보여줘요.
- Indeterminate(불확정) 표시는 명시되지 않은 대기 시간을 시각화해요.
컴포넌트의 애니메이션은 JavaScript가 로드되기 전에도 동작하도록 가능한 한 CSS에 의존해요.
Circular (원형)
Circular indeterminate (불확정)
CircularProgress의 기본 버전은 불확정 스피너를 렌더링해요.
import CircularProgress from '@mui/material/CircularProgress';
import Box from '@mui/material/Box';
export default function CircularIndeterminate() {
return (
<Box sx={{ display: 'flex' }}>
<CircularProgress aria-label="Loading…" />
</Box>
);
}
Circular color (색상)
import Stack from '@mui/material/Stack';
import CircularProgress from '@mui/material/CircularProgress';
export default function CircularColor() {
return (
<Stack sx={{ color: 'grey.500' }} spacing={2} direction="row">
<CircularProgress color="secondary" aria-label="Loading…" />
<CircularProgress color="success" aria-label="Loading…" />
<CircularProgress color="inherit" aria-label="Loading…" />
</Stack>
);
}
Circular size (크기)
import Stack from '@mui/material/Stack';
import CircularProgress from '@mui/material/CircularProgress';
export default function CircularSize() {
return (
<Stack spacing={2} direction="row" sx={{ alignItems: 'center' }}>
<CircularProgress size="30px" aria-label="Loading…" />
<CircularProgress size={40} aria-label="Loading…" />
<CircularProgress size="3rem" aria-label="Loading…" />
</Stack>
);
}
Circular determinate (확정)
작업의 로딩 진행률을 지정하려면 variant prop에 determinate 값을 사용해요. 실제 진행률을 표시하려면 value prop을 사용해요.
import * as React from 'react';
import Stack from '@mui/material/Stack';
import CircularProgress from '@mui/material/CircularProgress';
export default function CircularDeterminate() {
const [progress, setProgress] = React.useState(0);
React.useEffect(() => {
const timer = setInterval(() => {
setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10));
}, 800);
return () => {
clearInterval(timer);
};
}, []);
return (
<Stack spacing={2} direction="row">
<CircularProgress variant="determinate" value={25} aria-label="Export data" />
<CircularProgress variant="determinate" value={50} aria-label="Export data" />
<CircularProgress variant="determinate" value={75} aria-label="Export data" />
<CircularProgress variant="determinate" value={100} aria-label="Export data" />
<CircularProgress
variant="determinate"
value={progress}
aria-label="Export data"
/>
</Stack>
);
}
Circular custom scale (커스텀 스케일)
기본적으로 진행률 값은 0–100 범위로 예상돼요. min과 max prop을 사용해서 이 범위를 커스터마이즈할 수 있어요.
import * as React from 'react';
import CircularProgress from '@mui/material/CircularProgress';
export default function CircularCustomScale() {
const [progress, setProgress] = React.useState(10);
React.useEffect(() => {
const timer = setInterval(() => {
setProgress((prevProgress) => (prevProgress >= 20 ? 10 : prevProgress + 2));
}, 800);
return () => {
clearInterval(timer);
};
}, []);
return (
<CircularProgress
variant="determinate"
min={10}
max={20}
value={progress}
aria-label="Loading"
/>
);
}
Circular track (트랙)
원형 트랙을 항상 보이게 하려면 enableTrackSlot prop을 전달해요.
import * as React from 'react';
import Stack from '@mui/material/Stack';
import CircularProgress from '@mui/material/CircularProgress';
export default function CircularEnableTrack() {
const [progress, setProgress] = React.useState(0);
React.useEffect(() => {
const timer = setInterval(() => {
setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10));
}, 800);
return () => {
clearInterval(timer);
};
}, []);
return (
<Stack spacing={2} direction="row">
<CircularProgress enableTrackSlot size="30px" aria-label="Loading…" />
<CircularProgress enableTrackSlot size={40} aria-label="Loading…" />
<CircularProgress enableTrackSlot size="3rem" aria-label="Loading…" />
<CircularProgress
enableTrackSlot
variant="determinate"
value={70}
aria-label="Export data"
/>
<CircularProgress
enableTrackSlot
variant="determinate"
color="secondary"
value={progress}
aria-label="Upload photos"
/>
</Stack>
);
}
대화형 통합 (Interactive integration)
다음 예제는 CircularProgress를 Button 및 FAB 컴포넌트와 통합해서, 사용자 동작으로 트리거할 수 있는 로딩 상태를 만드는 방법을 보여줘요.
import * as React from 'react';
import Box from '@mui/material/Box';
import CircularProgress from '@mui/material/CircularProgress';
import { green } from '@mui/material/colors';
import Button from '@mui/material/Button';
import Fab from '@mui/material/Fab';
import CheckIcon from '@mui/icons-material/Check';
import SaveIcon from '@mui/icons-material/Save';
export default function CircularIntegration() {
const [loading, setLoading] = React.useState(false);
const [success, setSuccess] = React.useState(false);
const timer = React.useRef<ReturnType<typeof setTimeout>>(undefined);
const buttonSx = {
...(success && {
bgcolor: green[500],
'&:hover': {
bgcolor: green[700],
},
}),
};
React.useEffect(() => {
return () => {
clearTimeout(timer.current);
};
}, []);
const handleButtonClick = () => {
if (!loading) {
setSuccess(false);
setLoading(true);
timer.current = setTimeout(() => {
setSuccess(true);
setLoading(false);
}, 2000);
}
};
return (
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<Box sx={{ m: 1, position: 'relative' }}>
<Fab
aria-label="save"
color="primary"
sx={buttonSx}
onClick={handleButtonClick}
>
{success ? <CheckIcon /> : <SaveIcon />}
</Fab>
{loading && (
<CircularProgress
aria-label="Loading…"
size={68}
sx={{
color: green[500],
position: 'absolute',
top: -6,
left: -6,
zIndex: 1,
}}
/>
)}
</Box>
<Box sx={{ m: 1, position: 'relative' }}>
<Button
variant="contained"
sx={buttonSx}
disabled={loading}
onClick={handleButtonClick}
>
Accept terms
</Button>
{loading && (
<CircularProgress
aria-label="Loading…"
size={24}
sx={{
color: green[500],
position: 'absolute',
top: '50%',
left: '50%',
marginTop: '-12px',
marginLeft: '-12px',
}}
/>
)}
</Box>
</Box>
);
}
Circular with label (레이블 포함)
이 예제는 시각적 진행률 값을 CircularProgress 컴포넌트와 통합하는 방법을 보여줘요.
import * as React from 'react';
import CircularProgress, {
CircularProgressProps,
} from '@mui/material/CircularProgress';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
function CircularProgressWithLabel(
props: CircularProgressProps & { value: number },
) {
return (
<Box sx={{ position: 'relative', display: 'inline-flex' }}>
<CircularProgress
variant="determinate"
aria-label="Upload photos"
{...props}
/>
<Box
sx={{
top: 0,
left: 0,
bottom: 0,
right: 0,
position: 'absolute',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Typography
variant="caption"
component="div"
sx={{ color: 'text.secondary' }}
>{`${Math.round(props.value)}%`}</Typography>
</Box>
</Box>
);
}
export default function CircularWithValueLabel() {
const [progress, setProgress] = React.useState(10);
React.useEffect(() => {
const timer = setInterval(() => {
setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10));
}, 800);
return () => {
clearInterval(timer);
};
}, []);
return <CircularProgressWithLabel value={progress} />;
}
Linear (선형)
Linear indeterminate (불확정)
LinearProgress는 기본적으로 불확정 진행률 막대를 보여줘요.
import Box from '@mui/material/Box';
import LinearProgress from '@mui/material/LinearProgress';
export default function LinearIndeterminate() {
return (
<Box sx={{ width: '100%' }}>
<LinearProgress aria-label="Loading…" />
</Box>
);
}
Linear query (쿼리)
불확정 애니메이션의 방향을 반대로 하려면 variant prop에 query 값을 사용해요.
import Box from '@mui/material/Box';
import LinearProgress from '@mui/material/LinearProgress';
export default function LinearQuery() {
return (
<Box sx={{ width: '100%' }}>
<LinearProgress aria-label="Loading…" variant="query" />
</Box>
);
}
Linear color (색상)
import Stack from '@mui/material/Stack';
import LinearProgress from '@mui/material/LinearProgress';
export default function LinearColor() {
return (
<Stack sx={{ width: '100%', color: 'grey.500' }} spacing={2}>
<LinearProgress color="secondary" aria-label="Loading…" />
<LinearProgress color="success" aria-label="Loading…" />
<LinearProgress color="inherit" aria-label="Loading…" />
</Stack>
);
}
Linear determinate (확정)
로딩 막대에 진행률을 표시하려면 variant prop에 determinate 값을 value prop과 함께 사용해요.
import * as React from 'react';
import Box from '@mui/material/Box';
import LinearProgress from '@mui/material/LinearProgress';
export default function LinearDeterminate() {
const [progress, setProgress] = React.useState(0);
React.useEffect(() => {
const timer = setInterval(() => {
setProgress((oldProgress) => {
if (oldProgress === 100) {
return 0;
}
const diff = Math.random() * 10;
return Math.min(oldProgress + diff, 100);
});
}, 500);
return () => {
clearInterval(timer);
};
}, []);
return (
<Box sx={{ width: '100%' }}>
<LinearProgress
variant="determinate"
value={progress}
aria-label="Export data"
/>
</Box>
);
}
Linear buffer (버퍼)
실제 진행률 값과 함께 버퍼 진행률을 표시하려면 variant prop에 buffer 값을 사용해요. valueBuffer prop은 value prop보다 커야 해요.
import * as React from 'react';
import Box from '@mui/material/Box';
import LinearProgress from '@mui/material/LinearProgress';
export default function LinearBuffer() {
const [progress, setProgress] = React.useState(0);
const [buffer, setBuffer] = React.useState(10);
const progressRef = React.useRef(() => {});
React.useEffect(() => {
progressRef.current = () => {
if (progress === 100) {
setProgress(0);
setBuffer(10);
} else {
setProgress(progress + 1);
if (buffer < 100 && progress % 5 === 0) {
const newBuffer = buffer + 1 + Math.random() * 10;
setBuffer(newBuffer > 100 ? 100 : newBuffer);
}
}
};
});
React.useEffect(() => {
const timer = setInterval(() => {
progressRef.current();
}, 100);
return () => {
clearInterval(timer);
};
}, []);
return (
<Box sx={{ width: '100%' }}>
<LinearProgress
variant="buffer"
value={progress}
valueBuffer={buffer}
aria-label="Loading…"
/>
</Box>
);
}
Linear with label (레이블 포함)
진행률 value는 진행률 막대 옆에 표시할 수도 있어요.
import * as React from 'react';
import LinearProgress, { LinearProgressProps } from '@mui/material/LinearProgress';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
function LinearProgressWithLabelAndValue(
props: LinearProgressProps & { value: number },
) {
const progressId = React.useId();
return (
<div>
<Typography id={progressId} variant="body2" color="text.secondary">
Uploading photos…
</Typography>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<Box sx={{ width: '100%', mr: 1 }}>
<LinearProgress
variant="determinate"
aria-labelledby={progressId}
{...props}
/>
</Box>
<Box sx={{ minWidth: 35 }}>
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
{`${Math.round(props.value)}%`}
</Typography>
</Box>
</Box>
</div>
);
}
export default function LinearWithValueLabel() {
const [progress, setProgress] = React.useState(10);
React.useEffect(() => {
const timer = setInterval(() => {
setProgress((prevProgress) => (prevProgress >= 100 ? 10 : prevProgress + 10));
}, 800);
return () => {
clearInterval(timer);
};
}, []);
return (
<Box sx={{ width: '100%' }}>
<LinearProgressWithLabelAndValue value={progress} />
</Box>
);
}
Linear with custom value text (커스텀 값 텍스트 포함)
기본적으로 진행률 값은 보조 기술에 백분율로 읽혀요. 진행률 값이 백분율과 관련이 없을 때는 aria-valuetext를 사용해요.
import * as React from 'react';
import LinearProgress, { LinearProgressProps } from '@mui/material/LinearProgress';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
type LinearProgressWithLabelAndValueProps = LinearProgressProps & {
min: number;
max: number;
value: number;
};
function LinearProgressWithLabelAndValue({
max,
min,
value,
...rest
}: LinearProgressWithLabelAndValueProps) {
const progressText = `Elevator at floor ${value} out of ${max}.`;
const progressId = React.useId();
return (
<div>
<Typography
id={progressId}
variant="body2"
color="text.secondary"
sx={{ mr: 1 }}
>
Elevator status
</Typography>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<Box sx={{ width: '100%', mr: 1 }}>
<LinearProgress
variant="determinate"
aria-labelledby={progressId}
aria-valuetext={progressText}
min={min}
max={max}
value={value}
{...rest}
/>
</Box>
<Box sx={{ whiteSpace: 'nowrap' }}>
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
{progressText}
</Typography>
</Box>
</Box>
</div>
);
}
export default function LinearWithAriaValueText() {
const [progress, setProgress] = React.useState(1);
React.useEffect(() => {
const timer = setInterval(() => {
setProgress((prevProgress) => (prevProgress >= 10 ? 1 : prevProgress + 1));
}, 800);
return () => {
clearInterval(timer);
};
}, []);
return (
<Box sx={{ width: '100%' }}>
<LinearProgressWithLabelAndValue value={progress} min={1} max={10} />
</Box>
);
}
커스터마이즈 (Customization)
컴포넌트를 커스터마이즈하는 몇 가지 예제예요. 이에 대해 더 자세히 알아보려면 overrides 문서 페이지를 참고하세요.
import * as React from 'react';
import { styled } from '@mui/material/styles';
import Stack from '@mui/material/Stack';
import CircularProgress, {
circularProgressClasses,
CircularProgressProps,
} from '@mui/material/CircularProgress';
import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
height: 10,
borderRadius: 5,
[`&.${linearProgressClasses.colorPrimary}`]: {
backgroundColor: theme.palette.grey[200],
...theme.applyStyles('dark', {
backgroundColor: theme.palette.grey[800],
}),
},
[`& .${linearProgressClasses.bar}`]: {
borderRadius: 5,
backgroundColor: '#1a90ff',
...theme.applyStyles('dark', {
backgroundColor: '#308fe8',
}),
},
}));
// Inspired by the former Facebook spinners.
function FacebookCircularProgress(props: CircularProgressProps) {
return (
<CircularProgress
variant="indeterminate"
disableShrink
enableTrackSlot
sx={(theme) => ({
color: '#1a90ff',
animationDuration: '550ms',
[`& .${circularProgressClasses.circle}`]: {
strokeLinecap: 'round',
},
[`& .${circularProgressClasses.track}`]: {
opacity: 1,
stroke: (theme.vars || theme).palette.grey[200],
...theme.applyStyles('dark', {
stroke: (theme.vars || theme).palette.grey[800],
}),
},
...theme.applyStyles('dark', {
color: '#308fe8',
}),
})}
size={40}
thickness={4}
aria-label="Loading…"
{...props}
/>
);
}
// From https://github.com/mui/material-ui/issues/9496#issuecomment-959408221
function GradientCircularProgress() {
return (
<React.Fragment>
<svg width={0} height={0}>
<defs>
<linearGradient id="my_gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stopColor="#e01cd5" />
<stop offset="100%" stopColor="#1CB5E0" />
</linearGradient>
</defs>
</svg>
<CircularProgress
aria-label="Loading…"
sx={{ 'svg circle': { stroke: 'url(#my_gradient)' } }}
/>
</React.Fragment>
);
}
export default function CustomizedProgressBars() {
return (
<Stack spacing={2} sx={{ flexGrow: 1 }}>
<FacebookCircularProgress />
<GradientCircularProgress />
<br />
<BorderLinearProgress
variant="determinate"
value={50}
aria-label="Export data"
/>
</Stack>
);
}
표시 지연 (Delaying appearance)
응답 시간에 대해 알아야 할 3가지 중요한 한계가 있어요. ButtonBase 컴포넌트의 리플 효과는 사용자가 UI가 즉각 반응한다고 느끼게 해줘요. 일반적으로 0.1초보다 크고 1.0초보다 작은 지연 동안에는 특별한 피드백이 필요 없어요. 1.0초 이후에는 로더를 표시해서 사용자의 사고 흐름이 끊기지 않게 할 수 있어요.
import * as React from 'react';
import Box from '@mui/material/Box';
import Fade from '@mui/material/Fade';
import Button from '@mui/material/Button';
import CircularProgress from '@mui/material/CircularProgress';
import Typography from '@mui/material/Typography';
export default function DelayingAppearance() {
const [loading, setLoading] = React.useState(false);
const [query, setQuery] = React.useState('idle');
const timerRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);
React.useEffect(
() => () => {
clearTimeout(timerRef.current);
},
[],
);
const handleClickLoading = () => {
setLoading((prevLoading) => !prevLoading);
};
const handleClickQuery = () => {
if (timerRef.current) {
clearTimeout(timerRef.current);
}
if (query !== 'idle') {
setQuery('idle');
return;
}
setQuery('progress');
timerRef.current = setTimeout(() => {
setQuery('success');
}, 2000);
};
return (
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<Box sx={{ height: 40 }}>
<Fade
in={loading}
style={{
transitionDelay: loading ? '800ms' : '0ms',
}}
unmountOnExit
>
<CircularProgress aria-label="Loading…" />
</Fade>
</Box>
<Button onClick={handleClickLoading} sx={{ m: 2 }}>
{loading ? 'Stop loading' : 'Loading'}
</Button>
<Box sx={{ height: 40 }}>
{query === 'success' ? (
<Typography>Success!</Typography>
) : (
<Fade
in={query === 'progress'}
style={{
transitionDelay: query === 'progress' ? '800ms' : '0ms',
}}
unmountOnExit
>
<CircularProgress aria-label="Loading…" />
</Fade>
)}
</Box>
<Button onClick={handleClickQuery} sx={{ m: 2 }}>
{query !== 'idle' ? 'Reset' : 'Simulate a load'}
</Button>
</Box>
);
}
접근성 (Accessibility)
진행률 막대는 보이는 텍스트 레이블의 id를 가리키는 aria-labelledby를 설정하거나 aria-label 속성을 사용해서 접근 가능한 이름을 지정해야 해요.
제한 사항 (Limitations)
높은 CPU 부하 (High CPU load)
무거운 부하에서 스트로크 대시 애니메이션을 잃거나 무작위 CircularProgress 링 너비를 볼 수 있어요. 메인 렌더링 스레드를 차단하지 않도록 프로세서 집약적 작업은 웹 워커에서 또는 배치로 실행해야 해요.
그게 불가능하다면, disableShrink prop을 활용해서 문제를 완화할 수 있어요. 이 이슈를 참고하세요.
import CircularProgress from '@mui/material/CircularProgress';
export default function CircularUnderLoad() {
return <CircularProgress disableShrink aria-label="Loading…" />;
}
고빈도 업데이트 (High frequency updates)
LinearProgress는 서로 다른 값 사이의 부드러운 업데이트를 제공하기 위해 CSS transform 속성에 transition을 사용해요. 기본 transition 기간은 200ms예요. 부모 컴포넌트가 value prop을 너무 빨리 업데이트하게 되면, 재렌더링과 진행률 막대가 완전히 업데이트되는 사이에 최소 200ms의 지연을 경험하게 돼요.
초당 30회 이상의 재렌더링을 수행해야 한다면 transition을 비활성화하는 것이 좋아요:
.MuiLinearProgress-bar {
transition: none;
}
CircularProgress API
Demos (데모)
이 React 컴포넌트 사용에 대한 예시와 세부 사항은 컴포넌트 데모 페이지를 방문하세요:
Import (임포트)
import CircularProgress from '@mui/material/CircularProgress';
// or
import { CircularProgress } from '@mui/material';
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| classes | object |
- | No | Override or extend the styles applied to the component. |
| color | 'inherit' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | string |
'primary' |
No | |
| disableShrink | bool |
false |
No | |
| enableTrackSlot | bool |
false |
No | |
| max | number |
100 |
No | |
| min | number |
0 |
No | |
| size | number | string |
40 |
No | |
| sx | Array<func | object | bool> | func | object |
- | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| thickness | number |
3.6 |
No | |
| value | number |
props.min ?? 0 |
No | |
| variant | 'determinate' | 'indeterminate' |
'indeterminate' |
No |
Note: The
refis forwarded to the root element (HTMLSpanElement).
Any other props supplied will be provided to the root element (native element).
Theme default props (테마 기본 props)
MuiCircularProgress를 사용해서 테마로 이 컴포넌트의 기본 props를 변경할 수 있어요.
CSS
Rule name (규칙 이름)
| Global class | Rule name | Description |
|---|---|---|
| - | circle | Styles applied to the circle svg path. |
| - | circleDisableShrink | Styles applied to the circle svg path if disableShrink={true}. |
| - | colorPrimary | Styles applied to the root element if color="primary". |
| - | colorSecondary | Styles applied to the root element if color="secondary". |
| - | determinate | Styles applied to the root element if variant="determinate". |
| - | indeterminate | Styles applied to the root element if variant="indeterminate". |
| - | root | Styles applied to the root element. |
| - | svg | Styles applied to the svg element. |
| - | track | Styles applied to the track slot if enableTrackSlot={true}. |
Source code (소스 코드)
이 페이지에서 원하는 정보를 찾지 못했다면, 더 자세한 내용을 위해 컴포넌트의 구현을 살펴보는 것이 좋아요.
LinearProgress API
Demos (데모)
이 React 컴포넌트 사용에 대한 예시와 세부 사항은 컴포넌트 데모 페이지를 방문하세요:
Import (임포트)
import LinearProgress from '@mui/material/LinearProgress';
// or
import { LinearProgress } from '@mui/material';
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| classes | object |
- | No | Override or extend the styles applied to the component. |
| color | 'inherit' | 'primary' | 'secondary' | string |
'primary' |
No | |
| max | number |
100 |
No | |
| min | number |
0 |
No | |
| sx | Array<func | object | bool> | func | object |
- | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| value | number |
- | No | |
| valueBuffer | number |
- | No | |
| variant | 'buffer' | 'determinate' | 'indeterminate' | 'query' |
'indeterminate' |
No |
Note: The
refis forwarded to the root element (HTMLSpanElement).
Any other props supplied will be provided to the root element (native element).
Theme default props (테마 기본 props)
MuiLinearProgress를 사용해서 테마로 이 컴포넌트의 기본 props를 변경할 수 있어요.
CSS
Rule name (규칙 이름)
| Global class | Rule name | Description |
|---|---|---|
| - | bar | Styles applied to the layered bar1 and bar2 elements. |
| - | bar1 | Styles applied to the bar1 element. |
| - | bar2 | Styles applied to the bar2 element. |
| - | buffer | Styles applied to the root element if variant="buffer". |
| - | colorPrimary | Styles applied to the root and bar2 element if color="primary"; bar2 if variant="buffer". |
| - | colorSecondary | Styles applied to the root and bar2 elements if color="secondary"; bar2 if variant="buffer". |
| - | dashed | Styles applied to the additional bar element if variant="buffer". |
| - | determinate | Styles applied to the root element if variant="determinate". |
| - | indeterminate | Styles applied to the root element if variant="indeterminate". |
| - | query | Styles applied to the root element if variant="query". |
| - | root | Styles applied to the root element. |
Source code (소스 코드)
이 페이지에서 원하는 정보를 찾지 못했다면, 더 자세한 내용을 위해 컴포넌트의 구현을 살펴보는 것이 좋아요.