#loading-screen {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: black;
  z-index: 10000;
  touch-action: none;
}

.progress-bar-beginning {
  width: 40px;
  height: 81px;
  margin-top: 23px;
  margin-left: 23px;
  background-image: url("assets/progress_bar_filling.png")
}
.progress-bar-middle {
  width: 4px;
  height: 81px;
  margin-top: 23px;
  background-repeat: repeat-x;
  background-image: url("assets/progres_bar_filling_middle.png")
}

.progress-bar-end {
  background-position-x: 44px;
  width: 40px;
  height: 81px;
  margin-top: 23px;
  margin-right: 30px;
  background-image: url("assets/progress_bar_filling.png")
}

.progress-bar {
  display: flex;
  height: 128px;
  width: 395px;
  margin-top: -100px;
  background: url("assets/loader_panel.png") no-repeat 0 0;
}

.animation-image {
  width: 675px;
  height: 380px;
  background: no-repeat 0 0;
}

.animated {
  animation: preloader 1s steps(24) forwards
}

@keyframes preloader {
  from {background-position: 0 0;}
  to {background-position: -16200px 0;}
}