index.less 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. @import "../styles/mixins/index.less";
  2. @import "../styles/themes/index.less";
  3. .@{wux-prefix}-progress {
  4. display: flex;
  5. align-items: center;
  6. &__outer {
  7. flex: 1;
  8. }
  9. &__inner {
  10. background-color: @progress-remaining-color;
  11. }
  12. &__bar {
  13. background-color: @progress-default-color;
  14. transition: all .3s linear 0s;
  15. }
  16. &__text {
  17. margin-left: @progress-text-margin;
  18. text-align: left;
  19. vertical-align: middle;
  20. }
  21. &--round &__inner,
  22. &--round &__bar {
  23. border-radius: @progress-radius;
  24. }
  25. &--progress &__bar {
  26. position: relative;
  27. &::before {
  28. content: '';
  29. opacity: 0;
  30. position: absolute;
  31. top: 0;
  32. left: 0;
  33. right: 0;
  34. bottom: 0;
  35. background: #fff;
  36. border-radius: 10px;
  37. animation: progress 2s ease-in-out infinite;
  38. }
  39. }
  40. }
  41. @keyframes progress {
  42. 0% {
  43. opacity: .3;
  44. width: 0;
  45. }
  46. 100% {
  47. opacity: 0;
  48. width: 100%;
  49. }
  50. }