 |
Google's 3D "Flipping-Circle" Loader as used in Gmail and other Google Products using pure CSS. |
|---|
- Download the google-loader-current.css (or use the chart below for your tweaked version) and host it on your webserver.
- Link the css file in the
<head>of your webpage, and use
<link rel="stylesheet" type="text/css" media="all" href="google-loader-current.css">- Add this html snippet where you would like to use your loader (see different snippet for "bleeding" version below):
<span class="gloader"><span></span><span></span></span>- The
gloaderinherits from the font-size of your container usingemunits, and is ofdisplay-inline-blockvariety, so it will obey text-align. For instance, if you wanted yourgloaderto be 24px in diameter and center aligned, you could put it in a.containerelement styled as:
.container { font-size:24px; text-align:center; }| Support | Link | Chrome | FireFox | IE | Safari | Opera | Example |
|---|---|---|---|---|---|---|---|
| Bleeding | google-loader-bleeding.css | 26 | 16 | 10 | 6.0 | 12.1 | jsFiddle |
| Current | google-loader-current.css | 4 | 16 | 10 | 4.0 | 12.1 | jsFiddle |
| Old | google-loader-old.css | 4 | 5 | 10 | 4.0 | 12.0 | jsFiddle |
Compatibility derived from caniuse.com. Not all mentioned browsers have been thoroughly tested.
The "bleeding" version of the google loader uses the smallest markup possible: a single element. It uses pseudo-elements to create the animations. Unfortunately, up until the last few Chrome and Safari releases pseudo-elements were not supported. If you only need to support webkit browsers' Chrome 26+ and Safari 6.0+, you should grab this version.
<head>
<link rel="stylesheet" type="text/css" media="all" href="google-loader-bleeding.css">
</head>
<body>
<span class="gloader"></span>
</body>The current version supports a wider range of browsers, but requires two elements be added as children to the. This is the widest support while still saving on CSS filesize. If you want to support current versions of browsers you should grab this version.
<head>
<link rel="stylesheet" type="text/css" media="all" href="google-loader-current.css">
</head>
<body>
<span class="gloader"><span></span><span></span></span>
</body>If you want to support Firefox 5.0-15.0 and Opera 12.0, you will need a bit more CSS, but your markup will remain the same. Note, FireFox 16 was released on October 9th, 2012 and Opera Jun 14, 2012 so if you require support for browsers older than these dates you should grab this version.
<head>
<link rel="stylesheet" type="text/css" media="all" href="google-loader-old.css">
</head>
<body>
<span class="gloader"><span></span><span></span></span>
</body>