CSS Circular Progress Bar Animation

#css #html #webdev #animation

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:

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

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE