// Loader bar
// ==========================================================================

.loader-bar-ping-pong
  &:before
    content: ''
    width: 200px
    height: 20px
    position: absolute
    top: calc(50% - 10px)
    left: calc(50% - 100px)
    background-color: $loader-bar-ping--bar

  &:after
    content: ''
    width: 50px
    height: 20px
    position: absolute
    top: calc(50% - 10px)
    left: calc(50% - 100px)
    background-color: $loader-bar-ping--ticker
    animation: moveBarPingPong .5s linear infinite alternate

  &[data-rounded]
    &:before
      border-radius: 10px

    &:after
      border-radius: 50%
      width: 20px
      animation-name: moveBarPingPongRounded

@keyframes moveBarPingPong
  0%
    left: calc(50% - 100px)

  100%
    left: calc(50% - -50px)

@keyframes moveBarPingPongRounded
  0%
    left: calc(50% - 100px)

  100%
    left: calc(50% - -80px)