#loader {
  position: fixed;
  inset: 0;
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: opacity 0.4s ease;
}
#loader img {
    width: 200px;
    opacity: 0.8;
    position: absolute;
}
#loader img.bg_a {
    scale: 2.5;
    opacity: 0.1;
    animation: loadinganim 1s ease 0s infinite alternate forwards;
}
#loader img.bg_b {
    scale: 2.5;
    opacity: 0.1;
}
#loader.hidden {
  opacity: 0;
  pointer-events: none;
}
@keyframes loadinganim {
    0% { -webkit-transform: skewX(24deg); } 
    10% { -webkit-transform: skewX(-8deg); }
    20% { -webkit-transform: skewX(55deg); }
    30% { -webkit-transform: skewX(-90deg); }
    40% { -webkit-transform: skewX(29deg); }
    50% { -webkit-transform: skewX(-90deg); }
    60% { -webkit-transform: skewX(3deg); }
    70% { -webkit-transform: skewX(-2deg); }
    80% { -webkit-transform: skewX(1deg); }
    90% { -webkit-transform: skewX(10deg); }
    100% { -webkit-transform: skewX(0deg); }
}