quasar-framework/src/components/progress/progress.ios.styl

Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase

.q-progress
  position relative
  height $progress-track-height
  display block
  width 100%
  background-clip padding-box
  overflow hidden

.q-progress-model
  background currentColor

  &.animate
    animation q-progress-stripes 2s linear infinite

  &:not(.indeterminate)
    position absolute
    top 0
    bottom 0
    transition $progress-transition

  &.indeterminate
    &:before, &:after
      content ''
      position absolute
      background inherit
      top 0
      left 0
      bottom 0
      will-change left, right

    &:before
      animation q-progress-indeterminate 2.1s cubic-bezier(.65, .815, .735, .395) infinite
    &:after
      animation q-progress-indeterminate-short 2.1s cubic-bezier(.165, .84, .44, 1) infinite
      animation-delay 1.15s

  &.stripe
    &, &:before, &:after
      background-image linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent) !important
      background-size 40px 40px !important

.q-progress-track
  top 0
  left 0
  bottom 0
  transition $progress-transition

.q-progress-buffer
  top 50%
  transform translateY(-50%)
  height 4px
  right 0
  transition $progress-transition
  mask url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEyIiBoZWlnaHQ9IjQiIHZpZXdQb3J0PSIwIDAgMTIgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxlbGxpcHNlIGN4PSIyIiBjeT0iMiIgcng9IjIiIHJ5PSIyIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4IiBmcm9tPSIyIiB0bz0iLTEwIiBkdXI9IjAuNnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogIDwvZWxsaXBzZT4KICA8ZWxsaXBzZSBjeD0iMTQiIGN5PSIyIiByeD0iMiIgcnk9IjIiIGNsYXNzPSJsb2FkZXIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIGZyb209IjE0IiB0bz0iMiIgZHVyPSIwLjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICA8L2VsbGlwc2U+Cjwvc3ZnPgo=") // @stylint ignore

.q-progress-track, .q-progress-buffer
  background $progress-track-color
  opacity $progress-track-opacity
  position absolute

@keyframes q-progress-indeterminate
  0%
    left -35%
    right 100%
  60%
    left 100%
    right -90%
  100%
    left 100%
    right -90%

@keyframes q-progress-indeterminate-short
  0%
    left -200%
    right 100%
  60%
    left 107%
    right -8%
  100%
    left 107%
    right -8%

@keyframes q-progress-stripes
  from
    background-position 40px 0
  to
    background-position 0 0