使用 HTML 和 CSS 的圆形进度条

圆形进度条是一种流行的网页元素，主要用于商业或个人网站。如果您想使用 HTML 和 CSS 创建圆形进度条，那么本文将为您提供帮助。在这里，我将向您展示如何制作一个简单的 CSS 圆形进度条。

当你加载页面时，此动画将从零开始，直至你指定的含义。这里使用了一定比例的文本，但文本本身并未使用动画。它的制作方式非常简单。

✅观看实时预览👉👉圆形进度条

在本文中，我将逐步向您展示如何制作这个圆形进度条设计。要制作它，您需要了解基本的 HTML 和 CSS。

步骤1：圆形进度条的基本结构

我使用 HTML 和 CSS 创建了圆形进度条的基本结构。我在网页上创建了一个小圆圈。

这个圆圈的宽和高都是 150 px。圆圈的背景颜色是白色，并使用边距将其放置在中间。

<div class="circle-wrap">
  <div class="circle">

  </div>
</div>

body {
  font-family: "Roboto", sans-serif;
  background:#d2eaf1;
}

.circle-wrap {
  margin: 150px auto;
  width: 150px;
  height: 150px;
  background: #fefcff;
  border-radius: 50%;
  border: 1px solid #cdcbd0;
}

步骤2：简单CSS圆形进度条的一半

正如我之前所说，这个圆圈里的动画被分成了两部分。这意味着动画根据客户价值被分成了两部分。

我已经完成了这两部分的第一部分。宽度和高度都设为 150，以使动画的大小与圆形进度条相同。同样，border-radius 50%也使用了将其设置为圆形。

这里我将背景颜色设置为蓝色。如果你想用其他颜色播放动画，可以在这里使用。

<div class="mask half">
    <div class="fill"></div>
</div>

.circle-wrap .circle .mask,
.circle-wrap .circle .fill {
  width: 150px;
  height: 150px;
  position: absolute;
  border-radius: 50%;
}

.mask .fill {
  clip: rect(0px, 75px, 150px, 0px);
  background-color: #227ded;
}

步骤 3：圆形进度条的另一半

现在我已经设计好了圆形进度条的另一半。我在这里通过添加动画的方式，将时间设置为三秒。这意味着，当这个页面打开时，动画需要三秒钟的时间才能从零开始到达你设置的含义。

这里使用了 135 度的变换。这个变换将决定动画在这个圆的哪个位置结束。

➤ 我们知道360度组成一个圆，由于这里我们把CSS圆形进度条分成了两部分，所以每部分都是180度。

135-degree➤ 这里我们使用 Transform 为每个部分设置了动画。所以这将是270 degrees整个圆的动画。这里我想将动画增加到 75%，所以我使用了 270 度。

（360/100）* 75 = 270

您可以根据需要确定此程度的值。例如，如果您希望圆形进度条的动画达到 80%。但要达到这个效果，您必须使用144 degrees here。最后，我使用 @keyframes 实现了这个动画。

<div class="mask full">
   <div class="fill"></div>
</div>

.circle-wrap .circle .mask {
  clip: rect(0px, 150px, 150px, 75px);
}

.mask.full,
.circle .fill {
  animation: fill ease-in-out 3s;
  transform: rotate(135deg);
}

@keyframes fill{
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(135deg);
  }
}

步骤 4：在圆形进度条中创建百分比

现在我在这个圆形进度条中添加了百分比。虽然没有添加动画百分比。

使用基本的 HTML 和 CSS 代码添加文本。我使用了text-align: centerposition:absolute将文本放置在圆形进度条的中间。

我将border-radius: 50%其背景宽度和高度设置为 122 像素，并设置为圆形。这里我调整了font-size: 2em文本的大小。

<div class="inside-circle"> 75% </div>

.circle-wrap .inside-circle {
  width: 122px;
  height: 122px;
  border-radius: 50%;
  background: #d2eaf1;
  line-height: 120px;
  text-align: center;
  margin-top: 14px;
  margin-left: 14px;
  color: #1e51dc;
  position: absolute;
  z-index: 100;
  font-weight: 700;
  font-size: 2em;
}

相关文章：

如上图所示，这个 CSS 圆形进度条现在已完全完成。希望您能从本文中了解我如何使用 HTML 和 CSS 创建这个圆形进度条。

您可以访问我的博客以获取更多类似的教程。😊
https://www.foolishdeveloper.com/

文章来源：https://dev.to/shantanu_jana/circular-progress-bar-using-html-and-css-1oda