<!--
* @Description: loding demo
* @version: 1.0.0
* @Author: lisyong
* @Date: 2022-05-23 10:05:32
* @LastEditors: lisyong
* @LastEditTime: 2022-05-23 10:08:53
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>loading demo图</title>
<!-- <link rel="stylesheet" href="./loading.css" /> -->
<style type="text/css">
.ve-loading {
/* plane */
/* bounce */
/* wave */
/* pulse */
/* flow */
/* grid */
}
.ve-loading.ve-loading-overlay {
position: absolute;
z-index: 1999;
margin: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.ve-loading.ve-loading-fixed {
position: fixed !important;
}
.ve-loading.ve-loading-hide {
display: none;
}
.ve-loading-spin-container {
position: absolute;
top: 50%;
margin-top: -20px;
margin-left: -20px;
width: 100%;
text-align: center;
}
.ve-loading-spin-container .ve-loading-spin {
display: inline-block;
}
.ve-loading-plane {
animation: sk-plane 1.2s infinite ease-in-out;
}
@keyframes sk-plane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
}
100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
.ve-loading-bounce {
position: relative;
}
.ve-loading-bounce-dot {
width: 100%;
height: 100%;
border-radius: 50%;
/* background-color: var(--sk-color); */
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
animation: sk-bounce 2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.ve-loading-bounce-dot:nth-child(2) {
animation-delay: -1s;
}
@keyframes sk-bounce {
0%,
100% {
transform: scale(0);
}
45%,
55% {
transform: scale(1);
}
}
.ve-loading-wave {
display: flex;
justify-content: space-between;
}
.ve-loading-wave-rect {
height: 100%;
width: 15%;
animation: sk-wave 1.2s infinite ease-in-out;
}
.ve-loading-wave-rect:nth-child(1) {
animation-delay: -1.2s;
}
.ve-loading-wave-rect:nth-child(2) {
animation-delay: -1.1s;
}
.ve-loading-wave-rect:nth-child(3) {
animation-delay: -1s;
}
.ve-loading-wave-rect:nth-child(4) {
animation-delay: -0.9s;
}
.ve-loading-wave-rect:nth-child(5) {
animation-delay: -0.8s;
}
@keyframes sk-wave {
0%,
40%,
100% {
transform: scaleY(0.4);
}
20% {
transform: scaleY(1);
}
}
.ve-loading-pulse {
width: var(--sk-size);
height: var(--sk-size);
background-color: var(--sk-color);
border-radius: 100%;
animation: sk-pulse 1.2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
@keyframes sk-pulse {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
opacity: 0;
}
}
.ve-loading-flow {
width: calc(var(--sk-size) * 1.3);
height: calc(var(--sk-size) * 1.3);
display: flex;
justify-content: space-between;
}
.ve-loading-flow-dot {
width: 25%;
height: 25%;
background-color: var(--sk-color);
border-radius: 50%;
animation: sk-flow 1.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s infinite both;
}
.ve-loading-flow-dot:nth-child(1) {
animation-delay: -0.3s;
}
.ve-loading-flow-dot:nth-child(2) {
animation-delay: -0.15s;
}
@keyframes sk-flow {
0%,
80%,
100% {
transform: scale(0.3);
}
40% {
transform: scale(1);
}
}
.ve-loading-grid {
/* Cube positions
* 1 2 3
* 4 5 6
* 7 8 9
*/
}
.ve-loading-grid-cube {
width: 33.33%;
height: 33.33%;
background-color: var(--sk-color);
float: left;
animation: sk-grid 1.3s infinite ease-in-out;
}
.ve-loading-grid-cube:nth-child(1) {
animation-delay: 0.2s;
}
.ve-loading-grid-cube:nth-child(2) {
animation-delay: 0.3s;
}
.ve-loading-grid-cube:nth-child(3) {
animation-delay: 0.4s;
}
.ve-loading-grid-cube:nth-child(4) {
animation-delay: 0.1s;
}
.ve-loading-grid:nth-child(5) {
animation-delay: 0.2s;
}
.ve-loading-grid-cube:nth-child(6) {
animation-delay: 0.3s;
}
.ve-loading-grid-cube:nth-child(7) {
animation-delay: 0s;
}
.ve-loading-grid-cube:nth-child(8) {
animation-delay: 0.1s;
}
.ve-loading-grid-cube:nth-child(9) {
animation-delay: 0.2s;
}
@keyframes sk-grid {
0%,
70%,
100% {
transform: scale3D(1, 1, 1);
}
35% {
transform: scale3D(0, 0, 1);
}
}
*,
:after,
:before {
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="ve-loading ve-loading-overlay" style="background-color: rgba(255, 255, 255, 0.5)">
<div class="ve-loading-spin-container">
<div class="ve-loading-spin">
<div class="ve-loading-grid" style="width: 40px; height: 40px">
<div class="ve-loading-grid-cube" style="background-color: rgb(24, 144, 255)"></div>
<div class="ve-loading-grid-cube" style="background-color: rgb(24, 144, 255)"></div>
<div class="ve-loading-grid-cube" style="background-color: rgb(24, 144, 255)"></div>
<div class="ve-loading-grid-cube" style="background-color: rgb(24, 144, 255)"></div>
<div class="ve-loading-grid-cube" style="background-color: rgb(24, 144, 255)"></div>
<div class="ve-loading-grid-cube" style="background-color: rgb(24, 144, 255)"></div>
<div class="ve-loading-grid-cube" style="background-color: rgb(24, 144, 255)"></div>
<div class="ve-loading-grid-cube" style="background-color: rgb(24, 144, 255)"></div>
<div class="ve-loading-grid-cube" style="background-color: rgb(24, 144, 255)"></div>
</div>
</div>
<div class="ve-loading-spin-tip" style="color: rgb(24, 144, 255)"></div>
</div>
</div>
</body>
</html>
loading样式i
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
推荐阅读更多精彩内容
- 已离开简书，原因参见 //www.greatytc.com/p/0f12350a6b66。 虽人微言轻，但...
- 全局请求器和响应器上加loading样式请求发起后，开启loading效果请求结束后，关闭loading效果需要注...
- 关于App特殊状态下的交互设计，前面《App临时框的设计，全在这了...》、《网络异常时，App该如何设计？》两篇...
- cover-view loading 样式显示问题: border-top 和 真机样式对不上 真机显示: 上面...
- ���)Mf�大多数App都要与服务器进行数据的交换，App向服务器发出数据请求，服务器接收到请求之后向App传输...
