<div class="container" id="badge">
  <a class="entypo-bell"></a>
</div>

@import url(http://weloveiconfonts.com/api/?family=entypo);

[class*="entypo-"]:before{font-family: 'entypo', sans-serif;font-size:50px;color:#555;}

html, body {height: 100%;}
body {align-items: center;display: flex;font-family: sans-serif;justify-content: center;}
.container{-webkit-perspective: 1000;-webkit-backface-visibility: hidden;}
.badge-num {
  box-sizing:border-box;
  font-family: 'Trebuchet MS', sans-serif;
  background: #ff0000;
  cursor:default;
  border-radius: 50%;
  color: #fff;
  font-weight:bold;
  font-size: 1rem;
  height: 2rem;
  letter-spacing:-.1rem;
  line-height:1.55;
  margin-top:-1rem;
  margin-left:.1rem;
  border:.2rem solid #fff;
  text-align: center;
  display:inline-block;
  width: 2rem;
  box-shadow: 1px 1px 5px rgba(0,0,0, .2);
  animation: pulse 1.5s 1;
}
.badge-num:after {
  content: '';
  position: absolute;
  top:-.1rem;
  left:-.1rem;
  border:2px solid rgba(255,0,0,.5);
  opacity:0;
  border-radius: 50%;
  width:100%;
  height:100%;
  animation: sonar 1.5s 1;
}
@keyframes sonar { 
  0% {transform: scale(.9); opacity:1;}
  100% {transform: scale(2);opacity: 0;}
}
@keyframes pulse {
  0% {transform: scale(1);}
  20% {transform: scale(1.4); } 
  50% {transform: scale(.9);} 
  80% {transform: scale(1.2);} 
  100% {transform: scale(1);}
}

(function(d){
  var i = 1;
  var badge = document.getElementById('badge');  
  var int = window.setInterval(function(){
    updateBadge(i++);
  }, 2000); //Update the badge ever 5 seconds
  var badgeNum;    
  function updateBadge(alertNum){//To rerun the animation the element must be re-added back to the DOM
    	var badgeChild = badge.children[0];
			if(badgeChild.className==='badge-num')
        		badge.removeChild(badge.children[0]);
    	
    	badgeNum = document.createElement('div'); 
      badgeNum.setAttribute('class','badge-num');
	   	badgeNum.innerText = alertNum;
    	var insertedElement = badge.insertBefore(badgeNum,badge.firstChild); 
  }
})(document);