js怎么写等待圈圈

在JavaScript中实现等待圈圈的几种方法有：使用CSS动画、利用SVG和CSS组合、借助第三方库如Spin.js。 其中一种常见且简单的方法是通过CSS动画来实现。下面将详细介绍如何使用CSS和JavaScript结合来创建一个简洁的等待圈圈。

一、使用纯CSS和HTML实现等待圈圈

使用纯CSS来创建等待圈圈是最常见的方法之一。CSS动画可以轻松地实现这种效果，而且性能良好。

1. 创建HTML结构

首先，我们需要一个简单的HTML结构来放置等待圈圈。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading Spinner</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="spinner"></div>
</body>
</html>

2. 定义CSS样式

然后，在CSS文件中定义等待圈圈的样式和动画效果。

/* styles.css */
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top: 4px solid #000;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

在上面的CSS代码中，我们创建了一个名为spinner的div元素，并通过设置border属性来创建圈圈的形状。然后，使用@keyframes定义了旋转动画。

二、使用JavaScript控制显示与隐藏

在实际应用中，我们可能需要通过JavaScript来控制等待圈圈的显示和隐藏。

1. 添加JavaScript代码

我们可以使用JavaScript来动态显示或隐藏等待圈圈。例如，下面的JavaScript代码将在页面加载时显示等待圈圈，并在3秒后隐藏它。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading Spinner</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        .spinner {
            width: 40px;
            height: 40px;
            border: 4px solid rgba(0, 0, 0, 0.1);
            border-top: 4px solid #000;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none; /* 初始状态隐藏 */
        }
        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="spinner" id="spinner"></div>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var spinner = document.getElementById("spinner");
            spinner.style.display = "block";
            setTimeout(function() {
                spinner.style.display = "none";
            }, 3000); // 3秒后隐藏
        });
    </script>
</body>
</html>

在这里，我们使用了setTimeout函数来模拟一个异步操作（如数据加载），并在3秒后隐藏等待圈圈。

三、使用SVG和CSS组合实现等待圈圈

除了使用纯CSS，我们还可以使用SVG和CSS结合来创建更复杂和可定制的等待圈圈。

1. 创建SVG结构

首先，创建一个包含SVG的HTML结构。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG Loading Spinner</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="svg-spinner">
        <svg viewBox="0 0 50 50">
            <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="4"></circle>
        </svg>
    </div>
</body>
</html>

2. 定义SVG的CSS样式

接着，在CSS文件中定义SVG的样式和动画效果。

/* styles.css */
.svg-spinner {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.svg-spinner .path {
    stroke: #000;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
}
@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}
@keyframes color {
    0% {
        stroke: #000;
    }
    100% {
        stroke: #555;
    }
}

在这个例子中，我们使用SVG的<circle>元素来创建一个可动画的等待圈圈，并通过stroke-dasharray和stroke-dashoffset属性来实现动画效果。

四、借助第三方库Spin.js

如果你需要更多的定制和功能，可以考虑使用第三方库，如Spin.js。Spin.js是一个轻量级的JavaScript库，用于创建旋转的加载动画。

1. 引入Spin.js

首先，在你的HTML文件中引入Spin.js库。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading Spinner with Spin.js</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js"></script>
</head>
<body>
    <div id="spinner"></div>
    <script>
        var opts = {
            lines: 12, // The number of lines to draw
            length: 7, // The length of each line
            width: 5, // The line thickness
            radius: 10, // The radius of the inner circle
            scale: 1.0, // Scales overall size of the spinner
            corners: 1, // Corner roundness (0..1)
            color: '#000', // #rgb or #rrggbb or array of colors
            opacity: 0.25, // Opacity of the lines
            rotate: 0, // The rotation offset
            direction: 1, // 1: clockwise, -1: counterclockwise
            speed: 1, // Rounds per second
            trail: 60, // Afterglow percentage
            fps: 20, // Frames per second when using setTimeout() as a fallback for CSS
            zIndex: 2e9, // The z-index (defaults to 2000000000)
            className: 'spinner', // The CSS class to assign to the spinner
            top: '50%', // Top position relative to parent
            left: '50%', // Left position relative to parent
            shadow: false, // Whether to render a shadow
            hwaccel: false, // Whether to use hardware acceleration
            position: 'absolute' // Element positioning
        };
        var target = document.getElementById('spinner');
        var spinner = new Spinner(opts).spin(target);
    </script>
</body>
</html>

在这个例子中，我们使用Spin.js库来创建一个可定制的等待圈圈，并通过JavaScript对象来配置圈圈的各个参数。

五、总结

通过这几种方法，你可以在JavaScript中实现等待圈圈，以提升用户体验。不同的方法各有优缺点：纯CSS方法简单易用，SVG结合CSS方法适合更复杂的动画效果，第三方库如Spin.js则提供了更多的定制选项和功能。 你可以根据实际需求选择最适合的方法。