Creating visually appealing and interactive web elements is a crucial part of modern web design. One such element that can significantly enhance user experience is a 3D progress bar. In this article, we will walk you through the steps to create a stunning 3D progress bar using HTML, CSS, and JavaScript. This tutorial is perfect for web developers of all levels who are looking to add an extra layer of sophistication to their projects.
Why Use a 3D Progress Bar?
A progress bar is a graphical element that visualizes the progression of a task, such as loading a page, uploading a file, or completing a form. Using a 3D progress bar not only makes your website look modern and professional but also provides a more engaging and interactive experience for your users. It adds depth and dimension, making the progress more noticeable and aesthetically pleasing.
Prerequisites
Before we dive into the tutorial, ensure you have a basic understanding of HTML, CSS, and JavaScript. You don’t need to be an expert, but knowing the fundamentals will help you follow along more easily.
Step-by-Step Guide to Creating a 3D Progress Bar
1. Setting Up Your HTML Structure
Start by setting up the basic HTML structure. This will include creating a container for your 3D progress bar.
2. Styling with CSS
Next, you’ll need to define the styles for your progress bar using CSS. This involves setting up 3D transformations, animations, and colors. CSS variables will help you manage and customize the styles more efficiently.
3. Adding JavaScript Functionality
To make your progress bar dynamic, you’ll add JavaScript to control the value and animate the progress. This will allow the bar to update and show real-time progress based on your requirements.
4. Integrating Everything Together
Finally, you’ll integrate the HTML, CSS, and JavaScript to create a cohesive and functional 3D progress bar. Ensure all components are working seamlessly together to achieve the desired effect.
Copy the Code
You can copy the code provided below to implement the 3D progress bar in your project. Simply paste it into your HTML, CSS, and JavaScript files, and customize it as needed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cylinder Animation</title>
<style>
@property --val {
syntax: "<integer>";
inherits: false;
initial-value: 52;
}
.cylinder {
transform-style: preserve-3d;
font-size: 0.8em;
--bar-length: 5em;
--bar-width: 2em;
--bar-height: 10em;
--bar-color: var(--fill-clr);
--bar-sides-color: #EBEBE325;
position: relative;
width: fit-content;
}
.cylinder .top,
.cylinder .mid,
.cylinder .bottom {
transform-style: preserve-3d;
width: var(--bar-width);
height: var(--bar-length);
border-radius: var(--bar-width)/var(--bar-length);
transition: 500ms ease;
}
.cylinder .mid {
width: calc(var(--bar-width) + var(--bar-height));
background: var(--bar-sides-color);
transition-property: width;
transition-duration: 500ms;
}
.cylinder .bottom {
background: var(--bar-color);
position: absolute;
top: 0;
width: calc(var(--bar-width) + calc(var(--val) / var(--max) * var(--bar-height)));
}
.cylinder .bottom:before {
transform-style: preserve-3d;
position: absolute;
content: '';
border-radius: inherit;
width: var(--bar-width);
height: 100%;
top: 0;
right: 0;
box-shadow: inset 0 0 calc(var(--bar-width) * .3) #0005;
}
.cylinder .bottom,
.cylinder .top:before {
animation: ani-val 10s infinite both alternate;
}
.cylinder:nth-of-type(2) .bottom,
.cylinder:nth-of-type(2) .top:before {
animation-delay: -2s;
}
.cylinder:nth-of-type(3) .bottom,
.cylinder:nth-of-type(3) .top:before {
animation-delay: -5s;
}
.cylinder .top {
position: absolute;
background: var(--bar-sides-color);
right: 0;
transition-property: margin;
transition-duration: 500ms;
transform: translateZ(0.5em);
}
.cylinder .top:before {
transform-style: preserve-3d;
position: absolute;
inset: 0;
border-radius: inherit;
filter: hue-rotate(180deg) brightness(1.2);
color: var(--fill-clr);
font-size: 1rem;
font-weight: 900;
text-shadow: 0 0 .1em #000;
content: counter(num);
counter-reset: num var(--val);
display: grid;
place-content: center;
transform: rotatey(55deg) translatez(.51em) translatex(-.5em);
}
@keyframes ani-val {
from {
--val: 0;
}
to {
--val: var(--max);
}
}
body {
min-height: 100vh;
margin: 0;
display: grid;
gap: 10vmin;
place-content: center;
background: #25282A;
color: #F5F5F0;
font-family: system-ui, sans-serif;
}
</style>
</head>
<body>
<script>
function make(val, max, clr = '#AEE1CD') {
const container = document.createElement('div');
container.classList.add('cylinder');
container.style.setProperty('--val', val);
container.style.setProperty('--max', max);
container.style.setProperty('--fill-clr', clr);
const top = document.createElement('div');
top.classList.add('top');
container.appendChild(top);
const mid = document.createElement('div');
mid.classList.add('mid');
container.appendChild(mid);
const bottom = document.createElement('div');
bottom.classList.add('bottom');
container.appendChild(bottom);
document.body.appendChild(container);
}
make(30, 100);
</script>
</body>
</html>