quasar/src/components/circular-progress/QCircularProgress.styl

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

.q-circular-progress
  display inline-block
  position relative
  vertical-align middle

  width 1em
  height 1em
  line-height 1

  &.q-focusable
    border-radius 50%

  &__svg
    width 100%
    height 100%

  &__text
    font-size .25em

  &--indeterminate
    .q-circular-progress__svg
      transform-origin 50% 50%
      animation q-spin 2s linear infinite /* rtl:ignore */
    .q-circular-progress__circle
      stroke-dasharray 1 400
      stroke-dashoffset 0
      animation q-circular-progress-circle 1.5s ease-in-out infinite /* rtl:ignore */

@keyframes q-circular-progress-circle
  0%
    stroke-dasharray 1, 400
    stroke-dashoffset 0
  50%
    stroke-dasharray 400, 400
    stroke-dashoffset -100
  100%
    stroke-dasharray 400, 400
    stroke-dashoffset -300