Upload Button

by Manna

HTML

<em>Click on the button to simulate an upload.</em>
<a class="hide" href="javascript:void(0);">Reset</a>

<div class="upload">
    <p class="one">Upload</p>
    <p class="two hide"><progress max="100" value="0"></progress></p>
    <p class="three hide">Done</p>
</div>

CSS

body {
    background-color: #badef0;
}
em {
    color: #769ab0;
    font: italic 1.25em/1 Georgia, serif;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    text-shadow: 0 1px 0 hsla(0,0%,100%,.5);
    top: 70%;
    -webkit-transform: translateZ(0);
}
em:after {
    background-image: url('http://cl.ly/image/3f1o2h3A001j/Untitled-1.png');
    content: '';
    display: none;
}
a {
    background-color: hsla(0,0%,100%,.5);
    border-radius: 3px;
    box-shadow: 0 2px 0 hsla(0,0%,0%,.075);
    color: hsla(0,0%,0%,.4);
    display: block;
    font: bold .75em/1 'Lucida Grande', sans-serif;
    left: 50%;
    margin-left: -40px;
    padding: 8px 0;
    position: absolute;
    text-align: center;
    text-decoration: none;
    top: 80%;
    width: 80px;
    -webkit-transform: translateZ(0);
    -webkit-transition: .1s;
       -moz-transition: .1s;
            transition: .1s;
}
a:hover {
    background-color: hsla(0,0%,100%,.75);
    color: hsla(0,0%,0%,.6);
}
.upload {
    background-color: #a2b0b7;
    background-image: url('http://cl.ly/image/2z3p2D0X3S1h/Untitled-1.png');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border: 4px solid #fff;
    border-radius: 50px;
    box-shadow: inset 0 1px 0 hsla(0,0%,0%,.1),
                0 2px 0 hsla(0,0%,0%,.075);
    cursor: pointer;
    height: 40px;
    left: 50%;
    margin: -22px;
    position: absolute;
    top: 50%;
    width: 40px;
    -webkit-transition: .1s;
       -moz-transition: .1s;
            transition: .1s;
}
.upload:hover {
    background-color: #b8c5cc;
}
.upload p {
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 2px 0 hsla(0,0%,0%,.075);
    color: #676f73;
    font: bold 11px/20px 'Lucida Grande', sans-serif;
    height: 20px;
    left: -12px;
    position: absolute;
    right: -12px;
    text-align: center;
    text-transform: uppercase;
    top: -36px;
}
.upload p:after,
.upload p:before {
    bottom: -5px;
    border-left:...

JavaScript

var upload = $('.upload'),
    one = $('.one'),
    two = $('.two'),
    three = $('.three'),
    progress = two.find('progress'),
    reset = $('a');

upload.on('click', function() {
    
    var i = 0,
        load = setInterval( function() {
                   progress.attr('value', i);
                   i++;
               }, 25);
    
    $(this).addClass('load');
    two.fadeIn(100);
    one.fadeOut(100);
    
    setTimeout( function() {
        clearInterval(load);
    }, 2750);
    
    setTimeout( function() {
        upload.addClass('transition');
    }, 2750);
    
    setTimeout( function() {
        upload.addClass('done');
    }, 3000);
    
    setTimeout( function() {
        upload.addClass('finished');
        three.fadeIn(100);
        two.fadeOut(100);
    }, 3050);
    
    setTimeout( function() {
        reset.fadeIn(100);
    }, 3500);
    
});
    
reset.on('click', function() {
    
    upload.removeClass('load').removeClass('done').removeClass('transition').removeClass('finished');
    one.fadeIn(100);
    two.fadeOut(100);
    three.fadeOut(100);
    progress.attr('value', 0);
    $(this).fadeOut(100);
    
});