tmp
This commit is contained in:
@@ -1 +1 @@
|
||||
import{__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import props from"./props";const{prefix:prefix}=config,name=`${prefix}-loading`;let Loading=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`,`${prefix}-class-text`,`${prefix}-class-indicator`],this.data={prefix:prefix,classPrefix:name,show:!0},this.options={multipleSlots:!0},this.properties=Object.assign({},props),this.timer=null,this.observers={loading(e){const{delay:t}=this.properties;this.timer&&clearTimeout(this.timer),e&&t?this.timer=setTimeout((()=>{this.setData({show:e}),this.timer=null}),t):this.setData({show:e})}},this.lifetimes={detached(){clearTimeout(this.timer)}}}refreshPage(){this.triggerEvent("reload")}};Loading=__decorate([wxComponent()],Loading);export default Loading;
|
||||
import{__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import props from"./props";const{prefix:prefix}=config,name=`${prefix}-loading`;let Loading=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`,`${prefix}-class-text`,`${prefix}-class-indicator`],this.data={prefix:prefix,classPrefix:name,show:!0},this.options={multipleSlots:!0},this.properties=Object.assign({},props),this.timer=null,this.observers={loading(e){const{delay:t}=this.properties;this.timer&&clearTimeout(this.timer),e&&t?this.timer=setTimeout(()=>{this.setData({show:e}),this.timer=null},t):this.setData({show:e})}},this.lifetimes={detached(){clearTimeout(this.timer)}}}refreshPage(){this.triggerEvent("reload")}};Loading=__decorate([wxComponent()],Loading);export default Loading;
|
||||
@@ -1 +1,47 @@
|
||||
@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}}
|
||||
@import '../common/style/index.wxss';.t-loading{display:inline-flex;align-items:center;justify-content:center;}
|
||||
.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:var(--td-loading-text-font,var(--td-font-body-small,24rpx / 40rpx var(--td-font-family,PingFang SC,Microsoft YaHei,Arial Regular)));}
|
||||
.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;}}
|
||||
Reference in New Issue
Block a user