VProgressCircular.css 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. .v-progress-circular {
  2. align-items: center;
  3. display: inline-flex;
  4. justify-content: center;
  5. position: relative;
  6. vertical-align: middle;
  7. }
  8. .v-progress-circular > svg {
  9. width: 100%;
  10. height: 100%;
  11. margin: auto;
  12. position: absolute;
  13. top: 0;
  14. bottom: 0;
  15. left: 0;
  16. right: 0;
  17. z-index: 0;
  18. }
  19. .v-progress-circular__content {
  20. align-items: center;
  21. display: flex;
  22. justify-content: center;
  23. }
  24. .v-progress-circular__underlay {
  25. color: rgba(var(--v-border-color), var(--v-border-opacity));
  26. stroke: currentColor;
  27. z-index: 1;
  28. }
  29. .v-progress-circular__overlay {
  30. stroke: currentColor;
  31. transition: all 0.2s ease-in-out, stroke-width 0s;
  32. z-index: 2;
  33. }
  34. .v-progress-circular--size-x-small {
  35. height: 16px;
  36. width: 16px;
  37. }
  38. .v-progress-circular--size-small {
  39. height: 24px;
  40. width: 24px;
  41. }
  42. .v-progress-circular--size-default {
  43. height: 32px;
  44. width: 32px;
  45. }
  46. .v-progress-circular--size-large {
  47. height: 48px;
  48. width: 48px;
  49. }
  50. .v-progress-circular--size-x-large {
  51. height: 64px;
  52. width: 64px;
  53. }
  54. .v-progress-circular--indeterminate > svg {
  55. animation: progress-circular-rotate 1.4s linear infinite;
  56. transform-origin: center center;
  57. transition: all 0.2s ease-in-out;
  58. }
  59. .v-progress-circular--indeterminate .v-progress-circular__overlay {
  60. animation: progress-circular-dash 1.4s ease-in-out infinite, progress-circular-rotate 1.4s linear infinite;
  61. stroke-dasharray: 25, 200;
  62. stroke-dashoffset: 0;
  63. stroke-linecap: round;
  64. transform-origin: center center;
  65. transform: rotate(-90deg);
  66. }
  67. .v-progress-circular--disable-shrink > svg {
  68. animation-duration: 0.7s;
  69. }
  70. .v-progress-circular--disable-shrink .v-progress-circular__overlay {
  71. animation: none;
  72. }
  73. .v-progress-circular--indeterminate:not(.v-progress-circular--visible) > svg,
  74. .v-progress-circular--indeterminate:not(.v-progress-circular--visible) .v-progress-circular__overlay {
  75. animation-play-state: paused !important;
  76. }
  77. @keyframes progress-circular-dash {
  78. 0% {
  79. stroke-dasharray: 1, 200;
  80. stroke-dashoffset: 0px;
  81. }
  82. 50% {
  83. stroke-dasharray: 100, 200;
  84. stroke-dashoffset: -15px;
  85. }
  86. 100% {
  87. stroke-dasharray: 100, 200;
  88. stroke-dashoffset: -124px;
  89. }
  90. }
  91. @keyframes progress-circular-rotate {
  92. 100% {
  93. transform: rotate(270deg);
  94. }
  95. }