Implement animation progress bar with CSS3

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.