JS实现环形进度条（从0到100%）效果

简介

环形进度条是一种常用的进度展示方式，它以环形的形式展示出进度的百分比。在这个攻略中，我们将通过JS实现一个从0到100%的环形进度条，并提供两个示例说明。

实现

HTML结构

首先，我们需要在HTML中创建一个div元素，该元素包含两个子元素，用于实现环形进度条的效果。

<div class="progress-ring">
  <div class="progress-circle"></div>
  <div class="percent"></div>
</div>

其中，.progress-ring代表环形进度条的外部容器，.progress-circle代表进度条的圆圈，.percent代表进度百分比的文本。

CSS样式

接下来，我们需要为进度条添加样式，使其展示出环形效果。

.progress-ring {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 50px auto;
}

.progress-circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 10px solid #eee;
  border-radius: 50%;
}

.progress-circle:before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #3498db transparent;
  transform-origin: center bottom;
  animation: progress 2s ease-out forwards;
}

.percent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: bold;
}

@keyframes progress {
  from {
    transform: rotate(-90deg);
  }
  to {
    transform: rotate(calc(360 * var(--percent) / 100 - 90deg));
  }
}

其中，.progress-ring代表环形进度条的外部容器，.progress-circle代表进度条的圆圈，.percent代表进度百分比的文本。使用CSS实现了圆形、进度条颜色等效果。

JS实现

最后，我们需要通过JS来实现进度条的动态效果。我们为进度条设置了data-percent属性，通过修改该属性的值，可以动态改变进度条的百分比。

<div class="progress-ring" data-percent="0">
  <div class="progress-circle"></div>
  <div class="percent"></div>
</div>

并在JS中编写代码：

let percent = 0;
setInterval(() => {
  percent += 5;
  if (percent > 100) percent = 0;
  document.querySelector('.progress-ring').dataset.percent = percent;
  document.querySelector('.percent').innerText = percent + '%';
}, 1000);

以上代码会每秒钟将percent值加5，并修改HTML中.progress-ring元素的data-percent属性和.percent元素的innerText值，从而实现动态的进度条效果。

示例

示例一

在这个示例中，我们通过JS动态改变进度条的百分比，并将进度条和进度百分比展示在页面中。

<div class="progress-ring" data-percent="0">
  <div class="progress-circle"></div>
  <div class="percent"></div>
</div>

<script>
let percent = 0;
setInterval(() => {
  percent += 5;
  if (percent > 100) percent = 0;
  document.querySelector('.progress-ring').dataset.percent = percent;
  document.querySelector('.percent').innerText = percent + '%';
}, 1000);
</script>

示例二

在这个示例中，我们使用了第三方库CountUp.js，来实现数字由0到100的动态效果。

<script src="https://cdn.jsdelivr.net/npm/countup.js"></script>

<div class="progress-ring" data-percent="0">
  <div class="progress-circle"></div>
  <div class="percent"></div>
</div>

<script>
let percent = 0;
let countUp = new CountUp('.percent', percent + 1, {
  startVal: 0,
  duration: 2,
  useEasing: true,
  useGrouping: true,
  separator: ',',
  decimal: '.',
});
setInterval(() => {
  percent += 1;
  if (percent > 100) percent = 0;
  document.querySelector('.progress-ring').dataset.percent = percent;
  countUp.update(percent + 1);
}, 2000);
</script>

通过CountUp.js库提供的API，我们可以实现数字由0到100的动态效果，同时配合上面所提到的JS实现，实现整体效果。