eliace/ergo-js

.loadable {
  position: relative;

  &.loading > .loader {
    display: block;
  }
}


.loader {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(255,255,255,0.8);
  display: none;
}


.loader.inverted {
  background-color: rgba(0,0,0,0.8);
}




.loader .icon {
  color: #fff;
  left: 50%;
  margin-left: -24px;
  margin-top: -24px;
  position: relative;
  top: 50%; 
}







.loader-text {
//  color: #fff;
  font-size: 1rem;
  margin-left: -100%;
  margin-right: -100%;
  padding-top: 32px;
  text-align: center;
}





.loader > .spinner {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);

  &:before, &:after {
    top: 0;
    margin-top: 0;
  }

}




.loader.inverted {

  > .spinner {
    &:not(:required):before {
      border-top-color: #fff;
    }
    &:after {
      border-color: #555;
    }
  }

  .loader-text {
    color: #fff;
  }
}