| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889 |
- @use 'sass:list'
- @use '../../styles/settings'
- @use './variables' as *
- // Elements
- .v-progress-circular
- align-items: center
- display: inline-flex
- justify-content: center
- position: relative
- vertical-align: middle
- > svg
- width: 100%
- height: 100%
- margin: auto
- position: absolute
- top: 0
- bottom: 0
- left: 0
- right: 0
- z-index: 0
- .v-progress-circular__content
- align-items: center
- display: flex
- justify-content: center
- .v-progress-circular__underlay
- color: $progress-circular-underlay-color
- stroke: currentColor
- z-index: 1
- .v-progress-circular__overlay
- stroke: currentColor
- transition: $progress-circular-overlay-transition
- z-index: 2
- // Modifiers
- .v-progress-circular
- @each $name, $multiplier in $progress-circular-sizes
- $size: $progress-circular-size + (settings.$size-scale * $multiplier)
- &--size-#{$name}
- height: $size
- width: $size
- .v-progress-circular--indeterminate
- > svg
- animation: $progress-circular-rotate-animation
- transform-origin: center center
- transition: $progress-circular-intermediate-svg-transition
- .v-progress-circular__overlay
- animation: $progress-circular-rotate-dash, $progress-circular-rotate-animation
- stroke-dasharray: 25, 200
- stroke-dashoffset: 0
- stroke-linecap: round
- transform-origin: center center
- transform: $progress-circular-overlay-transform
- .v-progress-circular--disable-shrink
- > svg
- animation-duration: list.nth($progress-circular-rotate-animation, 2) * .5
- .v-progress-circular__overlay
- animation: none
- .v-progress-circular--indeterminate:not(.v-progress-circular--visible)
- > svg,
- .v-progress-circular__overlay
- animation-play-state: paused !important
- @keyframes progress-circular-dash
- 0%
- stroke-dasharray: 1, 200
- stroke-dashoffset: 0px
- 50%
- stroke-dasharray: 100, 200
- stroke-dashoffset: -15px
- 100%
- stroke-dasharray: 100, 200
- stroke-dashoffset: -124px
- @keyframes progress-circular-rotate
- 100%
- transform: rotate(270deg)
|
