- 
  var str = 'loading';
  
.preloader
  -for(var i = 0; i < str.length; i++)
    .preloader__wheel-wrapper
      .preloader__wheel
        span.preloader__content #{str[i]}
        .preloader__inner-wheel
        .preloader__second-inner-whell

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans')
$font: 'Josefin Sans', sans-serif
$wheels_amount: 7
$wheel_size: 60px
$small_wheel_size: $wheel_size / 3
$medium_wheel_size: $small_wheel_size * 2.5
$color_1: #F4511E
$color_2: #DD2C00
$color_3: #FF7043
html,
body
  background-color: #222
  margin: 0
  padding: 0
  width: 100%
  height: 100%
  font-family: $font
  box-sizing: border-box
*,
*::before,
*::after
  box-sizing: inherit
.preloader
  position: absolute
  left: 50%
  top: 10%
  transform: translate(-50%, -50%)
  &__content
    position: absolute
    color: $color_1
    top: -20px
    font-size: 1.2em
    text-transform: uppercase
  &__wheel
    width: $wheel_size
    height: $wheel_size
    background: $color_1
    z-index: 2
  &__wheel-wrapper
    position: absolute
    z-index: 1
    &:nth-child(2n)
      right: 10px 
      &:before
        content: ''
        top: -15px
        left: 2px
        position: absolute
        width: 110px
        height: 1px
        background-color: $color_2
        transform: rotate(-50.5deg)
        z-index: 5
      &:after
        content: ''
        position: absolute
        width: 110px
        height: 1px
        background-color: $color_2
        transform: rotate(-33.5deg)
        z-index: 5
        left: 23px
        top: 10px
    &:nth-child(2n+1)
      left: 10px
      &:before
        content: ''
        top: 9px
        left: -74px
        position: absolute
        width: 110px
        height: 1px
        background-color: $color_2
        transform: rotate(33deg)
        z-index: 5
      &:after
        content: ''
        position: absolute
        width: 110px
        height: 1px
        background-color: $color_2
        transform: rotate(49deg)
        z-index: 5
        top: -17.5px
        left: -54px
    &:nth-child(1)
      &:after
        display: none
      &:before
        display: none
  &__inner-wheel
    width: $small_wheel_size
    height: $small_wheel_size
    background-color: $color_2
    position: absolute
    left: ($wheel_size - $small_wheel_size) / 2
    top: ($wheel_size - $small_wheel_size) / 2
    transform: rotate(45deg)
    border-radius: 50%
    z-index: 10
  &__second-inner-whell
    @extend .preloader__inner-wheel
    width: $medium_wheel_size
    height: $medium_wheel_size
    left: ($wheel_size - $medium_wheel_size) / 2
    top: ($wheel_size - $medium_wheel_size) / 2
    background-color: $color_3
    border: 1px solid $color_2
    z-index: 2  
  @for $i from 1 through $wheels_amount
    .preloader__wheel-wrapper:nth-child(#{$i})
      top: #{$i * 70}px
      .preloader__content
        animation: wheel_rotate #{($wheels_amount / $i)}s linear infinite
      .preloader__wheel
        animation: _wheel_rotate #{($wheels_amount / $i)}s linear infinite
  @keyframes wheel_rotate
    0%
      transform: rotate(0)
    80%
      transform: rotate(335deg)
    100%
      transform: rotate(360deg)
  @keyframes _wheel_rotate
    0%
      transform: rotate(360deg)
    80%
      transform: rotate(15deg)
    100%
      transform: rotate(0deg)