当前位置：极客笔记 > HTML > HTML 问答 > 使用HTML和CSS创建圆形进度条

使用HTML和CSS创建圆形进度条

使用HTML和CSS创建圆形进度条

参考： Create a Circular Progress Bar using HTML and CSS

在现代的网页设计中，圆形进度条是一种常见的视觉元素，它可以直观地显示进度信息，如文件上传、下载、任务完成度等。本文将详细介绍如何使用HTML和CSS来创建一个圆形进度条，并提供10-20个示例代码，帮助读者更好地理解和实践。

基础圆形进度条

首先，我们从最基础的圆形进度条开始，以下是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础圆形进度条 - how2html.com</title>
<style>
  .progress-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(#4e9af1 0%, #4e9af1 75%, #e6e6e6 75%);
  }
</style>
</head>
<body>
<div class="progress-circle"></div>
</body>
</html>

Output:

使用HTML和CSS创建圆形进度条

自定义进度

接下来，我们可以通过调整conic-gradient的百分比来自定义进度条的进度：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义进度圆形进度条 - how2html.com</title>
<style>
  .progress-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(#4e9af1 0%, #4e9af1 50%, #e6e6e6 50%);
  }
</style>
</head>
<body>
<div class="progress-circle"></div>
</body>
</html>

Output:

使用HTML和CSS创建圆形进度条

带有文字的进度条

我们可以在圆形进度条中添加文字来显示具体的进度值：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>带有文字的圆形进度条 - how2html.com</title>
<style>
  .progress-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(#4e9af1 0%, #4e9af1 65%, #e6e6e6 65%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #333;
  }
</style>
</head>
<body>
<div class="progress-circle">65%</div>
</body>
</html>

Output:

使用HTML和CSS创建圆形进度条

动画效果的进度条

为了让进度条看起来更加生动，我们可以添加CSS动画来模拟进度的变化：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画效果的圆形进度条 - how2html.com</title>
<style>
  @keyframes loading {
    from { background: conic-gradient(#4e9af1 0%, #4e9af1 0%, #e6e6e6 0%); }
    to { background: conic-gradient(#4e9af1 0%, #4e9af1 100%, #e6e6e6 100%); }
  }

  .progress-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    animation: loading 2s linear forwards;
  }
</style>
</head>
<body>
<div class="progress-circle"></div>
</body>
</html>

Output:

使用HTML和CSS创建圆形进度条

多层次的进度条

有时候，我们需要显示多个进度，比如任务的子进度，这时可以使用多层次的进度条：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多层次的圆形进度条 - how2html.com</title>
<style>
  .progress-circle {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }

  .progress-circle::before,
  .progress-circle::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .progress-circle::before {
    background: conic-gradient(#4e9af1 0%, #4e9af1 70%, #e6e6e6 70%);
  }

  .progress-circle::after {
    background: conic-gradient(#f1b44c 0%, #f1b44c 30%, transparent 30%);
    transform: rotate(120deg);
  }
</style>
</head>
<body>
<div class="progress-circle"></div>
</body>
</html>

Output:

使用HTML和CSS创建圆形进度条

带有阴影效果的进度条

为了让进度条更有立体感，我们可以添加阴影效果：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>带有阴影效果的圆形进度条 - how2html.com</title>
<style>
  .progress-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(#4e9af1 0%, #4e9af1 85%, #e6e6e6 85%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  }
</style>
</head>
<body>
<div class="progress-circle"></div>
</body>
</html>

Output:

使用HTML和CSS创建圆形进度条

渐变色的进度条

我们还可以使用渐变色来美化进度条：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>渐变色的圆形进度条 - how2html.com</title>
<style>
  .progress-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(#4e9af1 0%, #4e9af1 50%, #76baf1 50%, #e6e6e6 50%);
  }
</style>
</head>
<body>
<div class="progress-circle"></div>
</body>
</html>

Output:

使用HTML和CSS创建圆形进度条

SVG实现的圆形进度条

除了使用CSS，我们也可以使用SVG来创建圆形进度条：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG实现的圆形进度条 - how2html.com</title>
<style>
  .progress-svg {
    width: 100px;
    height: 100px;
    transform: rotate(-90deg);
  }
  .progress-svg circle {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
  }
  .progress-svg .bg {
    stroke: #e6e6e6;
  }
  .progress-svg .progress {
    stroke: #4e9af1;
    stroke-dasharray: 251.2; /* Circumference of the circle */
    stroke-dashoffset: 125.6; /* Half of the circumference */
  }
</style>
</head>
<body>
<svg class="progress-svg" viewBox="0 0 100 100">
  <circle class="bg" cx="50" cy="50" r="40"></circle>
  <circle class="progress" cx="50" cy="50" r="40"></circle>
</svg>
</body>
</html>

Output:

使用HTML和CSS创建圆形进度条

使用CSS变量动态控制进度

CSS变量可以帮助我们更灵活地控制进度条的进度：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用CSS变量动态控制进度 - how2html.com</title>
<style>
  :root {
    --progress: 75%;
  }
  .progress-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(#4e9af1 0%, #4e9af1 var(--progress), #e6e6e6 var(--progress));
  }
</style>
</head>
<body>
<div class="progress-circle"></div>
</body>
</html>

Output:

使用HTML和CSS创建圆形进度条

使用JavaScript动态更新进度

我们可以结合JavaScript来动态更新进度条的进度：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用JavaScript动态更新进度 - how2html.com</title>
<style>
  .progress-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(#4e9af1 0%, #4e9af1 var(--progress), #e6e6e6 var(--progress));
  }
</style>
</head>
<body>
<div class="progress-circle" id="progressCircle"></div>

<script>
  const progressCircle = document.getElementById('progressCircle');
  let progress = 0;

  function updateProgress() {
    progress += 1;
    progressCircle.style.setProperty('--progress', progress + '%');
    if (progress < 100) {
      requestAnimationFrame(updateProgress);
    }
  }

  requestAnimationFrame(updateProgress);
</script>
</body>
</html>

Output:

使用HTML和CSS创建圆形进度条

带刻度的圆形进度条

有时候，我们需要在进度条上显示刻度，以下是一个带刻度的圆形进度条示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>带刻度的圆形进度条 - how2html.com</title>
<style>
  .progress-circle {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(#4e9af1 0%, #4e9af1 80%, #e6e6e6 80%);
  }
  .progress-circle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    margin-left: -40px;
    margin-top: -40px;
    border-radius: 50%;
    border: 1px solid #e6e6e6;
    background: #fff;
    z-index: 10;
  }
  .progress-circle span {
    position: absolute;
    width: 5px;
    height: 10px;
    background: #4e9af1;
    border-radius: 2px;
  }
  .progress-circle span:nth-child(1) { transform: rotate(0deg) translate(45px); }
  .progress-circle span:nth-child(2) { transform: rotate(30deg) translate(45px); }
  /* Add more spans for additional ticks */
</style>
</head>
<body>
<div class="progress-circle">
  <span></span>
  <span></span>
  <!-- Add more spans for additional ticks -->
</div>
</body>
</html>

Output:

使用HTML和CSS创建圆形进度条

由于篇幅限制，以上示例代码仅展示了部分可能的实现方式。在实际开发中，你可以根据需要调整样式、动画和JavaScript代码来实现更多样化的圆形进度条效果。记得在使用示例代码时，替换或添加自己的内容，以确保代码的完整性和功能的实现。

Camera课程

Camera API2 教程

API2 教程
Camera 性能教程

Perf 教程
Camera Native Framework 教程

Native FW 教程
Camera QCOM ISP 教程

ISP 教程
Camera QCOM Sensor 教程

Sensor 教程

Python教程

Python 教程

Python 教程
NumPy 教程

NumPy 教程
Django 教程

Django 教程

Java教程

Java 教程

Java 教程

Web教程

JavaScript 教程

JavaScript 教程
jQuery 教程

jQuery 教程
CSS 教程

CSS 教程
PHP 教程

PHP 教程
Laravel 教程

Laravel 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程

数据库教程

SQL 教程

SQL 教程
SQLite 教程

SQLite 教程
MySQL 教程

MySQL 教程
PL/SQL 教程

PL/SQL 教程
MongoDB 教程

MongoDB 教程

图形图像教程

OpenCV 教程

OpenCV 教程

办公软件教程

Excel 教程

Excel 教程

Linux教程

Linux命令全集

Linux命令全集
Linux内核API

Linux内核API
LVGL 教程

LVGL 教程

计算机教程

操作系统 教程

操作系统 教程
计算机网络 教程

计算机网络 教程
C语言 教程

C语言 教程
C++ 教程

C++ 教程
Swift 教程

Swift 教程

大数据教程

Hadoop 教程

Hadoop 教程
Spark 教程

Spark 教程
Scala 教程

Scala 教程

开发工具教程

Git 教程

Git 教程
Jenkins 教程

Jenkins 教程
ChatGPT 教程

ChatGPT 教程
IntelliJ 教程

IntelliJ 教程