CSS3 Animated Notifications

Completely CSS3 + jQuery notification messages Animated backgrounds only available in Webkit browsers. Diagonal background help from: http://leaverou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">
<h4>Click the buttons ;)!</h4>
<p>
    <a href="#" class="btn success">Save</a>
    <a href="#" class="btn info">Save</a>
    <a href="#" class="btn danger">Save</a>
    <a href="#" class="btn primary">Save</a>
</p>

<div id="aaaa" style="">
gffgfgfg
</div>

CSS

.btn.loading, #aaaa.loading{
    background-image: -webkit-gradient(linear, 0 0, 100% 100%,
        color-stop(.25, rgba(0, 0, 0, .10)), 
        color-stop(.25, transparent),
        color-stop(.5, transparent), 
        color-stop(.5, rgba(0, 0, 0, .10)),
        color-stop(.75, rgba(0, 0, 0, .10)), 
        color-stop(.75, transparent), 
        to(transparent));
    background-image: 
        -moz-linear-gradient(-45deg, 
            rgba(0, 0, 0, .10) 25%, 
            transparent 25%,
            transparent 50%, rgba(0, 0, 0, .10) 50%, 
            rgba(0, 0, 0, .10) 75%, 
            transparent 75%, transparent
        );
    background-size: 50px 50px;
    -moz-background-size: 50px 50px;
    -webkit-background-size: 50px 50px;
    -webkit-animation: animate-stripes 2s linear infinite;
}

@-webkit-keyframes animate-stripes {
    from {
        background-position: 0 0;
    } 
    to {
       background-position: -50px 0;
    }
}

JavaScript

$('.btn').click(function(){
    $('#aaaa').toggleClass('loading');
});