<div class='container'>
  <div class='bar'>
  </div>
</div>

:root {
  --colour1: #f1c40f;
  --colour2: #2c3e50;
  --speed: 4s;
  --patternRepeatWidth: 80;
  --stripeWidth: calc(var(--patternRepeatWidth) * 1px);
  --fundamentalBase: calc(1px * sqrt(2 * pow(var(--patternRepeatWidth), 2)));
}

html,
body {
  height: 100%;
}

@keyframes slide {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: var(--fundamentalBase);
  }
}

.container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .bar {
    min-height: 100px;
    border-radius: 10px;
    width: calc(var(--fundamentalBase) * 4);
    @media only screen and (max-width: 450px) {
      width: calc(var(--fundamentalBase) * 3);
    }
    @media only screen and (max-width: 350px) {
      width: calc(var(--fundamentalBase) * 2);
    }
    box-shadow: 0px 10px 13px -6px rgba(44, 62, 80, 1);
    background-color: var(--colour2);
    background-image: repeating-linear-gradient(
      45deg,
      transparent,
      transparent calc(var(--stripeWidth) / 2),
      var(--colour1) calc(var(--stripeWidth) / 2),
      var(--colour1) var(--stripeWidth)
    );

    animation: slide var(--speed) linear infinite;
    will-change: background-position;
  }
}