New Gmail Styled Progress Bar

LukyVj

• 18511
• 21
• 3

Gmail's new loading progress bar in CSS3 with animations. It's created using two divs (one for the outer border which actually acts as the container of the bar and another one for the bar itself). The first div is given a grey border while the bar is diagonal gradient to create the background pattern. To animate the bar's background, it's background-position is animated from 0 0 to -40px 0 using animation and keyframes properties.

This will look great in Firefox and Webkit based browsers only as Opera and IE doesn't support CSS3 animations yet. Take a look at the source code to understand what's happening.

Related:

• CSS Only Solar System Model
• Minions in pure CSS
• Multiple Box Shadows
• Clicking Game
• CSS3 Room