.loading {
  position: fixed;
  top: 0;
  width: 100%;
  height: 3px;
  background-color: transparent;
  border-radius: 1px;
  overflow: hidden;
  display: none;
}
.showBar{
    display: block;
}
button:hover{
  outline: 1px solid blue;
}


.bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: #ff0008;
  animation: bar-1 2.1s cubic-bezier(0.65, 0.81, 0.73, 0.4) infinite;
}

@keyframes bar-1 {
  0% {
    left: -35%;
    right: 100%;
  }

  60%,
  100% {
    left: 100%;
    right: -90%;
  }
}

.bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: #ff0008;
  animation: bar-2 2.1s cubic-bezier(0.16, 0.84, 0.44, 1) infinite;
  animation-delay: 1.15s;
}

@keyframes bar-2 {
  0% {
    left: -200%;
    right: 100%;
  }

  60%,
  100% {
    left: 107%;
    right: -8%;
  }
}