vuetify/src/stylus/components/_progress-circular.styl

Vue.js 2 Semantic Component Framework

@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)