#loader-wrapper {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:1100;
}
#loader {
  display:block;
  position: relative;
  top:50%;
  left:50%;
  width:150px;
  height:150px;
  margin:-75px 0 0 -75px;
  border:3px solid transparent;
  border-top-color:green;
  border-radius:100%;
  -webkit-animation: spin 2s linear infinite;
          animation: spin 2s linear infinite;
  z-index:1101;
}
#loader:before {
  content:"";
  position: absolute;
  top:5px;
  left:5px;
  right:5px;
  bottom:5px;
  border:3px solid transparent;
  border-top-color: gray;
  border-radius:100%;
  -webkit-animation: spin 3s linear infinite;
          animation: spin 3s linear infinite;
}
#loader:after {
  content:"";
  position: absolute;
  top:12px;
  left:12px;
  right:12px;
  bottom:12px;
  border:3px solid transparent;
  border-top-color: #ff9100;
  border-radius:100%;
  -webkit-animation: spin 1.5s linear infinite;
          animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
  0%   { 
    -webkit-transform: rotate(0deg); 
      -ms-transform: rotate(0deg); 
          transform: rotate(0deg);
  }
  100% { 
    -webkit-transform: rotate(360deg); 
      -ms-transform: rotate(360deg); 
          transform: rotate(360deg);
  }
}
@keyframes spin {
  0%   { 
    -webkit-transform: rotate(0deg); 
      -ms-transform: rotate(0deg); 
          transform: rotate(0deg);
  }
  100% { 
    -webkit-transform: rotate(360deg); 
      -ms-transform: rotate(360deg); 
          transform: rotate(360deg);
  }
}

#loader-wrapper .loader-section {
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  
  background:rgb(255, 255, 255);
  width:100%;
  height:100%;
  z-index:1100;
}

#loader-wrapper .loader-section.section-left {
  left:0
}
#loader-wrapper .loader-section.section-right {
  right:0;
}

/* Loaded Styles */
.loaded #loader-wrapper .loader-section.section-left {
  transform: translateX(-100%);
  /* transition: all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000); */
}
.loaded #loader-wrapper .loader-section.section-right {
  transform: translateX(100%);
  /* transition: all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000); */
}
.loaded #loader {
  opacity: 0;
  /* transition: all 0.3s ease-out; */
}
.loaded #loader-wrapper {
  visibility: hidden;
  transform:translateY(-100%);
  /* transition: all 0.3s 1s ease-out; */
} 

#navbar{
  visibility:hidden;
}

.loaded #navbar{
  visibility:visible;
}