.heart-wrapper {
  z-index: 1000;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: auto;
  background: linear-gradient(to right, #232526, #414345);
}

.load-title {
  width: 30%;
  height: 13%;
  padding: 2px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 12%;
}

.load-title h1{
  color:white;
  font-size:20px;
  text-align:center;
  margin-bottom: 5px;
  font-family: 'Codec Pro';
}

.load-title h2{
  color:white;
  font-size:18px;
  text-align:center;
  font-family: 'Codec Pro';
  border-bottom: solid #fff;
}

.heart-loading {
  position: fixed; /* or absolute */
  width: 15%;
  height: 30%;
  top: 50%;
  left: 41.5%;
}

.heart-loading ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.heart-loading li {
  /* --count: 9;
  --rgb: calc(var(--index) / var(--count) * .5turn); */
  /*You can't set this delay too slowly. If it's too slow, you can't see that it's heart-shaped. Adjust the delay and animation time at the same time*/
  --time: calc((var(--index) - 1) * 70ms);
  border-radius: 5px;
  width: 10px;
  height: 10px;
  background-color: #fff;
  /*Using the filter function can make the color gradient will be very beautiful*/
  /* filter: hue-rotate(var(--rgb)); */
  /*Here's the animation duration*/
  animation-duration: 2.5s;
  animation-delay: var(--time);
  animation-iteration-count: infinite;
}
.line-1,
.line-9 {
  animation-name: line-move-1;
}
.line-2,
.line-8 {
  animation-name: line-move-2;
}
.line-3,
.line-7 {
  animation-name: line-move-3;
}
.line-4,
.line-6 {
  animation-name: line-move-4;
}
.line-5 {
  animation-name: line-move-5;
}
/*Symmetrical animation should be the same height, so you can see the heart shape*/
@keyframes line-move-1 {

  0%,
  10%,
  90%,
  100% {
    height: 10px;
  }

  45%,
  55% {
    height: 30px;
    transform: translate3d(0, -15px, 0);
  }
}

@keyframes line-move-2 {

  0%,
  10%,
  90%,
  100% {
    height: 10px;
  }

  45%,
  55% {
    height: 60px;
    transform: translate3d(0, -30px, 0);
  }
}

@keyframes line-move-3 {

  0%,
  10%,
  90%,
  100% {
    height: 10px;
  }

  45%,
  55% {
    height: 80px;
    transform: translate3d(0, -40px, 0);
  }
}

@keyframes line-move-4 {

  0%,
  10%,
  90%,
  100% {
    height: 10px;
  }

  45%,
  55% {
    height: 90px;
    transform: translate3d(0, -30px, 0);
  }
}

@keyframes line-move-5 {

  0%,
  10%,
  90%,
  100% {
    height: 10px;
  }

  45%,
  55% {
    height: 90px;
    transform: translate3d(0, -20px, 0);
  }
}