如何仅在从Http服务中获取数据时才显示旋转控件？

要在从HTTP服务中获取数据时显示旋转控件（通常用于表示加载状态），你可以使用以下方法：

基础概念

旋转控件是一种常见的UI元素，用于表示应用程序正在执行后台操作，如数据加载。这种控件通常会在数据请求开始时显示，并在数据加载完成后隐藏。

类型

旋转控件有多种类型，包括：

CSS动画：使用CSS3动画实现旋转效果。
SVG动画：使用SVG图形结合CSS动画实现更复杂的旋转效果。
第三方库：如Lottie、Spin.js等，提供丰富的旋转动画效果。

应用场景

适用于任何需要显示加载状态的场景，如：

数据请求
文件上传/下载
复杂计算

实现方法

以下是一个使用JavaScript和CSS实现旋转控件的示例：

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 id="spinner" class="hidden">Loading...</div>
    <button onclick="fetchData()">Fetch Data</button>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

.hidden {
    display: none;
}

#spinner {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255,255,255,.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    -webkit-animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    to { -webkit-transform: rotate(360deg); }
}

JavaScript (script.js)

function fetchData() {
    const spinner = document.getElementById('spinner');
    spinner.classList.remove('hidden');

    fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => {
            console.log(data);
            spinner.classList.add('hidden');
        })
        .catch(error => {
            console.error('Error fetching data:', error);
            spinner.classList.add('hidden');
        });
}