| | |
| | | .t-float-left { |
| | | float: left; |
| | | } |
| | | .t-float-right { |
| | | float: right; |
| | | } |
| | | @keyframes tdesign-fade-out { |
| | | from { |
| | | opacity: 1; |
| | | } |
| | | to { |
| | | opacity: 0; |
| | | } |
| | | } |
| | | .hotspot-expanded.relative { |
| | | position: relative; |
| | | } |
| | | .hotspot-expanded::after { |
| | | content: ''; |
| | | display: block; |
| | | position: absolute; |
| | | left: 0; |
| | | top: 0; |
| | | right: 0; |
| | | bottom: 0; |
| | | transform: scale(1.5); |
| | | } |
| | | .t-loading { |
| | | display: inline-flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | font-size: 24rpx; |
| | | } |
| | | .t-loading__spinner { |
| | | position: relative; |
| | | box-sizing: border-box; |
| | | width: 100%; |
| | | height: 100%; |
| | | max-width: 100%; |
| | | max-height: 100%; |
| | | animation: rotate 0.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, 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%); |
| | | /* stylelint-disable-next-line */ |
| | | -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, 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: 0.08333333; |
| | | } |
| | | .t-loading__dot-3 { |
| | | transform: rotate(90deg); |
| | | opacity: 0.16666667; |
| | | } |
| | | .t-loading__dot-4 { |
| | | transform: rotate(120deg); |
| | | opacity: 0.25; |
| | | } |
| | | .t-loading__dot-5 { |
| | | transform: rotate(150deg); |
| | | opacity: 0.33333333; |
| | | } |
| | | .t-loading__dot-6 { |
| | | transform: rotate(180deg); |
| | | opacity: 0.41666667; |
| | | } |
| | | .t-loading__dot-7 { |
| | | transform: rotate(210deg); |
| | | opacity: 0.5; |
| | | } |
| | | .t-loading__dot-8 { |
| | | transform: rotate(240deg); |
| | | opacity: 0.58333333; |
| | | } |
| | | .t-loading__dot-9 { |
| | | transform: rotate(270deg); |
| | | opacity: 0.66666667; |
| | | } |
| | | .t-loading__dot-10 { |
| | | transform: rotate(300deg); |
| | | opacity: 0.75; |
| | | } |
| | | .t-loading__dot-11 { |
| | | transform: rotate(330deg); |
| | | opacity: 0.83333333; |
| | | } |
| | | .t-loading__dot-12 { |
| | | transform: rotate(360deg); |
| | | opacity: 0.91666667; |
| | | } |
| | | @keyframes rotate { |
| | | from { |
| | | transform: rotate(0deg); |
| | | } |
| | | to { |
| | | transform: rotate(360deg); |
| | | } |
| | | } |
| | | @keyframes rotateReverse { |
| | | from { |
| | | transform: rotate(360deg); |
| | | } |
| | | to { |
| | | transform: rotate(0deg); |
| | | } |
| | | } |
| | | @keyframes dotting { |
| | | 0% { |
| | | opacity: 0.15; |
| | | } |
| | | 1% { |
| | | opacity: 0.8; |
| | | } |
| | | 33% { |
| | | opacity: 0.8; |
| | | } |
| | | 34% { |
| | | opacity: 0.15; |
| | | } |
| | | 100% { |
| | | opacity: 0.15; |
| | | } |
| | | } |
| | | @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;}} |