q1m4 loader draft #2

index.pug

container
  progress-bar

q1m4-loader-draft-2.markdown

q1m4 loader draft #2

A Pen by Geoffrey "C0ZEN" Testelin on CodePen.

License.

style.scss

container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  min-width: 100vw;
  background-color: #ffffff;
}

// Real stuff start here

$progress-bar-height: 0.2rem;
$progress-bar-cursor-width: 10vw;
$progress-bar-cursor-color: #e4002b;
$progress-bar-color: lighten($progress-bar-cursor-color, 45%);
$progress-bar-cursor-animation-duration: 1.6s;

@keyframes progress-bar-cursor-animation {
  0% {
    left: -$progress-bar-cursor-width;
  }

  100% {
    left: 100%;
  }
}

progress-bar {
  height: $progress-bar-height;
  width: 50vw;
  background-color: $progress-bar-color;
  position: relative;
  border-radius: 3px;
  overflow: hidden;

  &:before {
    height: $progress-bar-height;
    width: $progress-bar-cursor-width;
    background-color: $progress-bar-cursor-color;
    position: absolute;
    top: 0;
    left: -$progress-bar-cursor-width;
    border-radius: 3px;
    animation-name: progress-bar-cursor-animation;
    animation-duration: $progress-bar-cursor-animation-duration;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.66, -0.01, 0.6, 1);
    transform-origin: center center;
    content: "";
  }
}