Create Next App

Progress Bar

Avatar This is a guideline for you on how to create you first product in your store

Progress Bar

This is a guideline for you on how to create you first product in your store

Default

My Selfie

200kb

Uploading

Mobile progress Bar

0 %

mobile

100mb

React js


 import React, { useState, useEffect } from 'react';
import ProgressBar, { MobileProgressBar } from './ProgressBar';


const MyProgressBarComponent = () => {
    const [uploadProgress, setUploadProgress] = useState(0);
 useEffect(() => {
    // Simulate an upload progress change for demonstration purposes
    const interval = setInterval(() => {
      setUploadProgress((prevProgress) =>
        prevProgress < 100 ? prevProgress + 10 : 0
      );
    }, 1000);

    return () => clearInterval(interval);
  }, []);
  const handleProgressBarClose = () => {
    alert('ProgressBar closed');
  };

  return (

<div>

    <ProgressBar
      progress={uploadProgress}
      name="mobile"
      size="100mb"
      onClose={handleProgressBarClose}/>


    <MobileProgressBar
     progress={uploadProgress}
     name="mobile"
     size="100mb"
     onClose={handleProgressBarClose}/>

   
</div>
 

  );
};

export default MyProgressBarComponent;

HTMLCSSJS

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="index.css">
        <title>MyProgressBarComponent</title>
    </head>

    <body>
         <div id="progressBarContainer"></div>
        <div id="mobileProgressBarContainer"></div>
        <script src="script.js"></script>
    </body>

</html>