[[?[[S80:debug]]::true::<!-- begin source/theme/rfl/page/include/loader.html -->::]]
<div class="loader-container">
  <div class="loader-holder">
    <p>Loading</p>
    <div class="loader"></div>
  </div>
</div>

<style type="text/css">
.loader-container {
  background: #fff;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 10000;
}

.loader {
  margin: 30px auto;
  font-size: 1rem;
  position: relative;
  text-indent: -9999em;
  display: inline-block;
  border-top: 1rem solid rgba(112,43,176,.2);
  border-right: 1rem solid #702bb0;
  border-bottom: 1rem solid rgba(112,43,176,.2);
  border-left: 1rem solid rgba(112,43,176,.2);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
  border-radius: 50%;
  width: 10rem;
  height: 10rem;
}

.loader:after {
  border-radius: 50%;
  width: 10rem;
  height: 10rem;
}

.loader-holder {
  width: 100%;
  height: 60%;
  margin: 0 auto 2rem auto;
  text-align: center;
  overflow: hidden;
  -webkit-align-items: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column-reverse;
  -webkit-flex-direction: column-reverse;
}

.loader-holder p {
  font-size: 1.4em;
  text-align: center;
}

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
</style>
[[?[[S80:debug]]::true::<!-- end source/theme/rfl/page/include/loader.html -->::]]