.containerloader:not(.is-active) {
  display: none;
}

.containerloader.is-active:not(.is-left-to-right),
.containerloader.is-active:not(.is-right-to-left) {
 -webkit-transform:translateY(0);
 transform:translateY(0)
}
.containerloader.is-active.is-left-to-right,
.containerloader.is-active.is-right-to-left {
 -webkit-transform:translateX(0);
 transform:translateX(0)
}

.containerloader {
  background: #00d1b2;
  bottom: 0;
  left: 0;
  padding-top: 2em;
  position: absolute;
  right: 0;
  top: 0;
  transition: transform 0.35s ease-out,-webkit-transform 0.35s ease-out;
  will-change: transform;
  z-index: 999998;
}

.containerloader:after {
 -webkit-animation:loader-figure 1.15s cubic-bezier(.215,.61,.355,1) infinite;
 animation:loader-figure 1.15s cubic-bezier(.215,.61,.355,1) infinite;
 border:0 solid #fff;
 border-radius:100%;
 box-sizing:border-box;
 content:"";
 display:block;
 height:0;
 left:50%;
 position:absolute;
 top:50%;
 -webkit-transform:translate(-50%,-50%);
 transform:translate(-50%,-50%);
 width:0;
 z-index:9999
}

.containerloader .title {
 color:#fff;
 font-size:.875em;
 left:50%;
 letter-spacing:.1em;
 line-height:1.5em;
 margin:2em 0 0;
 position:absolute;
 top:50%;
 -webkit-transform:translateX(-50%);
 transform:translateX(-50%);
 white-space:nowrap
}

.loader-wrapper{
  position: relative;   
}

.loader-size-40-100{
  min-height: 40vh;
  min-width: 100%; 
}