Как показать процент загрузки или скачивания в ReactJS?
Мы можем показать процент загрузки или загрузки в ReactJS с помощью компонента CircularProgress с некоторой базовой логикой для отображения процента. В Material UI для React этот компонент доступен нам, и его очень легко интегрировать. Мы можем сделать это с помощью ReactJS, используя следующий подход.
Создание приложения React и установка модуля:
Шаг 1. Создайте приложение React, используя следующую команду.
npx создать-реагировать-приложение имя папки
Шаг 2: После создания папки проекта, т.е. имени папки , перейдите в нее с помощью следующей команды.
cd имя папки
Шаг 3. После создания приложения ReactJS установите модули material-ui с помощью следующей команды.
npm install @ material-ui / core
App.js: теперь запишите следующий код в файл App.js. Здесь App - это наш компонент по умолчанию, в котором мы написали наш код.
Javascript
import React from 'react' ; import Box from '@material-ui/core/Box' ; import CircularProgress from '@material-ui/core/CircularProgress' ; export function default App() { const [uploadOrDownloadCount, setUploadOrDownloadCount] = React.useState(10); React.useEffect(() => { const timer = setInterval(() => { setUploadOrDownloadCount( (beforeValue) => (beforeValue >= 100 ? 0 : beforeValue + 10)); }, 800); return () => { clearInterval(timer); }; }, []); return ( <div> <h4>How to show upload/download percentage in ReactJS?</h4> <Box position= "relative" display= "inline-flex" > <CircularProgress variant= "determinate" value={uploadOrDownloadCount} /> <Box bottom={0} right={0} top={0} justifyContent= "center" left={0} display= "flex" alignItems= "center" position= "absolute" > {`${Math.round(uploadOrDownloadCount)}%`} </Box> </Box> </div> ); } |
Шаг для запуска приложения: запустите приложение, используя следующую команду из корневого каталога проекта:
npm start
Вывод: Теперь откройте браузер и перейдите по адресу http: // localhost: 3000 / , вы увидите следующий результат.