Implement animation progress bar with CSS3

The new features of CSS3 have cleared the way for us to achieve a beautiful progress bar, and we can build it without any pictures or simple JavaScript code at all.

One, the first example

Effect Chart:

Demo Address: http://namepk.sinaapp.com/demo/progress.html.

1, the basic HTML

The HTML code is very simple:

<div id= "Loading-status" > <div id= "precent" ></div> </div>

Loading-status represents the outer container, precent represents the progress bar.

2, CSS Code

#loading-status {width:300px border:1px #669CB8 solid-webkit-box-shadow:0px 2px 2px #D0D4D6 height:15px-webkit- border-radius:10px; Background:-webkit-gradient (linear, 0 0, 0 100%, from (#E1E9EE), to (white)); padding:1px; }

We added borders, rounded corners, shadows, and gradient backgrounds to the outer container, as shown in the following illustration:

The CSS code for the progress bar is as follows:

#process {background:-webkit-gradient (linear, 0 0, 0 100%, from (#7BC3FF), Color-stop (0.5, #42A9FF), to (#7BC3FF); width: 0%; height:100%; -webkit-border-radius:10px; }

Change the width to 10% to see the effect:

3, animation

By controlling the percentage of width, you can control the display of the progress bar, animation with CSS3 animation or transition can be achieved, here we choose Animation:

#process {background:-webkit-gradient (linear, 0 0, 0 100%, from (#7BC3FF), Color-stop (0.5, #42A9FF), to (#7BC3FF); width: 0%; height:100%; -webkit-border-radius:10px; -webkit-transition:width 1s ease-in-out; }

Then we can use JavaScript to control the width of the precent element to achieve the animation effect of the progress bar:

Jquery: $ (' #precent '). Width (' 80% ') Javascript:document.getElementById (' precent '). Style.width = ' 80% '

Ii. Second Example

Let's implement a more complex progress bar:

Demo Address: http://namepk.sinaapp.com/demo/progress.html.

1, the basic HTML

<div class= "box animate" > <span> <span></span> </span> </div>

Altogether is three elements.

2, CSS style

. box {height:20px; position:relative; BACKGROUND:HSL (0, 0, 35%);-webkit-border-radius:15px; padding:6px Ox-shadow:inset 0-1px 1px rgba (255, 255, 255, 0.3); width:300px; }

The outer frame style looks like this:

. Box > span {display:block; height:100%;-webkit-border-top-right-radius:8px;-webkit-border-bottom-right-radius: 8px; -webkit-border-top-left-radius:15px; -webkit-border-bottom-left-radius:15px; Background-image:-webkit-gradient (linear, left bottom, left top, color-stop (0, #63DE4E), Color-stop (1, #34A702)); -webkit-box-shadow:inset 0 2px 9px rgba (255,255,255,0.3), inset 0-2px 6px Rgba (0,0,0,0.4); position:relative; Overflow:hidden; }

The basic progress bar style looks like this:

The style defined for the inner span is as follows, primarily by setting a gradient background.

. Animate > Span > Span {content: ""; Position:absolute; top:0; left:0; bottom:0; right:0; Background-image:-webkit-gradient (linear, 0 0, 100% 100%, Color-stop (. RGBA (255, 255, 255,. 2)), Color-stop (. Trans Parent), Color-stop (. 5, transparent), Color-stop (. 5, Rgba (255, 255, 255,. 2)), Color-stop (., Rgba (255, 255, 255,. 2)), C Olor-stop (.), transparent, to (transparent)); Z-index:2; -webkit-border-top-right-radius:8px; -webkit-border-bottom-right-radius:8px; -webkit-border-top-left-radius:20px; -webkit-border-bottom-left-radius:20px; Overflow:hidden; }

The style is as follows:

We also need to add an attribute:

-webkit-background-size:40px;

The effect is now as shown in the following illustration:

3, animation

Animation we achieve by changing background-position. The code is as follows:

. Animate > Span span {content: "; Position:absolute; top:0; left:0; bottom:0; right:0; Background-image:-webkit-gradient (linear, 0 0, 100% 100%, Color-stop (. RGBA (255, 255, 255,. 2)), Color-stop (. Trans Parent), Color-stop (. 5, transparent), Color-stop (. 5, Rgba (255, 255, 255,. 2)), Color-stop (., Rgba (255, 255, 255,. 2)), C Olor-stop (.), transparent, to (transparent)); Z-index:2; -webkit-background-size:40px; -webkit-animation:move 2s linear infinite; -webkit-border-top-right-radius:8px; -webkit-border-bottom-right-radius:8px; -webkit-border-top-left-radius:20px; -webkit-border-bottom-left-radius:20px; Overflow:hidden; } @-webkit-keyframes Move {0% {background-position:0 0;} 100% {background-position:50px 50px;}}

The final effect is as follows:

Written in the end: I acted as the author of a HTML5 book is planning and writing, we can look forward to, hehe.