index.wxss 915 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. .wux-progress {
  2. display: -ms-flexbox;
  3. display: flex;
  4. -ms-flex-align: center;
  5. align-items: center
  6. }
  7. .wux-progress__outer {
  8. -ms-flex: 1;
  9. flex: 1
  10. }
  11. .wux-progress__inner {
  12. background-color: #f3f3f3
  13. }
  14. .wux-progress__bar {
  15. background-color: #33cd5f;
  16. transition: all .3s linear 0s
  17. }
  18. .wux-progress__text {
  19. margin-left: 10rpx;
  20. text-align: left;
  21. vertical-align: middle
  22. }
  23. .wux-progress--round .wux-progress__bar,
  24. .wux-progress--round .wux-progress__inner {
  25. border-radius: 200rpx
  26. }
  27. .wux-progress--progress .wux-progress__bar {
  28. position: relative
  29. }
  30. .wux-progress--progress .wux-progress__bar::before {
  31. content: '';
  32. opacity: 0;
  33. position: absolute;
  34. top: 0;
  35. left: 0;
  36. right: 0;
  37. bottom: 0;
  38. background: #fff;
  39. border-radius: 20rpx;
  40. animation: progress 2s ease-in-out infinite
  41. }
  42. @keyframes progress {
  43. 0% {
  44. opacity: .3;
  45. width: 0
  46. }
  47. 100% {
  48. opacity: 0;
  49. width: 100%
  50. }
  51. }