Papermashup

Subscribe


Tweets


"Is there ever a time that @DFS doesn't have a sale on?"

@ashleyford 4 days ago

"RT @lalpra: Galaxy Note 7 Unboxing https://t.co/FM8gZmqpBK"

@ashleyford 6 days ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Papermashup

Build a simple animated progress bar with tooltip

CSS styled progress bar

AshleyAshley

First I started out in Photoshop and designed the basic progress bar, you can download the PSD file for the progress bar in the download file.

The Code

Below we have the two lines of code which read the attribute ‘title’ and animate the progress bar. We then activate the tooltip plugin using the tipsy plugin.



$("document").ready(function (){

// animate the progress barĀ on DOM ready
var percent = $('.progress_bar').attr('title');
$('.progress_bar').animate({width: percent},1000);

// activate tooltip
$('.tip').tipsy({gravity: 's',fade: true});

});

The HTML

Very simple. Just one line of code with two div elements. Both the tooltip and the animation javascript read the ‘title’ attribute.



The CSS



body{
padding:50px;
font-size:11px;
font-family:Arial, Helvetica, sans-serif;}

.progress_container{
padding:1px;
width:195px;
height:9px;
overflow:hidden;
background:url(progress_container.png);
}

.progress_bar{
height:9px;
width:0px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
background:url(progress_bar.png);
}

/*-----------------------------------------------------------------------------------*/
/*Tipsy Tooltip style
/*-----------------------------------------------------------------------------------*/

.tipsy { padding: 5px; font-size: 11px; position: absolute; z-index: 100000; }
.tipsy-inner { padding: 6px 8px 6px 8px; background-color: black; color: white; max-width: 200px; text-align: center; }
.tipsy-inner { border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px; }
.tipsy-arrow { position: absolute; background: url('tipsy.gif') no-repeat top left; width: 9px; height: 5px; }
.tipsy-n .tipsy-arrow { top: 0; left: 50%; margin-left: -4px; }
.tipsy-nw .tipsy-arrow { top: 0; left: 10px; }
.tipsy-ne .tipsy-arrow { top: 0; right: 10px; }
.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -4px; background-position: bottom left; }
.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; background-position: bottom left; }
.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; background-position: bottom left; }
.tipsy-e .tipsy-arrow { top: 50%; margin-top: -4px; right: 0; width: 5px; height: 9px; background-position: top right; }
.tipsy-w .tipsy-arrow { top: 50%; margin-top: -4px; left: 0; width: 5px; height: 9px; }

The result

It’s worth noting that this technique is only compatible with Firefox and Chrome browsers, and those that allow the border-radius css class.

download

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 2