vuetify
Version:
Vue.js 2 Semantic Component Framework
59 lines (48 loc) • 1.21 kB
text/stylus
@import '../bootstrap'
.progress-circular
position: relative
display: inline-flex
&--indeterminate
svg
animation: $progress-circular-rotate-animation
transform-origin: center center
width: 100%
height: 100%
margin: auto
position: absolute
top: 0
bottom: 0
left: 0
right: 0
transition: $process-circular-intermediate-svg-transition
z-index: 0
.progress-circular__overlay
animation: $progress-circular-rotate-dash
stroke-linecap: round
stroke-dasharray: 80,200
stroke-dashoffset: 0px
&__underlay
stroke: $progress-circular-underlay-stroke
z-index: 1
&__overlay
stroke: currentColor
z-index: 2
transition: $progress-circular-overlay-transition
&__info
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
@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: -125px
@keyframes progress-circular-rotate
100%
transform: rotate(360deg)