.q-spinner
  vertical-align: middle

.q-spinner-mat
  animation: q-spin 2s linear infinite
  transform-origin: center center
  .path
    stroke-dasharray: 1, 200 /* rtl:ignore */
    stroke-dashoffset: 0 /* rtl:ignore */
    animation: q-mat-dash 1.5s ease-in-out infinite

@keyframes q-spin
  0%
    transform: rotate3d(0, 0, 1, 0deg) /* rtl:ignore */
  25%
    transform: rotate3d(0, 0, 1, 90deg) /* rtl:ignore */
  50%
    transform: rotate3d(0, 0, 1, 180deg) /* rtl:ignore */
  75%
    transform: rotate3d(0, 0, 1, 270deg) /* rtl:ignore */
  100%
    transform: rotate3d(0, 0, 1, 359deg) /* rtl:ignore */

@keyframes q-mat-dash
  0%
    stroke-dasharray: 1, 200 /* rtl:ignore */
    stroke-dashoffset: 0 /* rtl:ignore */
  50%
    stroke-dasharray: 89, 200 /* rtl:ignore */
    stroke-dashoffset: -35px /* rtl:ignore */
  100%
    stroke-dasharray: 89, 200 /* rtl:ignore */
    stroke-dashoffset: -124px /* rtl:ignore */