Fill colour in a div from center

Fill colour in a div from center

While the entire page is loading; the yellow circle needs to start with 1
thin line from center and will 'form/fill' the entire circle.
I have used the jPreloader. I am not sure how to start loading the logo
from center. Currently, the height is being animated as the page loads.
Javascript where the height is being assigned to the div.
$(jBar).stop().animate({
height: per + '%'
}, 500, 'linear');
CSS where the logo is placed:
#jpreBar {
border-radius:0%;
-moz-border-radius:0%;
-webkit-border-radius:0%;
background: url(../images/logo.jpg) left top no-repeat;
animation: progress 2s linear infinite;
-moz-animation: progress 2s linear infinite;
-webkit-animation: progress 2s linear infinite;
-ms-animation: progress 2s linear infinite;
-o-animation: progress 2s linear infinite;
}
The animation needs to be like this, left to right:

Project link:
http://50.87.144.37/~projtest/team/design/yellowmedia/