-3

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.

While googling I found Filling a glass with Water. 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:

https://i.stack.imgur.com/WeF9r.png

Also it must have transparent background like PNG.

halfer
  • 19,824
  • 17
  • 99
  • 186
vendettacbs
  • 159
  • 1
  • 9
  • To use your example as a starting point, you could do something like this: http://jsfiddle.net/FnPG5/1/ – Turnip Jun 04 '14 at 11:59

2 Answers2

2

Create a 'inverse cut out' of your logo and layer that on the top of the rectangle.

PeteAUK
  • 968
  • 6
  • 16
2

Without a clear understanding of what you're exactly wanting to achieve, this would be the easiest way to go about what you want based on an assumption:

  1. Save a PNG of your logo with the correct background-color and the letters of the logo cut-out (transparent).
  2. Create a container in your HTML page that has the simple 'filling' animation.
  3. Sit the PNG on top of the 'filling' container using absolute positioning.

Result: A 'filling' logo.

leaksterrr
  • 3,800
  • 7
  • 34
  • 65