index.wxss 850 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. .wux-progress {
  2. display: flex;
  3. align-items: center
  4. }
  5. .wux-progress__outer {
  6. flex: 1
  7. }
  8. .wux-progress__inner {
  9. background-color: #f3f3f3
  10. }
  11. .wux-progress__bar {
  12. background-color: #33cd5f;
  13. transition: all .3s linear 0s
  14. }
  15. .wux-progress__text {
  16. margin-left: 10rpx;
  17. text-align: left;
  18. vertical-align: middle
  19. }
  20. .wux-progress--round .wux-progress__bar,
  21. .wux-progress--round .wux-progress__inner {
  22. border-radius: 200rpx
  23. }
  24. .wux-progress--progress .wux-progress__bar {
  25. position: relative
  26. }
  27. .wux-progress--progress .wux-progress__bar::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: 20rpx;
  37. animation: progress 2s ease-in-out infinite
  38. }
  39. @keyframes progress {
  40. 0% {
  41. opacity: .3;
  42. width: 0
  43. }
  44. 100% {
  45. opacity: 0;
  46. width: 100%
  47. }
  48. }