CSS3 Bar Chart Animation

by Jens Kühn

HTML

<div class="bar" style="width: 1%"></div>
<div class="bar" style="width: 80%"></div>
<div class="bar" style="width: 64%"></div>
<div class="bar" style="width: 97%"></div>

CSS

.bar {
    height: 24px;
    background: -webkit-gradient(linear, left top, left bottom, from(#ff7617), to(#ba550f));
    background-color: #ff7617;
    
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    
    -webkit-animation: progress-bar 2s;
    -moz-animation: progress-bar 2s;
    animation: progress-bar 2s;
}

@-webkit-keyframes progress-bar {
    0% { width: 0; }
}
@-moz-keyframes progress-bar {
    0% { width: 0; }
}
keyframes progress-bar {
    0% { width: 0; }
}