CSS Ring Percentage
CSS Percent Circle
In web design, percentage circles are a common element, often used to show progress, proportions, or percentages. By using CSS, we can easily create a beautiful circular percentage effect without relying on https://coder-cafe.com/wp-content/uploads/2025/09/images or JavaScript.
How it works
The key to creating a circular percentage effect lies in two parts: a 360-degree rotating circular background and a progress indicator that displays the percentage. We can achieve this effect using the CSS properties border-radius, transform, and animation.
First, we’ll create a circular div element as the background for the ring, then add an inner div element as the progress bar. By setting the border-radius and border properties, we’ll transform the background element into a hollow ring. Using the rotate function in the transform property, we’ll control the rotation angle of the progress bar, creating a dynamic percentage effect.
Implementation Steps
Step 1: HTML Structure
First, we’ll need to create the HTML structure that contains the background and progress bar. Here’s a simple example:
<div class="circle-progress">
<div class="progress"></div>
</div>
In this structure, .circle-progress is the background element for the circle, and .progress is the progress bar element.
Step 2: CSS Style
Next, we need to add styles to these two elements. The following is a basic style setting:
.circle-progress {
width: 200px;
height: 200px;
border: 10px solid #f3f3f3;
border-radius: 50%;
position: relative;
}
.progress {
width: 100%;
height: 100%;
border: 10px solid #26a69a;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
transform: rotate(-90deg);
transform-origin: center;
animation: fill 2s forwards;
}
@keyframes fill {
from {
transform: rotate(-90deg);
}
to {
transform: rotate(calc(-90deg + (var(--percentage) * 3.6deg)));
}
}
In this CSS code, we define the styles for the circle’s background and the progress bar. border-radius: 50% transforms the element into a circle, and transform: rotate(-90deg) initializes the progress bar’s position. By defining a rotation animation using the animation attribute and @keyframes, we can control the progress bar’s rotation.
Step 3: Dynamically Setting the Percentage with JavaScript
To dynamically change the progress of the circle, we can use JavaScript to set the --percentage variable of the .progress element to achieve different percentage effects. Here is a simple example:
const circle = document.querySelector('.progress');
function setPercentage(percentage) { circle.style.setProperty('--percentage', percentage);
}
// Set the percentage to 50%
setPercentage(50);
By calling the setPercentage function and passing in different percentage values, we can change the progress bar’s display in real time.
Example
Here is a complete example code showing a basic circle percentage effect:
<!DOCTYPE html>
<html Tutorial">html>
<head>
<title>CSS Circle Progress</title>
<style>
.circle-progress {
width: 200px;
height: 200px;
border: 10px solid #f3f3f3;
border-radius: 50%;
position: relative;
}
.progress {
width: 100%;
height: 100%;
border: 10px solid #26a69a;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
transform: rotate(-90deg);
transform-origin: center;
animation: fill 2s forwards;
}
@keyframes fill {
from {
transform: rotate(-90deg);
}
to {
transform: rotate(calc(-90deg + (var(--percentage) * 3.6deg)));
}
}
</style>
</head>
<body>
<div class="circle-progress">
<div class="progress"></div>
</div>
<script>
const circle = document.querySelector('.progress');
function setPercentage(percentage) {
circle.style.setProperty('--percentage', percentage);
}
// Set the percentage to 75%
setPercentage(75);
</script>
</body>
</html>
In this example, we defined a circular background and a progress bar structure, and set the progress bar’s percentage to 75% using JavaScript. When the page loads, the progress bar will display a 75% fill effect.
Conclusion
Using CSS and some simple JavaScript code, we can easily create a beautiful circular percentage effect. This effect can be used to display information such as progress bars, ratios, or percentages, providing users with a more intuitive visual experience.