title: Logo being filled with water CSS Preloader
body: <p>I want to create a preloader from a logo which should appear as if logo is being filled with a liquid. I want to use pure CSS.</p>
  
  <p>While googling I found <a href="http://priteshgupta.com/2011/07/filling-a-glass-with-water-using-html5/" rel="nofollow">Filling a glass with Water</a>. But the problem with it is that it only fills in rectangle form. The logo is black/white. I have it in all formats PNG, JPEG, SVG. Here is the pictorial representation in sprites:</p>
  
  <p><a href="http://i.stack.imgur.com/WeF9r.png" rel="nofollow">http://i.stack.imgur.com/WeF9r.png</a></p>
  
  <p>Also it must have transparent background like PNG.</p>