Current Location：How HTML > HTML Articles > Content

Create a Circular Progress Bar using HTML and CSS

Create a Circular Progress Bar using HTML and CSS

Creating a circular progress bar is a common requirement in web development for displaying progress in a visually appealing way. This guide will walk you through the process of creating a circular progress bar using only HTML and CSS. We will start with the basics and gradually move to more complex examples. Each example will be standalone, meaning you can copy and paste the code into an HTML file and see it work without any modifications.

Basic Circular Progress Bar

Let’s start with a very basic circular progress bar. This example will create a simple circle with a border to represent the progress bar.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basic Circular Progress Bar - how2html.com</title>
<style>
  .progress-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 10px solid #eee;
    border-top-color: #3498db;
  }
</style>
</head>
<body>
<div class="progress-circle"></div>
</body>
</html>

Output:

Create a Circular Progress Bar using HTML and CSS

Adding Text Inside the Circle

Now, let’s add some text inside the circle to indicate the percentage of the progress.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Progress Circle with Text - how2html.com</title>
<style>
  .progress-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 10px solid #eee;
    border-top-color: #3498db;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
  }
</style>
</head>
<body>
<div class="progress-circle">50%</div>
</body>
</html>

Output:

Create a Circular Progress Bar using HTML and CSS

Creating a Semi-Circular Progress Bar

Sometimes, a semi-circular progress bar might fit better with your design. Here’s how you can create one.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semi-Circular Progress Bar - how2html.com</title>
<style>
  .progress-semi-circle {
    width: 100px;
    height: 50px;
    border-radius: 100px 100px 0 0;
    border: 10px solid #eee;
    border-bottom: none;
    border-top-color: #3498db;
  }
</style>
</head>
<body>
<div class="progress-semi-circle"></div>
</body>
</html>

Output:

Create a Circular Progress Bar using HTML and CSS

Animated Circular Progress Bar

Adding animation can make the progress bar more dynamic and engaging. Here’s an example of an animated circular progress bar.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animated Circular Progress Bar - how2html.com</title>
<style>
  @keyframes loading {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  .progress-circle-animated {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 10px solid #eee;
    border-top-color: #3498db;
    animation: loading 2s linear infinite;
  }
</style>
</head>
<body>
<div class="progress-circle-animated"></div>
</body>
</html>

Output:

Create a Circular Progress Bar using HTML and CSS

Customizing the Progress Bar Color

Customizing the color of your progress bar can help it match your website’s theme. Here’s how to change the color.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Color Circular Progress Bar - how2html.com</title>
<style>
  .progress-circle-custom-color {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 10px solid #eee;
    border-top-color: #e74c3c; /* Custom Color */
  }
</style>
</head>
<body>
<div class="progress-circle-custom-color"></div>
</body>
</html>

Output:

Create a Circular Progress Bar using HTML and CSS

Adding a Gradient to the Progress Bar

Gradients can add a nice visual effect to your progress bar. Here’s an example of a circular progress bar with a gradient.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gradient Circular Progress Bar - how2html.com</title>
<style>
  .progress-circle-gradient {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(#3498db 25%, #eee 25%);
    -webkit-mask:
      radial-gradient(farthest-side, transparent calc(100% - 10px), #fff 0);
  }
</style>
</head>
<body>
<div class="progress-circle-gradient"></div>
</body>
</html>

Output:

Create a Circular Progress Bar using HTML and CSS

Conclusion

In this guide, we’ve explored various ways to create a circular progress bar using HTML and CSS. From basic examples to more complex ones with animations and gradients, you now have a solid foundation to build upon and customize further to fit your specific needs. Remember, the key to mastering web development is practice and experimentation, so don’t hesitate to tweak the examples provided and make them your own. Visit how2html.com for more tutorials and tips on HTML and CSS.

Like(0)

HTML Articles

Top
Top