signal-desktop/stylesheets/_hourglass.scss

@mixin hourglass($width, $height, $color) {
  display: inline-block;
  position: relative;
  vertical-align: text-bottom;
  @include color-svg('/images/hourglass_full.svg', transparent);
  background-size: 100%;

  &, .sand, &:before, &:after {
    width: $width;
    height: $height;
  }
  .sand, &:before, &:after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
  }
  .sand {
    background: $color;
    animation: moveDown linear;
    animation-fill-mode: forwards;
  }
  &:after {
    @include color-svg('/images/hourglass_empty.svg', $color);
  }
  @keyframes moveDown {
    to   {
      transform: translateY(100%);
    }
  }
}