.box-outer
  .main_box
    .bar.top
    .bar.right.delay
    .bar.bottom.delay
    .bar.left

:root {
  font-size: 10px;
  --delay: .5s;
  --timing: 1s;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
}
body {
  background: #000;
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}
.box-outer {
  overflow: hidden;
  margin: 5rem auto;
  width: 20rem;
  height: 20rem;
}
.main_box {
  width: 20rem;
  height: 20rem;
  position: relative;
  background: #f34c4c;
  border: 0.5rem solid #000;
}
.bar {
  position: absolute;
  width: 5rem;
  height: 0.5rem;
  background: #fff;
  transition: all var(--timing) linear;
  -webkit-animation-duration: var(--timing);
  animation-duration: var(--timing);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.bar.delay {
  animation-delay: var(--delay);
  -webkit-animation-delay: var(--delay);
}
.top {
  top: -0.5rem;
  left: -0.5rem;
}
.right {
  top: 1.8rem;
  right: -2.8rem;
  transform: rotate(90deg);
}
.bottom {
  bottom: -0.5rem;
  left: -0.5rem;
}
.left {
  top: 1.8rem;
  left: -2.8rem;
  transform: rotate(90deg);
}
@-webkit-keyframes h-move {
  0% {
    left: -0.5rem;
  }
  100% {
    left: 20rem;
  }
}
@keyframes h-move {
  0% {
    left: -0.5rem;
  }
  100% {
    left: 20rem;
  }
}
.top,
.bottom {
  -webkit-animation-name: h-move;
  animation-name: h-move;
}
@-webkit-keyframes v-move {
  0% {
    top: -0.5rem;
  }
  100% {
    top: 22.8rem;
  }
}
@keyframes v-move {
  0% {
    top: -0.5rem;
  }
  100% {
    top: 22.8rem;
  }
}
.right,
.left {
  -webkit-animation-name: v-move;
  animation-name: v-move;
}