body {

  background: #222;

}

​

.loader {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  width: 190px;

  height: 20px;

  margin: auto;

  span {

    width: 2px;

    height: 20px;

    background-color: #e67e22;

    position: absolute;

    left: 0;

    transform-origin: center bottom;

    transform: rotate(-90deg);

    animation-name: load;

    animation-duration: 3s;

    animation-timing-function: ease;

    animation-iteration-count: infinite;

    @for $i from 1 through 20 {

      &:nth-child(#{$i}) {

        left: $i * 9 + px;

        animation-delay: $i * 0.05s;

      }

    }

  }

}

​

@keyframes load {

  to {

    transform: rotate(450deg);

  }

}