Ajax Loader
×

New Gmail Styled Progress Bar

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:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    New Gmail Styled Progress Bar

    CSSDeck G+