/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/progress/LinearBuffer.tsx
45 строк
1 KB
Albert Yu
[docs][progress] Label all demo components (#48143)
01 апр 2026, 12:09
Не верифицирован
01 апр 2026, 12:09
124db37
Код
Авторство
О чём код?
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> ); }