用CSS做出炫酷的动态圆形进度条

前端

2024-01-03 15:41:55

CSS动态圆形进度条：让您的网站更具吸引力

什么是CSS动态圆形进度条？

CSS动态圆形进度条是一种使用级联样式表（CSS）创建的进度指示器。与传统进度条不同，CSS动态圆形进度条更加美观，可自定义，并可显示加载进度或其他类型的进度信息。

创建CSS动态圆形进度条

创建CSS动态圆形进度条需要三个步骤：

1. HTML结构

首先，创建一个HTML文件并添加以下代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .progress-bar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: #ccc;
    }

    .progress-bar-fill {
      width: 0%;
      height: 100%;
      background-color: #000;
      transition: width 1s ease-in-out;
    }
  </style>
</head>
<body>
  <div class="progress-bar">
    <div class="progress-bar-fill"></div>
  </div>
</body>
</html>

2. CSS样式

接下来，在CSS文件中添加以下代码：

.progress-bar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ccc;
}

.progress-bar-fill {
  width: 0%;
  height: 100%;
  background-color: #000;
  transition: width 1s ease-in-out;
}

/* 当进度条宽度达到100%时，改变颜色 */
.progress-bar-fill.complete {
  background-color: #00ff00;
}

3. JavaScript动画

最后，在JavaScript文件中添加以下代码：

var progressBar = document.querySelector('.progress-bar-fill');

function setProgress(percent) {
  progressBar.style.width = percent + '%';

  if (percent == 100) {
    progressBar.classList.add('complete');
  }
}

setInterval(function() {
  var percent = progressBar.style.width.replace('%', '');
  percent = parseInt(percent) + 1;

  setProgress(percent);
}, 1000);