Fill image in a div from center

Question

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

Answer 1

Try this code from my jsFiddle. Think this will help you and adds the functionality to you loading screen. The animation time and borders were added by me to test everything.

HTML:

    




Update

JS

$(document).ready(function(){
   $('#button').click(function(){
      var per = $('#input').val();

      var height = per;
      backgroundy = -176 + 176 * (per/100);
      margintop = 176 - 176 * (per/100);

      $('#jpreBar').stop().animate({
         'height': height + '%',
         'background-position-y': backgroundy + 'px',
         'margin-top': margintop + 'px'
      }, 5000, 'linear');
   });  
});

CSS

#jpreBar {
 border-radius:0%;
 -moz-border-radius:0%;
 -webkit-border-radius:0%;

 background-image: url("http://50.87.144.37/~projtest/team/design/yellowmedia/images/logo.jpg");
 background-repeat: no-repeat;
 background-position: 0px -176px;
 height: 0%;
 margin-top: 176px;

 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; 

 border: 0px solid black;
}

#outer{
 border: 0px solid black;
 height: 351px;
}