Battlefield 3 Loading Indicator

Battlefield-3-Loading-Indicator.markdown

Battlefield 3 Loading Indicator

Battlefield CSS3.

A Pen by Gareth Weaver on CodePen.

License.

index.html

<div class="wrap">
  <div class="bg">
    <div class="loading">
      <span class="title">loading</span>
      <span class="text">tehran highway</span>
    </div>
  </div>
</div>

style.scss

@import "compass/css3";
@import 'http://battlelog.battlefield.com/cdnprefix/local/public/base/fonts/purista/purista.css';

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content; 
  }
  @-moz-keyframes #{$name} {
    @content;
  }
}

@include keyframes(title) {
  0%   { opacity:0; right:130px; }
  48%  { opacity:0; right:130px; }
  52%  { opacity:1; right:30px; }
  70%  { opacity:1; right:30px; }
  100% { opacity:0; right:30px; }
}

@include keyframes(fade) {
  0%   { opacity:1; }
  100% { opacity:0; }
}

@include keyframes(bg) {
  0%   { background-color:#306f99; }
  50%  { background-color:#19470f; }
  90%  { background-color:#734a10; }
}

@include keyframes(blink) {
  0%    { opacity:0; }
  5%    { opacity:1; }
  10%   { opacity:0; }
  15%   { opacity:1; }
  20%   { opacity:0; }
  25%   { opacity:1; }
  30%   { opacity:0; }
  35%   { opacity:1; }
  40%   { opacity:0; right:-21px; }
  45%   { opacity:1; right:80px; }
  50%   { opacity:0; right:-21px; }
  51%   { right:-21px; }
  55%   { opacity:1; }
  60%   { opacity:0; }
  65%   { opacity:1; }
  70%   { opacity:0; }
  75%   { opacity:1; }
  80%   { opacity:0; }
  85%   { opacity:1; }
  90%   { opacity:0; right:-21px; }
  95%   { opacity:1; right:80px; }
  96%   { right:-21px; }
  100%  { opacity:0; right:-21px; }
}

$light:  #eaf7ff;
$shadow: #bce4ff;

body {
  font-family:Purista,sans-serif, arial;
  background:black;
  color:$light;
}
.wrap {
  position:absolute;
  top:50%; left:50%; 
  margin-left:-80px; margin-top:-40px;
}
.bg {
  padding:30px 30px 30px 0;
  background:#306f99;
  @include animation(bg 1.5s linear infinite);
  @include box-shadow(inset 0 0 45px 30px black);
}
.loading {
  position:relative;
  text-align:right;
  @include text-shadow(0 0 6px $shadow);
  height:20px; width:150px;
  span {
    display:block;
    text-transform:uppercase;
    position:absolute;
    right:30px;
    height:20px; width:200px;
    line-height:20px;
    &:after {
      content:"";
      display:block;
      position:absolute;
      top:-2px; right:-21px;
      height:20px; width:16px;
      background:$light; 
      @include box-shadow(0 0 15px $shadow);
      @include animation(blink 3.4s infinite); 
    }
    &.title {
      @include animation(title 3.4s linear infinite);
    }
    &.text {
      @include animation(title 3.4s linear 1.7s infinite);
      opacity:0;
    }
  }
}