SVG实现进度圆环效果，特效旋转圆环，代码详细解析

2023-09-11 14:24:38

使用 CSS3、JS 和 SVG 实现进度圆环效果：全方位指南

进度圆环效果在现代前端开发中的重要性

在当今竞争激烈的数字世界中，吸引用户并提升其体验至关重要。丰富的动画和交互效果已成为实现这一目标的有效手段。其中，进度圆环效果是一种常见的动画效果，常被用来表示加载状态和进度条等。本文将深入探讨如何使用 CSS3、JS 和 SVG 实现圆环加载效果，并提供详细的原理解析。

一、使用 CSS3 和 JS 实现圆环加载效果

1. 准备工作

首先，准备一个圆形图片作为加载效果的背景。使用 CSS3 的 animation 属性控制圆环旋转动画，用 JS 控制动画的启动和结束。

2. HTML 代码

<!DOCTYPE html>
<html>
<head>
    <style>
        #loading-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        #loading-circle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 5px solid #000;
            animation: loading 2s linear infinite;
        }
        @keyframes loading {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div id="loading-container">
        <div id="loading-circle"></div>
    </div>
</body>
</html>

3. JS 代码

document.addEventListener("DOMContentLoaded", function() {
    var loadingContainer = document.getElementById("loading-container");
    var loadingCircle = document.getElementById("loading-circle");
    loadingContainer.style.display = "none";
    setTimeout(function() {
        loadingContainer.style.display = "block";
        loadingCircle.classList.add("loading");
    }, 1000);
    setTimeout(function() {
        loadingCircle.classList.remove("loading");
        loadingContainer.style.display = "none";
    }, 5000);
});

二、使用 SVG 实现进度圆环效果

1. 准备工作

SVG 是一种基于 XML 的矢量图形格式，具有轻量、可缩放和易于编辑的优点。使用 SVG 可以创建更复杂的进度圆环效果。

2. SVG 代码

<svg width="100%" height="100%" viewBox="0 0 100 100">
  <circle cx="50%" cy="50%" r="45%" stroke="#000" stroke-width="5" fill="none" />
  <circle cx="50%" cy="50%" r="45%" stroke="#0ff" stroke-width="5" fill="none" stroke-dasharray="283 283" stroke-dashoffset="283" />
</svg>

3. 解析

SVG 代码中，首先定义了一个圆形路径，然后在其内部定义了一个虚线圆形路径。虚线圆形路径的 stroke-dasharray 属性定义了虚线的长度和间隔，stroke-dashoffset 属性定义了虚线的偏移量。通过改变 stroke-dashoffset 的值，可以控制虚线圆形路径的显示和隐藏，实现进度圆环效果。

三、代码示例

代码示例

四、总结

本文介绍了使用 CSS3、JS 和 SVG 实现圆环加载效果的方法。CSS3 和 JS 实现相对简单，但效果单一；SVG 实现更复杂，但效果更丰富。希望本文能对各位有所帮助。

常见问题解答