|
|
- @import '@/uni_modules/lime-style/index.scss';
-
- $loading-color: create-var(loading-color, $primary-color);
- $loading-size: create-var(loading-size, 40rpx);
- $loading-text-color: create-var(loading-text-color, $text-color-3);
- $loading-font-size: create-var(loading-font-size, $font-size);
-
- /* #ifndef APP */
- /* #ifndef MP-ALIPAY */
- $loading-duration: var(--l-loading-duration, 2s);
-
- @property --l-loading-start {
- syntax: '<length-percentage>';
- initial-value: 1%;
- inherits: false;
- }
- @property --l-loading-end {
- syntax: '<length-percentage>';
- initial-value: 1%;
- inherits: false;
- }
- @property --l-left {
- syntax: '<length-percentage>';
- initial-value: 1%;
- inherits: false;
- }
- @property --l-loadding-ball-size {
- syntax: '<length> | <length-percentage>';
- // initial-value: 1%;
- inherits: false;
- }
-
- /* #endif */
- /* #ifdef MP-ALIPAY */
- $loading-duration: var(--l-loading-duration, 1s);
- /* #endif */
-
-
- /* #endif */
-
-
-
- .l-loading {
- position: relative;
- flex-direction: row;
- align-items: center;
- // align-self: flex-start;
-
- /* #ifndef APP */
- color: $loading-color;
- &--ball{
- display: inline-flex;
- align-items: center;
-
- .l-loading {
- &__ball {
- position: relative;
- perspective: calc(var(--l-loadding-ball-size) * 4);
- transform-style: preserve-3d;
- // border: 1px solid;
-
- &:before{
- background-color: $primary-color;
- left: 0%;
- // mix-blend-mode: darken;
- animation-name: l-ball-before;
- }
- &:after{
- right: 0;
- background-color: red;
- // mix-blend-mode: darken;
- animation-name: l-ball-after;
- }
- &:before,&:after{
- top: 0;
- content: '';
- position: absolute;
- // width: 100%;
- height: 100%;
- aspect-ratio: 1/1;
- border-radius: 50%;
- animation-iteration-count: infinite;
- animation-delay: -100ms;
- animation-duration: 900ms;
- mix-blend-mode: darken;
- }
- }
- }
- }
- &--circular {
- .l-loading {
- &__circular {
- display: inline-block;
- position: relative;
- animation: l-rotate $loading-duration linear infinite;
- vertical-align: middle;
- &:before {
- content: '';
- display: block;
- width: 100%;
- height: 100%;
- border-radius: 50%;
- /* #ifndef MP-ALIPAY */
- background: conic-gradient(
- transparent 0%,
- transparent var(--l-loading-start, 0%), var(--l-loading-color-1, currentColor) var(--l-loading-start, 0%),
- var(--l-loading-color-2, currentColor) var(--l-loading-end, 0%), transparent var(--l-loading-end, 0%),
- transparent 100%);
- /* #endif */
- /* #ifdef MP-ALIPAY */
- background: conic-gradient(
- var(--l-loading-color-1, transparent) 0%,
- var(--l-loading-color-2, currentColor) 100%);
- /* #endif */
- mask: radial-gradient(closest-side, transparent calc(80% - 1px), #fff 80%);
- -webkit-mask: radial-gradient(closest-side, transparent calc(80% - 1px), #fff 80%);
- animation: l-circular 3s ease-in-out infinite;
- transform: rotate(90deg);
- }
- }
- }
- }
- &--spinner {
- .l-loading {
- &__spinner {
- position: relative;
- box-sizing: border-box;
- // width: 100%;
- // height: 100%;
- // max-width: 100%;
- // max-height: 100%;
- animation-timing-function: steps(12);
- animation: l-rotate 1.5s linear infinite;
- }
- &__dot {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- transform: rotate(calc(var(--l-loading-dot, 1) * 30deg));
- opacity: calc(var(--l-loading-dot, 1) / 12);
- &::before {
- display: block;
- width: 5rpx;
- height: 25%;
- margin: 0 auto;
- background-color: currentColor;
- border-radius: 40%;
- content: ' ';
- }
- }
- }
- }
- /* #endif */
- /* #ifdef APP */
- &__view{
- // background-color: aqua;
- // background-color: #1677ff;
- // transition-duration: 1.5s;
- // transition-property: transform;
- // transition-timing-function: linear;
- }
- /* #endif */
- &__text {
- margin-left: $spacer-xs;
- color: $loading-text-color;
- font-size: $loading-font-size;
- }
-
-
- &.is-vertical {
- flex-direction: column;
- .l-loading__text {
- margin: $spacer-tn 0 0;
- }
- }
- &__ball,&__circular,&__spinner {
- width: $loading-size;
- height: $loading-size;
- }
- }
-
-
- /* #ifndef APP */
- @keyframes l-circular {
- 0% {
- --l-loading-start: 0%;
- --l-loading-end: 0%;
- }
- 50% {
- --l-loading-start: 0%;
- --l-loading-end: 100%;
- }
- 100% {
- --l-loading-start: 100%;
- --l-loading-end: 100%;
- }
- }
- @keyframes l-rotate {
- to {
- transform: rotate(1turn)
- }
- }
-
- @keyframes l-ball-before {
- 0%{
- animation-timing-function: ease-in;
- }
- 25% {
- animation-timing-function: ease-out;
- --l-left: calc((var(--l-loadding-ball-size,100%) * 2.1 - var(--l-loadding-ball-size,100%)) / 2);
- transform: translate3d(var(--l-left), 0, var(--l-loadding-ball-size));
- }
- 50% {
- --l-left: calc((var(--l-loadding-ball-size,100%) * 2.1 - var(--l-loadding-ball-size,100%)));
- animation-timing-function:ease-in;
- transform: translate3d(var(--l-left), 0, 0);
- }
- 75% {
- animation-timing-function: ease-out;
- --l-left: calc((var(--l-loadding-ball-size,100%) * 2.1 - var(--l-loadding-ball-size,100%)) / 2);
- transform: translate3d(var(--l-left), 0, calc(var(--l-loadding-ball-size) * -1));
- }
- }
- @keyframes l-ball-after {
- 0%{
- animation-timing-function: ease-in;
- }
- 25% {
- animation-timing-function: ease-out;
- --l-left: calc((var(--l-loadding-ball-size,100%) * 2.1 - var(--l-loadding-ball-size,100%)) / 2 * -1);
- transform: translate3d(var(--l-left), 0, calc(var(--l-loadding-ball-size) * -1));
- }
- 50% {
- animation-timing-function:ease-in;
- --l-left: calc((var(--l-loadding-ball-size,100%) * 2.1 - var(--l-loadding-ball-size,100%)) * -1);
- transform: translate3d(var(--l-left), 0, 0);
- }
- 75% {
- animation-timing-function: ease-out;
- --l-left: calc((var(--l-loadding-ball-size,100%) * 2.1 - var(--l-loadding-ball-size,100%)) / 2 * -1);
- transform: translate3d(var(--l-left), 0, var(--l-loadding-ball-size));
- }
- }
- /* #endif */
|