合同小程序前端代码仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

245 lines
5.8 KiB

3 months ago
  1. @import '@/uni_modules/lime-style/index.scss';
  2. $loading-color: create-var(loading-color, $primary-color);
  3. $loading-size: create-var(loading-size, 40rpx);
  4. $loading-text-color: create-var(loading-text-color, $text-color-3);
  5. $loading-font-size: create-var(loading-font-size, $font-size);
  6. /* #ifndef APP */
  7. /* #ifndef MP-ALIPAY */
  8. $loading-duration: var(--l-loading-duration, 2s);
  9. @property --l-loading-start {
  10. syntax: '<length-percentage>';
  11. initial-value: 1%;
  12. inherits: false;
  13. }
  14. @property --l-loading-end {
  15. syntax: '<length-percentage>';
  16. initial-value: 1%;
  17. inherits: false;
  18. }
  19. @property --l-left {
  20. syntax: '<length-percentage>';
  21. initial-value: 1%;
  22. inherits: false;
  23. }
  24. @property --l-loadding-ball-size {
  25. syntax: '<length> | <length-percentage>';
  26. // initial-value: 1%;
  27. inherits: false;
  28. }
  29. /* #endif */
  30. /* #ifdef MP-ALIPAY */
  31. $loading-duration: var(--l-loading-duration, 1s);
  32. /* #endif */
  33. /* #endif */
  34. .l-loading {
  35. position: relative;
  36. flex-direction: row;
  37. align-items: center;
  38. // align-self: flex-start;
  39. /* #ifndef APP */
  40. color: $loading-color;
  41. &--ball{
  42. display: inline-flex;
  43. align-items: center;
  44. .l-loading {
  45. &__ball {
  46. position: relative;
  47. perspective: calc(var(--l-loadding-ball-size) * 4);
  48. transform-style: preserve-3d;
  49. // border: 1px solid;
  50. &:before{
  51. background-color: $primary-color;
  52. left: 0%;
  53. // mix-blend-mode: darken;
  54. animation-name: l-ball-before;
  55. }
  56. &:after{
  57. right: 0;
  58. background-color: red;
  59. // mix-blend-mode: darken;
  60. animation-name: l-ball-after;
  61. }
  62. &:before,&:after{
  63. top: 0;
  64. content: '';
  65. position: absolute;
  66. // width: 100%;
  67. height: 100%;
  68. aspect-ratio: 1/1;
  69. border-radius: 50%;
  70. animation-iteration-count: infinite;
  71. animation-delay: -100ms;
  72. animation-duration: 900ms;
  73. mix-blend-mode: darken;
  74. }
  75. }
  76. }
  77. }
  78. &--circular {
  79. .l-loading {
  80. &__circular {
  81. display: inline-block;
  82. position: relative;
  83. animation: l-rotate $loading-duration linear infinite;
  84. vertical-align: middle;
  85. &:before {
  86. content: '';
  87. display: block;
  88. width: 100%;
  89. height: 100%;
  90. border-radius: 50%;
  91. /* #ifndef MP-ALIPAY */
  92. background: conic-gradient(
  93. transparent 0%,
  94. transparent var(--l-loading-start, 0%), var(--l-loading-color-1, currentColor) var(--l-loading-start, 0%),
  95. var(--l-loading-color-2, currentColor) var(--l-loading-end, 0%), transparent var(--l-loading-end, 0%),
  96. transparent 100%);
  97. /* #endif */
  98. /* #ifdef MP-ALIPAY */
  99. background: conic-gradient(
  100. var(--l-loading-color-1, transparent) 0%,
  101. var(--l-loading-color-2, currentColor) 100%);
  102. /* #endif */
  103. mask: radial-gradient(closest-side, transparent calc(80% - 1px), #fff 80%);
  104. -webkit-mask: radial-gradient(closest-side, transparent calc(80% - 1px), #fff 80%);
  105. animation: l-circular 3s ease-in-out infinite;
  106. transform: rotate(90deg);
  107. }
  108. }
  109. }
  110. }
  111. &--spinner {
  112. .l-loading {
  113. &__spinner {
  114. position: relative;
  115. box-sizing: border-box;
  116. // width: 100%;
  117. // height: 100%;
  118. // max-width: 100%;
  119. // max-height: 100%;
  120. animation-timing-function: steps(12);
  121. animation: l-rotate 1.5s linear infinite;
  122. }
  123. &__dot {
  124. position: absolute;
  125. top: 0;
  126. left: 0;
  127. width: 100%;
  128. height: 100%;
  129. transform: rotate(calc(var(--l-loading-dot, 1) * 30deg));
  130. opacity: calc(var(--l-loading-dot, 1) / 12);
  131. &::before {
  132. display: block;
  133. width: 5rpx;
  134. height: 25%;
  135. margin: 0 auto;
  136. background-color: currentColor;
  137. border-radius: 40%;
  138. content: ' ';
  139. }
  140. }
  141. }
  142. }
  143. /* #endif */
  144. /* #ifdef APP */
  145. &__view{
  146. // background-color: aqua;
  147. // background-color: #1677ff;
  148. // transition-duration: 1.5s;
  149. // transition-property: transform;
  150. // transition-timing-function: linear;
  151. }
  152. /* #endif */
  153. &__text {
  154. margin-left: $spacer-xs;
  155. color: $loading-text-color;
  156. font-size: $loading-font-size;
  157. }
  158. &.is-vertical {
  159. flex-direction: column;
  160. .l-loading__text {
  161. margin: $spacer-tn 0 0;
  162. }
  163. }
  164. &__ball,&__circular,&__spinner {
  165. width: $loading-size;
  166. height: $loading-size;
  167. }
  168. }
  169. /* #ifndef APP */
  170. @keyframes l-circular {
  171. 0% {
  172. --l-loading-start: 0%;
  173. --l-loading-end: 0%;
  174. }
  175. 50% {
  176. --l-loading-start: 0%;
  177. --l-loading-end: 100%;
  178. }
  179. 100% {
  180. --l-loading-start: 100%;
  181. --l-loading-end: 100%;
  182. }
  183. }
  184. @keyframes l-rotate {
  185. to {
  186. transform: rotate(1turn)
  187. }
  188. }
  189. @keyframes l-ball-before {
  190. 0%{
  191. animation-timing-function: ease-in;
  192. }
  193. 25% {
  194. animation-timing-function: ease-out;
  195. --l-left: calc((var(--l-loadding-ball-size,100%) * 2.1 - var(--l-loadding-ball-size,100%)) / 2);
  196. transform: translate3d(var(--l-left), 0, var(--l-loadding-ball-size));
  197. }
  198. 50% {
  199. --l-left: calc((var(--l-loadding-ball-size,100%) * 2.1 - var(--l-loadding-ball-size,100%)));
  200. animation-timing-function:ease-in;
  201. transform: translate3d(var(--l-left), 0, 0);
  202. }
  203. 75% {
  204. animation-timing-function: ease-out;
  205. --l-left: calc((var(--l-loadding-ball-size,100%) * 2.1 - var(--l-loadding-ball-size,100%)) / 2);
  206. transform: translate3d(var(--l-left), 0, calc(var(--l-loadding-ball-size) * -1));
  207. }
  208. }
  209. @keyframes l-ball-after {
  210. 0%{
  211. animation-timing-function: ease-in;
  212. }
  213. 25% {
  214. animation-timing-function: ease-out;
  215. --l-left: calc((var(--l-loadding-ball-size,100%) * 2.1 - var(--l-loadding-ball-size,100%)) / 2 * -1);
  216. transform: translate3d(var(--l-left), 0, calc(var(--l-loadding-ball-size) * -1));
  217. }
  218. 50% {
  219. animation-timing-function:ease-in;
  220. --l-left: calc((var(--l-loadding-ball-size,100%) * 2.1 - var(--l-loadding-ball-size,100%)) * -1);
  221. transform: translate3d(var(--l-left), 0, 0);
  222. }
  223. 75% {
  224. animation-timing-function: ease-out;
  225. --l-left: calc((var(--l-loadding-ball-size,100%) * 2.1 - var(--l-loadding-ball-size,100%)) / 2 * -1);
  226. transform: translate3d(var(--l-left), 0, var(--l-loadding-ball-size));
  227. }
  228. }
  229. /* #endif */