CSS circular progress bar is a visual element of the website. These design elements, made up of HTML, CSS, and in some cases, JavaScript, are used to display the progress or loading status or skills section of a website. Today we will show you how to design a circular progress bar animation using only HTML and CSS.
Hope you have seen the above tutorial on CSS Circular Progress Bar Animation. This type of circular progress bar animation can be seen to represent any process, task, or loading state of a website in an aesthetic way to the visitor. This CSS progress bar is like a pie chart or a ring that gradually fills up or changes color as the process progresses. This animation can be controlled by customizing various CSS properties.
You Make Also Like:
- Bootstrap 5 Landing Page Website Design
- HTML CSS Responsive Webpage Layout
- Logo Slider using HTML CSS
Nowadays many websites use CSS progress bar to show visitors the progress of an action or process. Some of the many uses of this element are the file upload process, form submission process, page loading effects, task progress tracking, portfolio section, download process, etc. A circular progress bar can be created with CSS without JavaScript because CSS has many easy-to-use animation properties. It is possible to make lightweight and efficient quality circular progress bar animation using CSS. The CSS circular progress bar is an essential component of web interfaces that improve user experience, aesthetic appeal, and informational value.
SOURCE CODE:
<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progress circle animation </title>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<svg class="item">
<circle class="circle" cx="50%" cy="50%" r="45%"></circle>
<circle class="bar" cx="50%" cy="50%" r="45%"></circle>
</svg>
<div class="content">75%</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.wrapper {
position: relative;
width: 350px;
height: 350px;
}
.item {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.circle {
fill: none;
stroke: #ddd;
stroke-width: 35px;
stroke-dasharray: 735.48;
stroke-dashoffset: 0;
}
.bar {
fill: none;
stroke: orangered;
stroke-width: 35px;
stroke-dasharray: 735.48;
stroke-dashoffset: 0;
animation: animate 2s ease-in-out forwards;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1.4);
font-size: 50px;
font-weight: bold;
font-family: 'Bebas Neue', sans-serif;
}
@keyframes animate {
from {
stroke-dashoffset: 735.48;
}
to {
stroke-dashoffset: calc(735.48 - (735.48 * 75) / 100);
}
}
For the Original Post CLICK HERE
Top comments (0)