progress.wxss 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. .t-float-left {
  2. float: left;
  3. }
  4. .t-float-right {
  5. float: right;
  6. }
  7. @keyframes tdesign-fade-out {
  8. from {
  9. opacity: 1;
  10. }
  11. to {
  12. opacity: 0;
  13. }
  14. }
  15. .hotspot-expanded.relative {
  16. position: relative;
  17. }
  18. .hotspot-expanded::after {
  19. content: '';
  20. display: block;
  21. position: absolute;
  22. left: 0;
  23. top: 0;
  24. right: 0;
  25. bottom: 0;
  26. transform: scale(1.5);
  27. }
  28. .t-progress__inner {
  29. display: flex;
  30. align-items: center;
  31. min-height: 64rpx;
  32. }
  33. .t-progress__bar {
  34. position: relative;
  35. flex: 1;
  36. height: 8rpx;
  37. background: #e7e7e7;
  38. }
  39. .t-progress__bar-percent {
  40. position: absolute;
  41. top: 0;
  42. height: 100%;
  43. background: #0052d9;
  44. transition: all 0.3s ease-out;
  45. border-radius: inherit;
  46. }
  47. .t-progress__label {
  48. display: inline-block;
  49. width: 84rpx;
  50. text-align: right;
  51. margin-left: 32rpx;
  52. font-size: 32rpx;
  53. color: rgba(0, 0, 0, 0.9);
  54. line-height: 48rpx;
  55. }
  56. .t-progress--status--active .t-progress__bar-percent::before {
  57. position: absolute;
  58. top: 0;
  59. right: 0;
  60. bottom: 0;
  61. left: 0;
  62. z-index: 1;
  63. content: '';
  64. animation: progress-active-animation 2s cubic-bezier(0.23, 0.99, 0.86, 0.2) infinite;
  65. background: #fff;
  66. opacity: 0.2;
  67. }
  68. .t-progress--status--success .t-progress__bar-percent {
  69. background: #078d5c;
  70. }
  71. .t-progress--status--warning .t-progress__bar-percent {
  72. background: #ed7b2f;
  73. }
  74. .t-progress--status--warning .t-progress__label {
  75. color: #ed7b2f;
  76. }
  77. .t-progress--status--error .t-progress__bar-percent {
  78. background: #e34d59;
  79. }
  80. .t-progress--status--error .t-progress__label {
  81. color: #e34d59;
  82. }
  83. @keyframes progress-active-animation {
  84. 0% {
  85. width: 0;
  86. opacity: 0.1;
  87. }
  88. 35% {
  89. width: 50%;
  90. opacity: 0.4;
  91. }
  92. 100% {
  93. width: 100%;
  94. opacity: 0;
  95. }
  96. }