/* Add this to your html body File
    <div id="pageLoader" class="loader hidden">
      <div class="revolve-animation"></div>
    </div>
 */
.hidden {
	display: none !important;
} 

.page-loader {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	z-index: 99999;
	text-align: center;
	width: 100%;
	height: 100vh;
	background-color: rgba(208, 208, 208, 0.25);
	overflow: hidden;
}
#loadingText {
  font-size: 1rem;
  color: #444;
}

.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loader-icon {
  font-size: 48px;
  margin-bottom: 20px;
}

/* HTML: <div class="animation-window"></div> */
.animation-window {
    height: 60px;
    aspect-ratio: 1;
    --c:no-repeat linear-gradient(#fff 0 0);
    background: var(--c), var(--c), var(--c), var(--c);
    background-size: 33.4% 33.4%;
    animation: l7 1.5s infinite linear;
  }
  @keyframes l7 {
    0%,
    5%   {background-position:0 0,50% 0,0 50%,50% 50%}
    25%  {background-position:0 0,100% 0,0 100%,50% 50%}
    50%  {background-position:50% 0,100% 0,0 100%,0 50%}
    75%  {background-position:50% 0,100% 50%,0 100%,0 0}
    95%,
    100% {background-position:50% 0,50% 50%,0 50%,0 0} 
  }

/* HTML: <div class="three-d-block"></div> */
.three-d-block {
    --s: 25px;
    --g :5px;  
    
    width: calc(3*(1.353*var(--s) + var(--g)));
    display: grid;
    justify-items: end;
    aspect-ratio: 3;
    overflow: hidden;
    --_m: linear-gradient(90deg,#0000,#000 15px calc(100% - 15px),#0000);
    -webkit-mask: var(--_m);
            mask: var(--_m);
  }
  .three-d-block:before { 
    content: "";
    width: 200%;
    background:
      linear-gradient(90deg,#222 50%,#0000 0),
      conic-gradient(from -90deg at var(--s) calc(0.353*var(--s)),
        #fff 135deg,#666 0 270deg,#aaa 0); 
    background-blend-mode: multiply;
    --_m:
      linear-gradient(to bottom right,
         #0000 calc(0.25*var(--s)),#000 0 calc(100% - calc(0.25*var(--s)) - 1.414*var(--g)),#0000 0),
      conic-gradient(from -90deg at right var(--g) bottom var(--g),#000 90deg,#0000 0);
    -webkit-mask: var(--_m);
            mask: var(--_m);
    background-size:   calc(100%/3) 100%, calc(100%/6) 100%;
    -webkit-mask-size: calc(100%/6) 100%;
            mask-size: calc(100%/6) 100%;
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
    animation: l10 1s infinite linear;
  }
  @keyframes l10 {
    to {transform:translate(calc(100%/3))}
  }

/*  Three flat parallelogram  <div class="parallelogram-animation"></div> */
.parallelogram-animation {
    position: relative;
    width:  100px;
    height: 100px;
    background: #2c7be5;
    transform: rotateX(65deg) rotate(45deg);
    /* remove bellows command for perspective change */
    /* transform: perspective(200px) rotateX(65deg) rotate(45deg);  */
    color: #444;
    animation: layers1 1s linear infinite alternate;
}

.parallelogram-animation:after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    animation: layerTr 1s linear infinite alternate;
}

@keyframes layers1 {
    0% { box-shadow: 0px 0px 0 0px  }
   90% , 100% { box-shadow: 20px 20px 0 -4px  }
}
@keyframes layerTr {
    0% { transform:  translate(0, 0) scale(1) }
    100% {  transform: translate(-25px, -25px) scale(1) }
}
    
/* revolve-animation */
.revolve-animation {
  transform: rotateZ(45deg);
  perspective: 1000px;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  color: #ff2828;
}

.revolve-animation:before,
.revolve-animation:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    border-radius: 50%;
    transform: rotateX(70deg);
    animation: 1s spin linear infinite;
}
.revolve-animation:after {
    color: #111;
    transform: rotateY(70deg);
    animation-delay: .4s;
}

@keyframes rotate {
    0% {
      transform: translate(-50%, -50%) rotateZ(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotateZ(360deg);
    }
}

@keyframes rotateccw {
    0% {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotate(-360deg);
    }
}

@keyframes spin {
    0%,
    100% {
      box-shadow: .2em 0px 0 0px currentcolor;
    }
    12% {
      box-shadow: .2em .2em 0 0 currentcolor;
    }
    25% {
      box-shadow: 0 .2em 0 0px currentcolor;
    }
    37% {
      box-shadow: -.2em .2em 0 0 currentcolor;
    }
    50% {
      box-shadow: -.2em 0 0 0 currentcolor;
    }
    62% {
      box-shadow: -.2em -.2em 0 0 currentcolor;
    }
    75% {
      box-shadow: 0px -.2em 0 0 currentcolor;
    }
    87% {
      box-shadow: .2em -.2em 0 0 currentcolor;
    }
}

/* swing-square-animation <div class="swing-square-animation"></div> */
.swing-square-animation {
    width: 16px;
    height: 16px;
    box-shadow: 0 30px, 0 -30px;
    border-radius: 4px;
    background: currentColor;
    display: block;
    margin: -50px auto 0;
    position: relative;
    color: #FFF;
    transform: translateY(30px);
    box-sizing: border-box;
    animation: animloader 2s ease infinite;
  }
  .swing-square-animation::after,
  .swing-square-animation::before {
    content: '';  
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    box-shadow: 0 30px, 0 -30px;
    border-radius: 4px;
    background: currentColor;
    color: #FFF;
    position: absolute;
    left: 30px;
    top: 0;
    animation: animloader 2s 0.2s ease infinite;
  }
  .swing-square-animation::before {
    animation-delay: 0.4s;
    left: 60px;
  }
  
  @keyframes animloader {
    0% {
      top: 0;
      color: #000;
    }
    50% {
      top: 30px;
      color: rgba(52, 46, 46, 0.2);
    }
    100% {
      top: 0;
      color: #000;
    }
  }