JSFiddle - React, Tailwind, and code Playground

by rwachtler

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<div class="container">
<h1>Alert</h1>

<div class="alert">
    <div id="message-progress"></div>
    <a class="close" data-dismiss="alert"><i class="icon-remove"></i></a>
    <strong>Attention!</strong> Bitch please!
</div>
</div>

CSS

.alert{
    position: relative;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}
#message-progress{
    height:2px;
    width:100%;
    background: #c09853;
    position: absolute;
    left: 0;
    top: 0;
}

JavaScript

var messageProgressID;
$(document).ready(function(){
  messageProgressID = setInterval(function(){
  	var element = $('#message-progress');
    console.log(element.width());
	if(element.width() > 0){
    	element.width(function(i,w){return w-1});
    } else{
        $('.alert').fadeOut("slow", function(){
        	$(this).remove();
        });
        clearInterval(messageProgressID);
    }
  }, 10);
});