Building a Neumorphic Progress Bar in React

Understanding Neumorphism

Neumorphism is a design style that uses highlights and box-shadows to create a 3D-like effect on user interface elements. It’s a combination of flat and skeuomorphic designs. To achieve this effect, we’ll use the box-shadow property in CSS.

Setting Up the Project

To start, create a new React project and install the required dependencies:

• React 18
• Node.js ≥ v16.14.0

Create a new folder for the project and run the following command:

npx create-react-app neumorphic-progress-bar

Delete any unnecessary files and update the index.js file to render the App component.

Creating the Neumorphic Progress Bar

To create the neumorphic progress bar, we’ll need to create two circles: an outer circle and an inner circle. The outer circle will have a diameter of 200px, while the inner circle will have a diameter of 160px.

Create a new file called Neumorphism.js and add the following code:

import React from 'eact';

const Neumorphism = () => {
  return (
    <div className="neumorphism">
      <div className="outer-circle"></div>
      <div className="inner-circle"></div>
    </div>
  );
};

export default Neumorphism;

Add the following styles to the Neumorphism.css file:

.neumorphism {
  position: relative;
}

.outer-circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #f0f0f0;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
}

.inner-circle {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: -10px -10px 20px rgba(0, 0, 0, 0.2);
}

Adding the Progress Bar Animation

To add the progress bar animation, we’ll use the stroke-dasharray and stroke-dashoffset properties. Create a new file called ProgressBar.js and add the following code:

import React from 'eact';

const ProgressBar = () => {
  return (
    <svg>
      <circle cx="50%" cy="50%" r="80" fill="none" stroke="#fff" strokeWidth="10" />
    </svg>
  );
};

export default ProgressBar;

Add the following styles to the ProgressBar.css file:

.progress-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.progress-bar circle {
  stroke-dasharray: 565px;
  stroke-dashoffset: 565px;
  animation: progress 1s linear forwards;
}

@keyframes progress {
  100% {
    stroke-dashoffset: 0;
  }
}

Displaying the Progress Value

To display the progress value, we’ll use the useState and useEffect hooks. Update the Neumorphism.js file to include the following code:

import React, { useState, useEffect } from 'eact';

const Neumorphism = () => {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setProgress((prevProgress) => {
        if (prevProgress >= 100) {
          clearInterval(intervalId);
          return 100;
        }
        return prevProgress + 1;
      });
    }, 20);
  }, []);

  return (
    <div>
      <ProgressBar />
      <p>Progress: <

{progress}

>%</p>
    </div>
  );
};

export default Neumorphism;