The following links show a CSS3 animation in the center of the page which could be used when waiting for responses from Ajax requests or other time-sensitive actions.
The examples do not use images; they are generated using border, shadow and transparency effects which are rotated using CSS3 animations and transformations.
Each icon is a single HTML div. The CSS is provided within the page source. For the purposes of this demonstration, there are a few lines of JavaScript to show and hide the icons – this would not be necessary in your pages.
The animated icon works in the latest versions of Chrome, Safari and Firefox. It should also work in IE10 and future releases of Opera. IE9 and below display a static image.
For further information, please refer to the article How to Create a CSS3 Ajax Loading Icon Without Images…
This example code was developed by Craig Buckler of OptimalWorks.net for SitePoint.com.
Please this code as you wish. A link back to the article is appreciated.