合同小程序前端代码仓库
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.

241 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 MP-ALIPAY */
  7. $loading-duration: create-var(loading-duration, 2s);
  8. /* #endif */
  9. /* #ifdef MP-ALIPAY */
  10. $loading-duration: create-var(loading-duration, 1s);
  11. /* #endif */
  12. /* #ifndef APP-NVUE */
  13. /* #ifndef MP-ALIPAY */
  14. @property --l-loading-start {
  15. syntax: '<length-percentage>';
  16. initial-value: 1%;
  17. inherits: false;
  18. }
  19. @property --l-loading-end {
  20. syntax: '<length-percentage>';
  21. initial-value: 1%;
  22. inherits: false;
  23. }
  24. @property --l-left {
  25. syntax: '<length-percentage>';
  26. initial-value: 1%;
  27. inherits: false;
  28. }
  29. @property --l-loadding-ball-size {
  30. syntax: '<length> | <length-percentage>';
  31. // initial-value: 1%;
  32. inherits: false;
  33. }
  34. /* #endif */
  35. :host {
  36. display: inline-flex;
  37. }
  38. /* #endif */
  39. .l-loading {
  40. position: relative;
  41. // color: #c8c9cc;
  42. color: $loading-color;
  43. font-size: 0;
  44. vertical-align: middle;
  45. &--ball{
  46. display: inline-flex;
  47. align-items: center;
  48. .l-loading {
  49. &__ball {
  50. position: relative;
  51. perspective: calc(var(--l-loadding-ball-size) * 4);
  52. transform-style: preserve-3d;
  53. // border: 1px solid;
  54. &:before{
  55. background-color: $primary-color;
  56. left: 0%;
  57. // mix-blend-mode: darken;
  58. animation-name: l-ball-before;
  59. }
  60. &:after{
  61. right: 0;
  62. background-color: red;
  63. // mix-blend-mode: darken;
  64. animation-name: l-ball-after;
  65. }
  66. &:before,&:after{
  67. top: 0;
  68. content: '';
  69. position: absolute;
  70. // width: 100%;
  71. height: 100%;
  72. aspect-ratio: 1/1;
  73. border-radius: 50%;
  74. animation-iteration-count: infinite;
  75. animation-delay: -100ms;
  76. animation-duration: 900ms;
  77. mix-blend-mode: darken;
  78. }
  79. }
  80. }
  81. }
  82. &--circular {
  83. .l-loading {
  84. &__circular {
  85. display: inline-block;
  86. position: relative;
  87. /* #ifndef APP-NVUE */
  88. animation: l-rotate $loading-duration linear infinite;
  89. vertical-align: middle;
  90. &:before {
  91. content: '';
  92. display: block;
  93. width: 100%;
  94. height: 100%;
  95. border-radius: 50%;
  96. /* #ifndef MP-ALIPAY || APP-VUE */
  97. background-image: conic-gradient(
  98. transparent 0%,
  99. transparent var(--l-loading-start, 0%), var(--l-loading-color-1, currentColor) var(--l-loading-start, 0%),
  100. var(--l-loading-color-2, currentColor) var(--l-loading-end, 0%), transparent var(--l-loading-end, 0%),
  101. transparent 100%);
  102. /* #endif */
  103. /* #ifdef MP-ALIPAY || APP-VUE */
  104. background-image: conic-gradient(
  105. var(--l-loading-color-1, transparent) 0%,
  106. var(--l-loading-color-2, currentColor) 100%);
  107. /* #endif */
  108. mask: radial-gradient(closest-side, transparent calc(80% - 1px), #fff 80%);
  109. -webkit-mask: radial-gradient(closest-side, transparent calc(80% - 1px), #fff 80%);
  110. animation: l-circular 2.5s ease-in-out infinite;
  111. transform: rotate(90deg);
  112. }
  113. /* #endif */
  114. }
  115. }
  116. }
  117. &--spinner {
  118. .l-loading {
  119. &__spinner {
  120. position: relative;
  121. box-sizing: border-box;
  122. width: 100%;
  123. height: 100%;
  124. max-width: 100%;
  125. max-height: 100%;
  126. animation-timing-function: steps(12);
  127. animation: l-rotate 0.8s linear infinite;
  128. }
  129. &__dot {
  130. position: absolute;
  131. top: 0;
  132. left: 0;
  133. width: 100%;
  134. height: 100%;
  135. transform: rotate(calc(var(--l-loading-dot, 1) * 30deg));
  136. opacity: calc(var(--l-loading-dot, 1) / 12);
  137. &::before {
  138. display: block;
  139. width: 5rpx;
  140. height: 25%;
  141. margin: 0 auto;
  142. background-color: currentColor;
  143. border-radius: 40%;
  144. content: ' ';
  145. }
  146. }
  147. }
  148. }
  149. &__text{
  150. display: inline-block;
  151. margin-left: $spacer-xs;
  152. color: $loading-text-color;
  153. font-size: $loading-font-size;
  154. vertical-align: middle;
  155. }
  156. &.is-vertical {
  157. display: inline-flex;
  158. flex-direction: column;
  159. align-items: center;
  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-NVUE */
  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 */