效果图:
完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>旋转环形加载动画</title>
<style type="text/css">
/* 设置页面背景颜色 */
body {
background: #ECF0F1;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
/* 定义加载动画容器的样式 */
.spinner {
width: 50px;
height: 50px;
border: 6px solid #f3f3f3; /* 灰色边框 *