index.less 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. @import "../styles/mixins/index.less";
  2. @import "../styles/themes/index.less";
  3. .@{wux-prefix}-loading {
  4. position: fixed;
  5. z-index: @z-index-toast;
  6. top: 50%;
  7. left: 50%;
  8. background: @toast-bg;
  9. font-size: @font-size-base;
  10. line-height: @line-height-base;
  11. text-align: center;
  12. border-radius: @border-radius-base;
  13. color: @text-color-inverse;
  14. transform: translate3d(-50%, -50%, 0);
  15. &__content {
  16. min-width: 118px;
  17. padding: 9px 15px;
  18. box-sizing: border-box;
  19. &--has-icon {
  20. padding: 15px;
  21. .@{wux-prefix}-loading__text {
  22. margin-top: 6px;
  23. }
  24. }
  25. }
  26. &__icon {
  27. margin: 0;
  28. display: block;
  29. &--loading {
  30. display: inline-block !important;
  31. vertical-align: middle;
  32. animation: loading 1s steps(12, end) infinite;
  33. .encoded-svg-background(loading);
  34. background-repeat: no-repeat;
  35. background-size: 100%;
  36. margin: 5px 0 0 !important;
  37. width: 38px;
  38. height: 38px;
  39. vertical-align: baseline;
  40. }
  41. }
  42. }
  43. @keyframes loading {
  44. 0% {
  45. transform: rotate3d(0, 0, 1, 0deg);
  46. }
  47. 100% {
  48. transform: rotate3d(0, 0, 1, 360deg);
  49. }
  50. }