Building a Neumorphic Progress Bar in React
In this tutorial, we’ll create a neumorphic progress bar using React and CSS. The progress bar will display a percentage value from 1 to 100, accompanied by an animated neumorphic effect.
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:
bash
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:
“`jsx
import React from ‘react’;
const Neumorphism = () => {
return (
);
};
export default Neumorphism;
“`
Add the following styles to the Neumorphism.css file:
“`css
.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:
“`jsx
import React from ‘react’;
const ProgressBar = () => {
return (
);
};
export default ProgressBar;
“`
Add the following styles to the ProgressBar.css file:
“`css
.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:
“`jsx
import React, { useState, useEffect } from ‘react’;
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 (
Progress: {progress}%
);
};
export default Neumorphism;
“`
Conclusion
In this tutorial, we created a neumorphic progress bar using React and CSS. We used the box-shadow property to create a 3D-like effect, and the stroke-dasharray and stroke-dashoffset properties to animate the progress bar. Finally, we used the useState and useEffect hooks to display the progress value.