DragonI/animated-bell-notification-badge.markdown

## animated-bell-notification-badge.markdown

      
    Raw
  

              animated-bell-notification-badge.markdown
            
          
    Animated Bell Notification Badge

CSS3 animated notification badge which animates on value change
Forked from sjmcpherso's Pen CSS animated notification badge.
Forked from sjmcpherso's Pen CSS animated notification badge.
A Pen by Alecia Vogel on CodePen.
License.

  
## index.html
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<div class="container" id="badge">
  <span id="badge-envelope" class="icon-hover"><i class="fa fa-bell"></i>
</div>

## script.js
(function(d){
  var i = 1;
  var badge = document.getElementById('badge');

  var int = window.setInterval(updateBadge, 2000); //Update the badge every 5 seconds
  var badgeNum;
  function updateBadge(){//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.innerHTML = i++;
    	var insertedElement = badge.insertBefore(badgeNum,badge.firstChild);
      console.log(badge.children[0]);
  }
})(document);

## style.less
html, body {
  height: 100%;
}
body {
  background: #0099FF;
  align-items: center;
  display: flex;
  font-family: sans-serif;
  justify-content: center;
  background-image: -webkit-radial-gradient(top, circle cover, #97d0e1, #0099FF 80%);
  background-image: -moz-radial-gradient(top, circle cover, #97d0e1, #0099FF 80%);
  background-image: -o-radial-gradient(top, circle cover, #97d0e1, #0099FF 80%);
  background-image: radial-gradient(top, circle cover, #97d0e1, #0099FF 80%);
}
.container {
  position:relative;
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;
}
.badge-num {
  box-sizing:border-box;
  font-family: 'Trebuchet MS', sans-serif;
  background: #0099FF;
  cursor:default;
  border-radius: 50%;
  color: #fff;
  font-weight:bold;
  font-size: 16px;
  height: 30px;
  line-height:1.55em;
  top:-9px;
  right:-11px;
  border:2px solid #fff;
  position: absolute;
  text-align: center;
  width: 30px;
  box-shadow: 1px 1px 5px rgba(0,0,0, .2);
  animation: pulse 1.5s 1;
}
.badge-num:after {
  content: '';
  position: absolute;
  top:-2px;
  left:-2px;
  border:2px solid rgba(0,155,243,.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);}
}
#badge-envelope :before {
  font-size:45px;
  text-decoration: none;
}
.icon-hover {
  color: fade(white, 40%);
  transition: color 500ms ease;
  cursor: pointer;

  &:hover {
    color: fade(white, 70%);
  }
}
	<head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
	</head>
	<div class="container" id="badge">
	<span id="badge-envelope" class="icon-hover"><i class="fa fa-bell"></i>
	</div>
	(function(d){
	var i = 1;
	var badge = document.getElementById('badge');

	var int = window.setInterval(updateBadge, 2000); //Update the badge every 5 seconds
	var badgeNum;
	function updateBadge(){//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.innerHTML = i++;
	var insertedElement = badge.insertBefore(badgeNum,badge.firstChild);
	console.log(badge.children[0]);
	}
	})(document);
	html, body {
	height: 100%;
	}
	body {
	background: #0099FF;
	align-items: center;
	display: flex;
	font-family: sans-serif;
	justify-content: center;
	background-image: -webkit-radial-gradient(top, circle cover, #97d0e1, #0099FF 80%);
	background-image: -moz-radial-gradient(top, circle cover, #97d0e1, #0099FF 80%);
	background-image: -o-radial-gradient(top, circle cover, #97d0e1, #0099FF 80%);
	background-image: radial-gradient(top, circle cover, #97d0e1, #0099FF 80%);
	}
	.container {
	position:relative;
	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
	}
	.badge-num {
	box-sizing:border-box;
	font-family: 'Trebuchet MS', sans-serif;
	background: #0099FF;
	cursor:default;
	border-radius: 50%;
	color: #fff;
	font-weight:bold;
	font-size: 16px;
	height: 30px;
	line-height:1.55em;
	top:-9px;
	right:-11px;
	border:2px solid #fff;
	position: absolute;
	text-align: center;
	width: 30px;
	box-shadow: 1px 1px 5px rgba(0,0,0, .2);
	animation: pulse 1.5s 1;
	}
	.badge-num:after {
	content: '';
	position: absolute;
	top:-2px;
	left:-2px;
	border:2px solid rgba(0,155,243,.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);}
	}
	#badge-envelope :before {
	font-size:45px;
	text-decoration: none;
	}
	.icon-hover {
	color: fade(white, 40%);
	transition: color 500ms ease;
	cursor: pointer;

	&:hover {
	color: fade(white, 70%);
	}
	}