.app-loading {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: 10em;
}
.loader {
  position: relative;
  width: 120px;
  height: 120px;
  background-repeat: no-repeat;
  background-image: linear-gradient(black 80px, transparent 0), linear-gradient(black 60px, transparent 0),
    linear-gradient(black 10px, transparent 0), linear-gradient(black 10px, transparent 0), linear-gradient(black 10px, transparent 0),
    linear-gradient(black 25px, transparent 0), radial-gradient(circle 10px, black 100%, transparent 0),
    linear-gradient(#6b6b6b 75px, transparent 0);
  background-size: 10px 80px, 10px 60px, 120px 10px, 80px 10px, 40px 10px, 10px 20px, 20px 10px, 10px 80px;
  background-position: left bottom, right bottom, center bottom, right 55px, left 40px, 40px 40px, 80px 90px, 9px bottom;
}
.loaderChiquito {
  position: relative;
  width: 60px;
  height: 60px;
  background-repeat: no-repeat;
  background-image: linear-gradient(black 40px, transparent 0), linear-gradient(black 30px, transparent 0),
    linear-gradient(black 5px, transparent 0), linear-gradient(black 5px, transparent 0), linear-gradient(black 5px, transparent 0),
    linear-gradient(black 12px, transparent 0), radial-gradient(circle 5px, black 100%, transparent 0),
    linear-gradient(#6b6b6b 38px, transparent 0);
  background-size: 5px 40px, 5px 30px, 59px 5px, 39px 5px, 20px 5px, 5px 10px, 10px 5px, 5px 40px;
  background-position: left bottom, right bottom, center bottom, 20px 27px, left 20px, 20px 20px, 40px 45px, 4px bottom;
}
.loaderMini {
  position: relative;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-image: linear-gradient(black 20px, transparent 0), linear-gradient(black 15px, transparent 0),
    linear-gradient(black 3px, transparent 0), linear-gradient(black 3px, transparent 0), linear-gradient(black 3px, transparent 0),
    linear-gradient(black 6px, transparent 0), radial-gradient(circle 3px, black 100%, transparent 0),
    linear-gradient(#6b6b6b 19px, transparent 0);
  background-size: 3px 20px, 3px 15px, 30px 3px, 20px 3px, 10px 3px, 3px 5px, 5px 3px, 3px 20px;
  background-position: left bottom, right bottom, center bottom, 10px 15px, left 10px, 10px 10px, 20px 23px, 2px bottom;
}
.loaderMini:before {
  content: '';
  width: 17px;
  height: 20px;
  background-color: #ea1515;
  background-image: linear-gradient(to bottom, #ea1515 50%, #000 51%), linear-gradient(to bottom, #bbb 50%, #0000 51%);
  background-size: 15px 10px, 15px 5px;
  background-repeat: no-repeat, repeat-y;
  background-position: center -5px, center 0;
  box-shadow: 0 0 5px #0003;
  position: absolute;
  left: 70%;
  transform: translatex(-50%);
  bottom: calc(61% + 7px);
  animation: loadPaperMini 2s ease-in infinite;
}
.loaderChiquito:before {
  content: '';
  width: 35px;
  height: 40px;
  background-color: #ea1515;
  background-image: linear-gradient(to bottom, #ea1515 50%, #000 51%), linear-gradient(to bottom, #bbb 50%, #0000 51%);
  background-size: 30px 20px, 30px 10px;
  background-repeat: no-repeat, repeat-y;
  background-position: center -5px, center 0;
  box-shadow: 0 0 5px #0003;
  position: absolute;
  left: 70%;
  transform: translatex(-50%);
  bottom: calc(61% + 15px);
  animation: loadPaperChiquito 2s ease-in infinite;
}
.loader:before {
  content: '';
  width: 70px;
  height: 80px;
  background-color: #ea1515;
  background-image: linear-gradient(to bottom, #ea1515 50%, #000 51%), linear-gradient(to bottom, #bbb 50%, #0000 51%);
  background-size: 60px 20px, 60px 10px;
  background-repeat: no-repeat, repeat-y;
  background-position: center -5px, center 0;
  box-shadow: 0 0 10px #0003;
  position: absolute;
  left: 70%;
  transform: translatex(-50%);
  bottom: calc(61% + 30px);
  animation: loadPaper 2s ease-in infinite;
}
@keyframes loadPaperMini {
  0% {
    opacity: 0;
    height: 20px;
    bottom: calc(61% + 7px);
  }
  2% {
    opacity: 0;
    height: 20px;
    bottom: calc(61% + 4px);
  }
  50% {
    height: 20px;
    bottom: calc(61% - 3px);
  }
  75%,
  100% {
    height: 0px;
    bottom: calc(61% - 3px);
  }
}
@keyframes loadPaperChiquito {
  0% {
    opacity: 0;
    height: 40px;
    bottom: calc(61% + 15px);
  }
  2% {
    opacity: 0;
    height: 40px;
    bottom: calc(61% + 8px);
  }
  50% {
    height: 40px;
    bottom: calc(61% - 5px);
  }
  75%,
  100% {
    height: 0px;
    bottom: calc(61% - 5px);
  }
}
@keyframes loadPaper {
  0% {
    opacity: 0;
    height: 80px;
    bottom: calc(61% + 30px);
  }
  2% {
    opacity: 0;
    height: 80px;
    bottom: calc(61% + 15px);
  }
  50% {
    height: 80px;
    bottom: calc(61% - 10px);
  }
  75%,
  100% {
    height: 0px;
    bottom: calc(61% - 10px);
  }
}