.spinner-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #333;
    z-index: 999999;
    }

.logob,
.logot,
.logoal,
.logoar {
    position:absolute;
}

.logob {
    
    height:150px;
    width:150px;
    z-index:5;
}
.logot {
    
    height:26.1px;
    width:100.2px;
    bottom: 60px;
    left: 25px;
    opacity:0;
}
.logoal {
    
    height:67.3px;
    width:14.1px;
    bottom:43px;
    left:11px;
    transform: rotate(90deg);
    transform-origin: bottom right;
    opacity:0;
    z-index:4;
}
.logoar {
    
    height:67.3px;
    width:14.1px;
    bottom:43px;
    right:11px;
    transform: rotate(-90deg);
    transform-origin: bottom left;
    opacity:0;
    z-index:4;
}



@keyframes rotateCounterclockwise90 {
  from {
    transform: rotate(90deg);
    transform-origin: bottom right;
    opacity:0;
  }
  to {
    transform: rotate(0deg);
    transform-origin: bottom right;
    opacity:1;
  }
}

@keyframes rotateClockwise90 {
  from {
    transform: rotate(-90deg);
    transform-origin: bottom left;
    opacity:0;
  }
  to {
    transform: rotate(0deg);
    transform-origin: bottom left;
    opacity:1;
  }
}

@keyframes growHeight {
  from {
    height: 0;
    opacity:0;
  }
  to {
    height: 26.1px;
    opacity:1;
  }
}

.logoal {
  animation: rotateCounterclockwise90 0.3s ease-in-out 0.2s forwards;
}

.logoar {
  animation: rotateClockwise90 0.3s ease-in-out 0.2s forwards;
}

.logot {
  animation: growHeight 0.5s ease-in-out 0.3s forwards;
}