Difference between revisions of "Template:Westminster UK2"

Line 805: Line 805:
 
   }
 
   }
 
}
 
}
 +
 +
 +
/***************************************************** LOADING TEXT ****************************************************/
 +
 +
 +
.start-screen {
 +
  display: -webkit-box;
 +
  display: -ms-flexbox;
 +
  display: flex;
 +
  -webkit-box-pack: center;
 +
      -ms-flex-pack: center;
 +
          justify-content: center;
 +
  -ms-flex-flow: nowrap column;
 +
      flex-flow: nowrap column;
 +
  -webkit-box-align: center;
 +
      -ms-flex-align: center;
 +
          align-items: center;
 +
  min-height: 100vh;
 +
}
 +
 +
.loading {
 +
  display: -webkit-box;
 +
  display: -ms-flexbox;
 +
  display: flex;
 +
  margin: 24px 0;
 +
}
 +
 +
.loading__element {
 +
  font: normal 100 2rem/1 Roboto;
 +
  letter-spacing: .5em;
 +
}
 +
 +
[class*="el"] {
 +
  -webkit-animation: bouncing 2s infinite ease;
 +
          animation: bouncing 2s infinite ease;
 +
}
 +
 +
.el1 {
 +
  -webkit-animation-delay: 0.1s;
 +
          animation-delay: 0.1s;
 +
}
 +
 +
.el2 {
 +
  -webkit-animation-delay: 0.2s;
 +
          animation-delay: 0.2s;
 +
}
 +
 +
.el3 {
 +
  -webkit-animation-delay: 0.3s;
 +
          animation-delay: 0.3s;
 +
}
 +
 +
.el4 {
 +
  -webkit-animation-delay: 0.4s;
 +
          animation-delay: 0.4s;
 +
}
 +
 +
.el5 {
 +
  -webkit-animation-delay: 0.5s;
 +
          animation-delay: 0.5s;
 +
}
 +
 +
.el6 {
 +
  -webkit-animation-delay: 0.6s;
 +
          animation-delay: 0.6s;
 +
}
 +
 +
.el7 {
 +
  -webkit-animation-delay: 0.7s;
 +
          animation-delay: 0.7s;
 +
}
 +
 +
.el8 {
 +
  -webkit-animation-delay: 0.8s;
 +
          animation-delay: 0.8s;
 +
}
 +
 +
.el9 {
 +
  -webkit-animation-delay: 0.9s;
 +
          animation-delay: 0.9s;
 +
}
 +
 +
@-webkit-keyframes bouncing {
 +
  0%, 100% {
 +
    -webkit-transform: scale3d(1, 1, 1);
 +
            transform: scale3d(1, 1, 1);
 +
  }
 +
  50% {
 +
    -webkit-transform: scale3d(0, 0, 1);
 +
            transform: scale3d(0, 0, 1);
 +
  }
 +
}
 +
 +
@keyframes bouncing {
 +
  0%, 100% {
 +
    -webkit-transform: scale3d(1, 1, 1);
 +
            transform: scale3d(1, 1, 1);
 +
  }
 +
  50% {
 +
    -webkit-transform: scale3d(0, 0, 1);
 +
            transform: scale3d(0, 0, 1);
 +
  }
 +
}
 +
  
 
/***************************************************** RESPONSIVE STYLING ****************************************************/
 
/***************************************************** RESPONSIVE STYLING ****************************************************/
Line 883: Line 987:
 
</section>
 
</section>
  
−
<div class="overlay"><div><h1>Loading...</h1></div></div>
+
<div class="overlay"><div>
 +
 
 +
<div class="start-screen">
 +
 
 +
  <div class="loading">
 +
    <div class="loading__element el1">B</div>
 +
    <div class="loading__element el2">U</div>
 +
    <div class="loading__element el3">I</div>
 +
    <div class="loading__element el4">L</div>
 +
    <div class="loading__element el5">D</div>
 +
    <div class="loading__element el6">E</div>
 +
    <div class="loading__element el7">R</div>
 +
  </div>
 +
 
 +
    <div class="loading">
 +
    <div class="loading__element el1">L</div>
 +
    <div class="loading__element el2">E</div>
 +
    <div class="loading__element el3">A</div>
 +
    <div class="loading__element el4">D</div>
 +
    <div class="loading__element el5">P</div>
 +
    <div class="loading__element el6">A</div>
 +
    <div class="loading__element el7">G</div>
 +
    <div class="loading__element el8">E</div>
 +
    <div class="loading__element el9">S</div>
 +
  </div>
 +
 
 +
</div>
 +
 
 +
</div></div>
  
 
<script>
 
<script>

Revision as of 21:26, 27 July 2017

BioBusters
B
U
I
L
D
E
R
L
E
A
D
P
A
G
E
S

TEST BIO BUSTERS