ts_aimz_uni/wxcomponents/container-loading/container-loading.wxss
itgaojian163 3c9e0c3f08 初始化
2025-04-16 16:15:41 +08:00

85 lines
1.5 KiB
Plaintext

.container {
/* display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
min-height: 200rpx; */
width: 100%;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
background-color: transparent;
}
.loading {
position: relative;
width: 40px;
border-radius: 20px;
perspective: 500px;
align-self: center;
margin-top: 40%;
}
.loading:before,
.loading:after {
position: absolute;
width: 15px;
height: 15px;
content: "";
border-radius: 20px;
animation: jumping 0.5s infinite alternate;
background: rgba(0, 0, 0, 0);
}
.loading:before {
left: 0;
}
.loading:after {
right: 0;
animation-delay: 0.15s;
}
.loading_err {
display: flex;
flex-direction: row;
justify-content: center;
width: 150px;
align-items: center;
height: 100px;
align-self: center;
}
@keyframes jumping {
0% {
transform: scale(1) translateY(0px) rotateX(0deg);
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
100% {
transform: scale(1.2) translateY(-25px) rotateX(45deg);
background: #FE9944;
box-shadow: 0 25px 40px #FE9944;
}
}
.error-box {
/* display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: auto;
margin-top: 20%; */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
align-self: center;
min-height: 200px;
}