目录
HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>加载效果</title>
<!-- 结合实际目录，引入css样式 -->
<!-- <link rel="stylesheet" href="./styles.css"> -->
</head>
<body>
<div class="saveLoading"></div>
</body>
</html>CSS部分：
.saveLoading {
position: relative;
width: 100vw; /*可视宽度*/
height: 100vh; /*可视高度*/
background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
margin: auto;
pointer-events: none; /* 防止用户交互 */
background: gray;
}
.saveLoading::before { /*伪类*/
content: '';
position: absolute;
width: 50px; /*大小*/
height: 50px;
left: calc(50% - 50px); /*做适配，使加载动画始终位于屏幕中央*/
top: calc(50% - 50px); /* 使用calc计算 */
border: 4px solid rgba(255, 255, 255, 0.2); /*圈的边框*/
border-top-color: #ffffff; /*圈的颜色*/
border-radius: 50%; /*宽高为50px的边界半径*/
animation: spin 1s linear infinite; /*线性旋转，1秒一圈，永不停歇;*/
}
@keyframes spin { /*应用动画*/
0% {
transform: rotate(0deg); /*0%从0度开始旋转*/
}
100% {
transform: rotate(360deg);/*100%旋转到360度，也就是一圈*/
}
}实现效果如下：
可以使用在线工具测试(也支持js)
JS Bin - Collaborative JavaScript Debugging
使用第三方封装的loading：
也可以使用现成的如使用elementUI封装好的，在集成过环境的情况下使用：
<div v-loading="transSaveLoading" element-loading-text="保存中..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)">
</div>
扫一扫
1139
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
