Exclamation Pulse

A pulsing exclamation icon to indicate an error

by IPWright83

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="test invalid">
    <div class="notification"></div>
</div>
<!--<i class="fa fa-exclamation-circle fa-2x"></i>-->

CSS

@-webkit-keyframes pulsate
{
      0%   {color: #FC1501;}
      50% {color: grey;}
      100% {color: #FC1501;}
}

.invalid .notification:before {
    position: relative;
    font-family: FontAwesome;
    top: 0px;
    left: 0px;
    color: #FC1501;
    font-size: 18px;
    content: "\f06a";
}

.fa-exclamation-circle{
   color: #FC1501;
    
}

/*.ink styles - the elements which will create the ripple effect. The size and position of these elements will be set by the JS code. Initially these elements will be scaled down to 0% and later animated to large fading circles on user click.*/
.ink {
	display: block; position: absolute;
	background: #555;
	border-radius: 100%;
	transform: scale(0);
}
/*animation effect*/
.ink.animate {animation: ripple 0.65s linear;}
@keyframes ripple {
	/*scale the element to 250% to safely cover the entire link and fade it out*/
	100% {opacity: 0; transform: scale(2.5);}
}

JavaScript

setInterval(function() {
       
    error = $(".invalid");
    parent = error.parent();
    
    if(parent.find(".ink").length == 0) {
       parent.prepend("<span class='ink'></span>");
    }
    
    var ink = parent.find(".ink");
    ink.removeClass("animate");
    
    //set size of .ink
	if(!ink.height() && !ink.width())
	{
        console.log(error.css("height"));
		//use parent's width or height whichever is larger for the diameter 
        // to make a circle which can cover the entire element.
		d = 10;//Math.max(error.outerWidth() / 2, error.outerHeight() / 2);
		ink.css({height: d, width: d});
	}
    
   	var x = 11;
	var y = 12;
    
    //set the position and add class .animate
	ink.css({top: y+'px', left: x+'px'}).addClass("animate");
    
}, 800);