<div class="wrapper">
  <aside>
      <h1>Experimental CSS hour glass loader</h1>
      <p>Animating peseudo elements</p>
  </aside>

  <div class="loader">
    <div class="timerWrap">
      <svg version="1.1" viewBox="131.623 175.5 120 160" preserveAspectRatio="xMinYMin meet" class="timer">
        <path fill="#FFFFFF" d="M212.922,255.45l36.855-64.492c1.742-3.069,1.742-6.836-0.037-9.896c-1.783-3.06-5.037-4.938-8.581-4.938
        h-99.158c-3.524,0-6.797,1.878-8.569,4.938c-1.773,3.06-1.792,6.827-0.03,9.896l36.846,64.491l-36.845,64.492
        c-1.762,3.068-1.743,6.836,0.03,9.896c1.772,3.061,5.044,4.938,8.569,4.938h99.158c3.544,0,6.798-1.878,8.581-4.938
        c1.779-3.06,1.779-6.827,0.037-9.896L212.922,255.45z M142.001,324.86l39.664-69.41l-39.664-69.41h99.158l-39.663,69.41
        l39.663,69.41H142.001z"/>
      </svg>
    </div>
  </div>
</div>
////////////////
// Stuff to make the page pretty

$blue: #3f6b9d;
$orange: #e08f24;
$white: #fefefe;
$black: #1a1a1a;

body{  
  background: #1a1a1a;
  font-family: sans-serif;
  text-align: center;
  overflow-y: scroll;
  color: $white;
}

a{
  text-decoration: none;
  &.link{
    color: $blue;
    -webkit-transition: all 150 ease 0s;  
    transition: all 150 ease 0s;  
    &:hover{
      color: $orange;
    }
  }
}

p{
  margin-bottom: 10px;
}

.wrapper{
  width: 800px;
  max-width: 100%;
  margin: 0 auto;
}

aside{
  float: left;
  width: 60%;
  margin: 60px 0 40px;
  h1{
    margin-bottom: 0px;
  }
  .sup{
    font-style: italic;
    color: #999;
    margin-top: 4px;
  }
}

/////////////////
// Loader styles

@mixin animation($params){
    animation: $params;
    -webkit-animation: $params; 
    -moz-animation: $params; 
    -ms-animation: $params; 
}

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

@include keyframes(timerRotate){
    0%{transform: rotateZ(0deg);}
    50%{transform: rotateZ(0deg);}
    100%{transform: rotateZ(-180deg);}
}

@include keyframes(bottomFill){
    0%{border-bottom-width: 0px;}
    50%{border-bottom-width: 60px;}
    100%{border-bottom-width: 60px;}
}

@include keyframes(topEmpty){
    0%{
        top: 19px; 
        border-top-width: 60px; 
        border-left-width: 35px; 
        border-right-width: 35px;
    }  
    50%{
        top: 80px; 
        border-top-width: 0px; 
        border-left-width: 0px; 
        border-right-width: 0px;
    }  
    100%{
        top: 80px; 
        border-top-width: 0px; 
        border-left-width: 0px; 
        border-right-width: 0px;
    }
}

.loader{
    width: 40%;
    height: 200px;    
    float: left;
    // Attempt to fix flicker
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
    -webkit-perspective: 1000;
    .timerWrap{
        position: relative;
        @include animation(timerRotate 1s infinite ease); 
        width: 120px;
        height: 160px; 
        margin: auto;
        top: 40px;
        &:before{
            content:"";
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 60px 35px 0 35px;
            border-color: $orange transparent transparent transparent;
            position: absolute;
            top: 19px;
            left: 0;
            right: 0;
            margin: auto;
            @include animation(topEmpty 1s infinite ease);
        }
        &:after{
            content:"";
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 35px 60px 35px;
            border-color: transparent transparent $orange transparent;
            position: absolute;
            bottom: 19px;
            left: 0;
            right: 0;
            margin: auto;
            @include animation(bottomFill 1s infinite ease);
        }
        .timer{        
            width: 120px;
            max-width: 100%;
            height: 160px; 
            position: relative;
            top: 0;
            left: 0; 
            path{
                fill: $blue;
            }
        } 
    }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.