Hit enter after type your search item

CSS transform for creating water wave loader with live demo

CSS transform property for creating a loader

In this tutorial, the transform property of CSS is used along with other properties for creating a loader for the web pages. You may use this for loading a complete web page or certain section or feature in a web site.

The transform CSS property can be used for creating 2D or 3D transformations to the specified elements like div. For example:

Where the webkit is used for the chrome, safari and opera browsers. The translate value is one of the supported value in transform property with 2D values. You may also use three values to define 3D transformation.

See the following section for live demos of using the transform property along with the complete code.

A demo of water wave loader by using transform property

In this demo, a pre-loader is created with the water wave effect. It shows the percentage of filling the “water” as it moves. Practically, it can be site or images etc. loaded where it is being used.

The example used transform property with translate value for 2D. Along with this, many other CSS properties are used like background, border-radius etc. Have a look:

CSS transform

See online demo and code

The CSS used in the example:


The markup:


The script:


Get the complete code and see the live demo by clicking the above links.


(Credit = ElaineXu)

This div height required for enabling the sticky sidebar