CODEWITHSUNDEEP
jquerycss
Sergey
Sergey

Reputation: 77

Make a faux progress bar

Im trying to creating a faux progress bar in a modal box. Should keep the visitor at the modal box for 60 seconds and then disappear.

What would be the best way of approaching this?

I tried to illustrate what I want to happen with :hover. 

.progressbar{
    width:80%;
    height:16px;
    margin:0 auto 20px auto;
    padding:0px;

    background:#cfcfcf;
    border-width:1px;
    border-style:solid;
    border-color: #aaa #bbb #fff #bbb;    
    box-shadow:inset 0px 2px 3px #bbb;    
}

.progressbar,
.progressbar-inner{
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    -o-border-radius:4px;
}

.progressbar-inner{
    width:0%; /* Change to actual percentage */
    height:100%;
    background-size:18px 18px;
    background-color: #82ae40;    
    box-shadow:inset 0px 2px 8px rgba(255, 255, 255, .5), inset -1px -1px 0px rgba(0, 0, 0, .2);
}

.progressbar:hover .progressbar-inner{
    width:100%;   
    -webkit-transition: width 60s ease-in;  
    -moz-transition: width 60s ease-in; 
    -o-transition: width 60s ease-in; 
    transition: width 60s ease-in; 
}

.progressbar .progressbar-inner,
.progressbar:hover .progressbar-inner{
    -webkit-transition: width 60s ease-in;  
    -moz-transition: width 60s ease-in; 
    -o-transition: width 60s ease-in; 
    transition: width 60s ease-in; 
}

Upvotes: 2

Views: 455

Answers (1)

henryaaron
henryaaron

Reputation: 6192

You've pretty much done everything. Just change those transitions to animations and create the keyframes.

.progressbar .progressbar-inner,
.progressbar:hover .progressbar-inner{
-webkit-animation: width 60s ease-in;  
-moz-animation: width 60s ease-in; 
-o-animation: width 60s ease-in; 
animation: width 60s ease-in; 
}



@-webkit-keyframes width {
0% {width:0%;}
100% {width:100%;}
}
@-moz-keyframes width {
0% {width:0%;}
100% {width:100%;}
}
@-o-keyframes width {
0% {width:0%;}
100% {width:100%;}
}
@keyframes width {
0% {width:0%;}
100% {width:100%;}
}

Here, you're creating the animation that makes the progress bar grow, and styling it to the element with the animation declaration.

Some literature:
http://coding.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/
https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations

Compatibility Chart: http://caniuse.com/#feat=css-animation

Live demo: http://jsfiddle.net/szXxe/

To fade the element out upon completion, you'd have to make another animation for the parent element (the .progressbar) and make it a drop longer than the progress bar's animation with the fading rules. Like so:

.progressbar{
animation:fadeout 61s ease-in;
}



@keyframes fadeout {
0% {opacity:1;}
98% {opacity:1;}
100% {opacity:0;}
}

Live demo: http://jsfiddle.net/43nuU/

Upvotes: 1

Related Questions