VProgressLinear.css 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. .v-progress-linear {
  2. background: transparent;
  3. overflow: hidden;
  4. position: relative;
  5. transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  6. width: 100%;
  7. }
  8. .v-progress-linear--rounded {
  9. border-radius: 9999px;
  10. }
  11. @media (forced-colors: active) {
  12. .v-progress-linear {
  13. border: thin solid buttontext;
  14. }
  15. }
  16. .v-progress-linear__background,
  17. .v-progress-linear__buffer {
  18. background: currentColor;
  19. bottom: 0;
  20. left: 0;
  21. opacity: var(--v-border-opacity);
  22. position: absolute;
  23. top: 0;
  24. width: 100%;
  25. transition-property: width, left, right;
  26. transition: inherit;
  27. }
  28. @media (forced-colors: active) {
  29. .v-progress-linear__buffer {
  30. background-color: highlight;
  31. opacity: 0.3;
  32. }
  33. }
  34. .v-progress-linear__content {
  35. align-items: center;
  36. display: flex;
  37. height: 100%;
  38. justify-content: center;
  39. left: 0;
  40. pointer-events: none;
  41. position: absolute;
  42. top: 0;
  43. width: 100%;
  44. }
  45. .v-progress-linear__determinate,
  46. .v-progress-linear__indeterminate {
  47. background: currentColor;
  48. }
  49. @media (forced-colors: active) {
  50. .v-progress-linear__determinate,
  51. .v-progress-linear__indeterminate {
  52. background-color: highlight;
  53. }
  54. }
  55. .v-progress-linear__determinate {
  56. height: inherit;
  57. left: 0;
  58. position: absolute;
  59. transition: inherit;
  60. transition-property: width, left, right;
  61. }
  62. .v-progress-linear__indeterminate .long, .v-progress-linear__indeterminate .short {
  63. animation-play-state: paused;
  64. animation-duration: 2.2s;
  65. animation-iteration-count: infinite;
  66. bottom: 0;
  67. height: inherit;
  68. left: 0;
  69. position: absolute;
  70. right: auto;
  71. top: 0;
  72. width: auto;
  73. }
  74. .v-progress-linear__indeterminate .long {
  75. animation-name: indeterminate-ltr;
  76. }
  77. .v-progress-linear__indeterminate .short {
  78. animation-name: indeterminate-short-ltr;
  79. }
  80. .v-progress-linear__stream {
  81. animation: stream 0.25s infinite linear;
  82. animation-play-state: paused;
  83. bottom: 0;
  84. left: auto;
  85. opacity: 0.3;
  86. pointer-events: none;
  87. position: absolute;
  88. transition: inherit;
  89. transition-property: width, left, right;
  90. }
  91. .v-progress-linear--reverse .v-progress-linear__background,
  92. .v-progress-linear--reverse .v-progress-linear__determinate,
  93. .v-progress-linear--reverse .v-progress-linear__content {
  94. left: auto;
  95. right: 0;
  96. }
  97. .v-progress-linear--reverse .v-progress-linear__indeterminate .long, .v-progress-linear--reverse .v-progress-linear__indeterminate .short {
  98. left: auto;
  99. right: 0;
  100. }
  101. .v-progress-linear--reverse .v-progress-linear__indeterminate .long {
  102. animation-name: indeterminate-rtl;
  103. }
  104. .v-progress-linear--reverse .v-progress-linear__indeterminate .short {
  105. animation-name: indeterminate-short-rtl;
  106. }
  107. .v-progress-linear--reverse .v-progress-linear__stream {
  108. right: auto;
  109. }
  110. .v-progress-linear--absolute,
  111. .v-progress-linear--fixed {
  112. left: 0;
  113. z-index: 1;
  114. }
  115. .v-progress-linear--absolute {
  116. position: absolute;
  117. }
  118. .v-progress-linear--fixed {
  119. position: fixed;
  120. }
  121. .v-progress-linear--rounded {
  122. border-radius: 9999px;
  123. }
  124. .v-progress-linear--rounded.v-progress-linear--rounded-bar .v-progress-linear__determinate,
  125. .v-progress-linear--rounded.v-progress-linear--rounded-bar .v-progress-linear__indeterminate {
  126. border-radius: inherit;
  127. }
  128. .v-progress-linear--striped .v-progress-linear__determinate {
  129. animation: progress-linear-stripes 1s infinite linear;
  130. background-image: linear-gradient(135deg, hsla(0, 0%, 100%, 0.25) 25%, transparent 0, transparent 50%, hsla(0, 0%, 100%, 0.25) 0, hsla(0, 0%, 100%, 0.25) 75%, transparent 0, transparent);
  131. background-repeat: repeat;
  132. background-size: var(--v-progress-linear-height);
  133. }
  134. .v-progress-linear--active .v-progress-linear__indeterminate .long, .v-progress-linear--active .v-progress-linear__indeterminate .short {
  135. animation-play-state: running;
  136. }
  137. .v-progress-linear--active .v-progress-linear__stream {
  138. animation-play-state: running;
  139. }
  140. .v-progress-linear--rounded-bar .v-progress-linear__determinate,
  141. .v-progress-linear--rounded-bar .v-progress-linear__indeterminate,
  142. .v-progress-linear--rounded-bar .v-progress-linear__stream + .v-progress-linear__background {
  143. border-radius: 9999px;
  144. }
  145. .v-progress-linear--rounded-bar .v-progress-linear__determinate {
  146. border-start-start-radius: 0;
  147. border-end-start-radius: 0;
  148. }
  149. @keyframes indeterminate-ltr {
  150. 0% {
  151. left: -90%;
  152. right: 100%;
  153. }
  154. 60% {
  155. left: -90%;
  156. right: 100%;
  157. }
  158. 100% {
  159. left: 100%;
  160. right: -35%;
  161. }
  162. }
  163. @keyframes indeterminate-rtl {
  164. 0% {
  165. left: 100%;
  166. right: -90%;
  167. }
  168. 60% {
  169. left: 100%;
  170. right: -90%;
  171. }
  172. 100% {
  173. left: -35%;
  174. right: 100%;
  175. }
  176. }
  177. @keyframes indeterminate-short-ltr {
  178. 0% {
  179. left: -200%;
  180. right: 100%;
  181. }
  182. 60% {
  183. left: 107%;
  184. right: -8%;
  185. }
  186. 100% {
  187. left: 107%;
  188. right: -8%;
  189. }
  190. }
  191. @keyframes indeterminate-short-rtl {
  192. 0% {
  193. left: 100%;
  194. right: -200%;
  195. }
  196. 60% {
  197. left: -8%;
  198. right: 107%;
  199. }
  200. 100% {
  201. left: -8%;
  202. right: 107%;
  203. }
  204. }
  205. @keyframes stream {
  206. to {
  207. transform: translateX(var(--v-progress-linear-stream-to));
  208. }
  209. }
  210. @keyframes progress-linear-stripes {
  211. 0% {
  212. background-position-x: var(--v-progress-linear-height);
  213. }
  214. }