DEV Community

Cover image for Create a neumorphic progress bar in React
Matt Angelosanto for LogRocket

Posted on • Originally published at blog.logrocket.com

Create a neumorphic progress bar in React

Written by Emmanuel Odioko✏️

Introduction

We have all come across a progress bar on a mobile device at least once, such as while installing anything from Google.

Our goal in this article is to build an animated, neumorphic progress bar using React and CSS. The progress bar graphics will be accompanied by a textual representation of the progress in a percentage format ranging from 1–100.

At the end of this tutorial, this is what we should have: Neumorphic Progress Bar

In this article, we will learn how to build and style a neumorphic progress bar in React through the following sections:

What is neumorphism?

Neumorphism, also known as soft UI or the improvement of skeuomorphism, uses highlights and the box-shadow properties in CSS to make elements appear as if they float above the UI.

If you know skeuomorphism, well, neumorphism is the new version of it. It is a product of flat and skeuomorphic designs. According to many resources out there, Alexander Plyuto is the father of this design, as he was the first to post a design using this style on dribble in 2019.

Setting up the development area

Prerequisites

Readers should have foreknowledge of using SVGs in React and should also install:

  • React 18
  • Node.js ≥ v16.14.0

The first step to getting our project running is to create a folder for the project. I named mine progress-bar.

Install React. I will do this by running this in my code editor:

npx create-react-app progress-bar @version 18
Enter fullscreen mode Exit fullscreen mode

Change into the progress-bar folder and run:

npm start
Enter fullscreen mode Exit fullscreen mode

Our React app should show up in your browser. Lastly, to get everything all set, delete the unneeded files and everything returned in our JSX.

Properties of neumorphism

This eye-catching design is possible thanks to one major CSS property used in its development: the box-shadow. It’s advisable to know your way around the box-shadow property in CSS, because there is literally no way to implement neumorphism without this property.

Here’s a quick refresher in case you need it: Properties Of Neumorphism

Create a progress-bar component

There are three major steps to achieving our goal:

  1. Create a neumorphic circle
  2. Create an SVG circle
  3. Add JavaScript functionality

Create a neumorphic circle

We will need a neumorphic component to get started; we can name it Neumorphism.js. This component will have two divs, which have classNames attached to them for styling.

Let’s import these into our main App.js to enable it to render in browsers at localhost:3000.

//IMPORT COMPONENT
import React from 'react';
import Neumorphism from './Neumorphism';
import './App.css';

function App() {
 return (
   <main>
     <Neumorphism />
   </main>

 );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Our component file should look like this:

//NEUMORPHISM.JS

import React from 'react';
import './App.css';

function App() {
 return (
   <main className='container'>
     <div className="outside-progress-bar">
    <div className='inside-progress-bar'>
      <p> Neurmophism</p>
    </div>
   </div>
   </main>
 );
}
Enter fullscreen mode Exit fullscreen mode

Over with the divs, we need the styling and animation for this application.

Styling with CSS

The first step of our project is creating a neumorphic circle in our neumorphism.js component. Since we are creating a progress bar, centering our div is advisable. Let's get it done.

.container {
   height: 100Vh;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: rgb(178, 190, 181);
}

//you can also add 30px of padding to center the container
Enter fullscreen mode Exit fullscreen mode

Adding the neumorphism effect

For our neumorphic effect, we’ll need to create two circles of the dimensions 160px and 140px, respectively, to display the progression effect. Let's get that done by adding basic styles to our classNames:

.circle1 {
   height: 160px;
   width: 160px;
   border: 1px solid black;
   border-radius: 50%;
   padding: 3%;
}

.circle2 {
   height: 140px;
   width: 140x;
   border: 1px solid black;
   border-radius: 50%;
   height: 100%;
}
Enter fullscreen mode Exit fullscreen mode

This is where we add a box-shadow to create the effects of neumorphism on our circle:

.circle1 {
   height: 160px;
   width: 160px;
   border-radius: 50%;
   padding: 3%;
   box-shadow: -3px -3px 10px #ffffff73, 
               2px 5px 5px rgba(94, 104, 121, 288);
}

.circle2 {
   height: 140px;
   width: 140x;
   border-radius: 50%;
   height: 100%;
   box-shadow: -3px -3px 10px #ffffff73, 
               inset 1px 3px 5px rgba(94, 104, 121, 288);
}
Enter fullscreen mode Exit fullscreen mode

Adding Neumorphism Effect Undoubtedly, this looks really great.

Implementing the progress bar

We need to display a number that we can add functionality to, so it can display the percentage of our app’s progression. A div and styles are needed to accomplish this.

<div>
   <p>100%</p>
</div>
Enter fullscreen mode Exit fullscreen mode
//center the paragraph

display: flex;
align-items: center;
justify-content: center;
Enter fullscreen mode Exit fullscreen mode

Implementing Progress Bar

Using SVGs

Now, we’ll use SVG tags in React to fit into our neumorphic circle and display our progression.

How are we able to make a circle that would fit in our neumorphic circle? It's logical to get the size of the circle, which can be gotten from the browser's console using the ctrl+shift+i command in the browser. Using SVGs To Display Progress

In our case, we have the outer-circle set to 200px by 200px, and the inner-circle set to 160px x 160px, with padding of 20px. This gives us an idea of exactly what the dimensions of our SVG circle should be.

Let's get this done. Here are the steps:

  1. First, we create a component for our SVG
  2. Then, get the SVG tag in our JSX
  3. Lastly, we input the dimensions of the circle cx, cy, and r CSS attribute
import React from 'react';
import './progress.css';

function Progress(){
 return(
   <main className='container'>
       <div>
       <svg  className='circle'>
         <circle cx="100px" cy="100px" r="90px"  />
       </svg>
     </div>
   </main>
)
}

export default Progress
Enter fullscreen mode Exit fullscreen mode

We need to import this component into our main App.js, so we can render it in our browser as we did earlier.

import React from 'react';
import Neumorphism from './Neumorphism';
import Progress from './Progress';
import './App.css';

function App() {
 return (
   <main>
     <Neumorphism />
     <Progress />
   </main>

 );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Here is what it looks like in our browser now: Example In Browser

At this point, we need to make our SVG circle fit in our neumorphic circle above. With no doubt, the position-absolute CSS property will get the job done fastest.

.circle {
       height: 300px;
       width: 300px;
       position: absolute;
       bottom: 20%;
       right: 34.3%;
   }
Enter fullscreen mode Exit fullscreen mode

Making SVG Circle Fit Neumorphic Circle I reduced the height and width of the circle to show how position-absolute gets the job done.

We obviously can’t leave the SVG display progression over our neumorphic circle while it’s filled, which takes us to our next step.

Set the fill to none and add a stroke of 20px to fit in perfectly:

stroke-width: 20px;
fill: none;
stroke: black;
Enter fullscreen mode Exit fullscreen mode

Editing Fill And Font Now, let’s add a blur to the stroke, just because it makes it more attractive:

stroke: rgba(0, 0, 0, 0.1);
Enter fullscreen mode Exit fullscreen mode

Adding Blur

Our next step is to animate our stroke. Using a stroke-dasharray to trace out the pattern of dashes used in our circle, we’ll outline the animation of this shape more easily. In our case, it is 565px.

We tried 400 and we got this.We tried 400 and we got this

565 is the perfect match.565 is the perfect match.

We’ll also use a stroke-dashoffset to take off whatever the stroke-dasharray has rendered. We needed the stroke-dasharray because, when the stroke-dasharray renders the full shape of the circle, the offset takes the rendered stroke-dasharray off so it can be refilled by animation. We will set this to 565px in order to allow animation perform the refilling progression.

Our last step is to add the animation property to the SVG circle. In my case, I named it progression and gave it 1s to progress forward. We also need to set @keyframes for our progression to be 100%, and our stroke-dashoffset to 0, to get it animated. Below are the styles added:

// Styles
{ 
stroke-dasharray: 565px;
   stroke-dashoffset: 565px;
   animation: progress 1s linear forwards;
}

@keyframes progress {
   100% {
       stroke-dashoffset: 0;
   }
}
Enter fullscreen mode Exit fullscreen mode

Now, whenever we refresh, we have our progress bar well animated. Animated Progress Bar

Displaying numerical progress with the useState and useEffect React Hooks

You may have noticed that, despite creating the animation, our progress bar displays a static number of 100%. In order to get the correct amount of progression displayed numerically, we need to use the useState and useEffect Hooks to make it display our progress in percentages. These Hooks will be imported into our neumorphism.js component.

import React, { useState,useEffect } from 'react';
Enter fullscreen mode Exit fullscreen mode

Using the useState Hook, our state will be a number, preferably starting from 0.

const [progress, setprogress] = useState(0);
Enter fullscreen mode Exit fullscreen mode

Next, we need a useEffect Hook with no dependencies, so we create an interval to run every 2ms. The basic job of this interval is to set our progress. To have better control, we use the callback form from the set progress to increment by 1.

To clear up this interval and avoid an infinite loop, we employ an if statement, so when it reaches 98 or it equates to 100, it stops running, and we return the value, which should be 100%.

Lastly, we need to pass our progress in our JSX, so we can see it increment. Let's see this all done.

import React, { useState,useEffect } from 'react'; 
import './App.css';
function Neumorphism() {
 const [progress, setprogress] = useState(0);

useEffect(()=>{
 const interval= setInterval(()=>{
   setprogress((oldvalue)=>{

     let newValue=oldvalue + 1;

     if(newValue>98){
       clearInterval(interval);
     }

     return newValue;

   })
 },20)
 },[]);

 return (
   <main className='container'>
     <div className="circle1">
       <div className='circle2'>
         <div>
           <p className='text'>{progress}%</p>
         </div>
       </div>
     </div>
   </main>
 )
}

export default Neumorphism;
Enter fullscreen mode Exit fullscreen mode

Here is what we finally have: Final Animation

Conclusion

We have been able to build a progress bar with a neumorphic effect. In our case, we used it to style a progress bar to display downloaded files. Having this type of neumorphic design in your application makes your UI more attractive, and given how easy it can be to implement in your existing React apps, I hope you try it out soon.


Full visibility into production React apps

Debugging React applications can be difficult, especially when users experience issues that are hard to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.

LogRocket signup

LogRocket is like a DVR for web and mobile apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.

The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.

Top comments (0)