HTML CSS JavaScript 实现页面旋转 Loading 效果

以下是一个简单的 HTML、CSS 和 JavaScript 代码示例，可以创建一个旋转 loading 效果：

HTML 代码：

<!DOCTYPE html>
<html>
<head>
	<title>旋转 Loading 效果</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="loader"></div>
</body>
</html>

CSS 代码：

.loader {
    margin: 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 5px solid #ccc;
    border-top-color: #3498db;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

JavaScript 代码：

// 无需 JavaScript 代码来实现旋转 loading 效果

效果：

旋转 Loading 效果