SOURCE

<div class="wifi-symbol">
  <div class="wifi-circle first"></div>
  <div class="wifi-circle second"></div>
  <div class="wifi-circle third"></div>	
  <div class="wifi-circle fourth">
</div>

body {
  text-align: center;
  vertical-align: center;
  margin: 20px 10px 0;
  background-color: #31313B;
}

.wifi-symbol{
  display:none;
  
  $circleColor: #FFFFCC;
  $size: 150px;
  
  [foo], & {
    display:block;
    position:absolute;
    top: 50%;
    display:inline-block;
    width:$size;
    height:$size;
    margin-top: 0 - $size - $size*0.25;
    
    -ms-transform:rotate(-45deg) translate(-100px);
    -moz-transform:rotate(-45deg) translate(-100px);
    -o-transform:rotate(-45deg) translate(-100px);
    -webkit-transform:rotate(-45deg) translate(-100px);
     transform:rotate(-45deg) translate(-100px);
   }
  .wifi-circle {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    display:block;
    width:100%;
    height:100%;
    font-size:$size/7;
    position:absolute;
    bottom:0;
    left:0;
    border-color: $circleColor;
    border-style:solid;
    border-width:1em 1em 0 0 ;
    -webkit-border-radius:0 100% 0 0;
    border-radius:0 100% 0 0;
    
    opacity:0;
    -o-animation:wifianimation 3s infinite;
    -moz-animation:wifianimation 3s infinite;
    -webkit-animation:wifianimation 3s infinite;
    animation:wifianimation 3s infinite;
    
    &.first {
      -o-animation-delay:800ms;
      -moz-animation-delay:800ms;
      -webkit-animation-delay:800ms;
      animation-delay:800ms;
    }
    &.second {
      width:5em;
      height:5em;
      -o-animation-delay:400ms;
      -moz-animation-delay:400ms;
      -webkit-animation-delay:400ms;
      animation-delay:400ms;
    }
    &.third {
      width: 3em;
      height: 3em;
    }
    &.fourth {
      width: 1em;
      height: 1em;
      opacity: 1;
      background-color: $circleColor;
      -o-animation:none;
      -moz-animation:none;
      -webkit-animation:none;
      animation:none;
    }
  }
}


@-o-keyframes wifianimation 
{
  0% { opacity: 0.4 }
  5% { opactiy: 1 }
  6% { opactiy: 0.1 }
  100% { opactiy: 0.1; }
}
@-moz-keyframes wifianimation 
{
  0% { opacity: 0.4 }
  5% { opactiy: 1 }
  6% { opactiy: 0.1 }
  100% { opactiy: 0.1; }
}
@-webkit-keyframes wifianimation 
{
  0% { opacity: 0.4 }
  5% { opactiy: 1 }
  6% { opactiy: 0.1 }
  100% { opactiy: 0.1; }
}