47 lines
3.6 KiB
Plaintext
47 lines
3.6 KiB
Plaintext
@import '../common/style/index.wxss';.t-loading{display:inline-flex;align-items:center;justify-content:center;font-size:24rpx;}
|
|
.t-loading--fullscreen{position:fixed;display:flex;align-items:center;vertical-align:middle;justify-content:center;top:0;left:0;width:100%;height:100%;z-index:var(--td-loading-z-index,3500);background-color:var(--td-loading-full-bg-color,rgba(255,255,255,.6));}
|
|
.t-loading__spinner{position:relative;box-sizing:border-box;width:100%;height:100%;max-width:100%;max-height:100%;animation:rotate .8s linear infinite;color:var(--td-loading-color,var(--td-brand-color,var(--td-primary-color-7,#0052d9)));}
|
|
.t-loading__spinner.reverse{animation-name:rotateReverse;}
|
|
.t-loading__spinner--spinner{animation-timing-function:steps(12);color:var(--td-text-color-primary,var(--td-font-gray-1,rgba(0,0,0,.9)));}
|
|
.t-loading__spinner--spinner .t-loading__dot{position:absolute;top:0;left:0;width:100%;height:100%;}
|
|
.t-loading__spinner--spinner .t-loading__dot::before{display:block;width:5rpx;height:25%;margin:0 auto;background-color:var(--td-loading-color,var(--td-brand-color,var(--td-primary-color-7,#0052d9)));border-radius:40%;content:' ';}
|
|
.t-loading__spinner--circular .t-loading__circular{border-radius:100%;width:100%;height:100%;background:conic-gradient(from 180deg at 50% 50%,rgba(255,255,255,0) 0deg,rgba(255,255,255,0) 60deg,currentColor 330deg,rgba(255,255,255,0) 360deg);mask:radial-gradient(transparent calc(50% - 1rpx),#fff 50%);-webkit-mask:radial-gradient(transparent calc(50% - 1rpx),#fff 50%);}
|
|
.t-loading__spinner--dots{display:flex;justify-content:space-between;align-items:center;animation:none;}
|
|
.t-loading__spinner--dots .t-loading__dot{width:20%;height:20%;border-radius:50%;background-color:var(--td-loading-color,var(--td-brand-color,var(--td-primary-color-7,#0052d9)));animation-duration:1.8s;animation-name:dotting;animation-timing-function:linear;animation-iteration-count:infinite;animation-fill-mode:both;}
|
|
.t-loading__text{color:var(--td-loading-text-color,var(--td-text-color-primary,var(--td-font-gray-1,rgba(0,0,0,.9))));font-size:var(--td-loading-text-font-size,24rpx);line-height:var(--td-loading-text-line-height,40rpx);}
|
|
.t-loading__text--vertical:not(:first-child):not(:empty){margin-top:12rpx;}
|
|
.t-loading__text--horizontal:not(:first-child):not(:empty){margin-left:16rpx;}
|
|
.t-loading--vertical{flex-direction:column;}
|
|
.t-loading--horizontal{flex-direction:row;vertical-align:top;}
|
|
@keyframes t-bar{
|
|
0%{width:0;}
|
|
50%{width:70%;}
|
|
100%{width:80%;}}
|
|
@keyframes t-bar-loaded{
|
|
0%{height:6rpx;opacity:1;width:90%;}
|
|
50%{height:6rpx;opacity:1;width:100%;}
|
|
100%{height:0;opacity:0;width:100%;}}
|
|
.t-loading__dot-1{transform:rotate(30deg);opacity:0;}
|
|
.t-loading__dot-2{transform:rotate(60deg);opacity:.08333333;}
|
|
.t-loading__dot-3{transform:rotate(90deg);opacity:.16666667;}
|
|
.t-loading__dot-4{transform:rotate(120deg);opacity:.25;}
|
|
.t-loading__dot-5{transform:rotate(150deg);opacity:.33333333;}
|
|
.t-loading__dot-6{transform:rotate(180deg);opacity:.41666667;}
|
|
.t-loading__dot-7{transform:rotate(210deg);opacity:.5;}
|
|
.t-loading__dot-8{transform:rotate(240deg);opacity:.58333333;}
|
|
.t-loading__dot-9{transform:rotate(270deg);opacity:.66666667;}
|
|
.t-loading__dot-10{transform:rotate(300deg);opacity:.75;}
|
|
.t-loading__dot-11{transform:rotate(330deg);opacity:.83333333;}
|
|
.t-loading__dot-12{transform:rotate(360deg);opacity:.91666667;}
|
|
@keyframes rotate{
|
|
from{transform:rotate(0);}
|
|
to{transform:rotate(360deg);}}
|
|
@keyframes rotateReverse{
|
|
from{transform:rotate(360deg);}
|
|
to{transform:rotate(0);}}
|
|
@keyframes dotting{
|
|
0%{opacity:.15;}
|
|
1%{opacity:.8;}
|
|
33%{opacity:.8;}
|
|
34%{opacity:.15;}
|
|
100%{opacity:.15;}} |