.spinner
  display inline-block
  width 80px
  height 80px
  margin-left auto
  margin-right auto
  position relative

  &--small-scale
    transform scale(.5)

  &--absolute
    margin auto
    position absolute
    top 0
    bottom 0
    left 0
    right 0

  &--fixed
    margin auto
    position fixed
    top 0
    bottom 0
    left 0
    right 0

  &--small
    width 40px
    height 40px

  &--fill
    width 100%
    height 100%

  &__big-circle
    width 100%
    height 100%
    position absolute
    top 0
    animation 1.5s roundBig linear infinite

  &__small-circle
    width 52%
    height 52%
    position absolute
    top 24%
    left 24%
    animation 2s roundSmall linear infinite

  &__icon
    width 100%
    height 100%
    overflow visible

big-stroke-step = 150px // stylelint-disable-line sh-waqar/declaration-use-variable
small-stroke-step = 80px // stylelint-disable-line sh-waqar/declaration-use-variable

@keyframes roundSmall
  0%
    transform rotate(0)
    stroke-dashoffset 0
    stroke-dasharray small-stroke-step

  50%
    transform rotate(180deg)
    stroke-dashoffset small-stroke-step
    stroke-dasharray small-stroke-step

  100%
    transform rotate(360deg)
    stroke-dashoffset small-stroke-step * 2
    stroke-dasharray small-stroke-step

@keyframes roundBig
  0%
    transform rotate(0)
    stroke-dashoffset 0
    stroke-dasharray big-stroke-step

  50%
    transform rotate(180deg)
    stroke-dashoffset big-stroke-step
    stroke-dasharray big-stroke-step

  100%
    transform rotate(360deg)
    stroke-dashoffset big-stroke-step * 2
    stroke-dasharray big-stroke-step