Web page Progress bar design: fully compatible and adaptive progress bar

Article Introduction: Web page Progress bar design: fully compatible and adaptive progress bar.

Before we do this, we need to know basic information:

• Do you want to load statically? Is
• How many states are there? (three basic states: default, Current, completed)
• Do you use JS program to implement state changes? Whether
• Frequency of Use? High
• How often is the update? Low

After understanding these basic information, we also need to focus on:

1. The integrity of the effect
2. Advantages of performance
3. Portability and reuse of code
4. Compatibility
5. Easy to maintain
6. Easy to expand

These conditions help us to make something more excellent.

Let's take a look at our previous practice :

This practice uses a background image.

• The integrity of the effect (the effect is well demonstrated)
• Advantages of performance (using the UL,LI structure, simple structure, clear code, picture size of about 2K, performance is quite superior)
• Code portability and reuse (a mess ah, when the steps or the young can not use this picture, you need to do a picture)
• Compatibility (this structure, compatibility is quite good, no browser will be a problem)
• Easy to maintain (when modifying internal text, quite handy when adding or decreasing steps is, sorry, Pit dad again)
• Easy to expand (pure picture to do, basically do not have much extensibility)

Is it possible to make a fully compatible and adaptive progress bar?

The answer is yes, after many failures, finally found the solution-table.

To Demo>>

HTML code:

CSS code:

three basic states: default, Current, completed, on the TD tag are the corresponding. except the first step does not add <div class= "tri" > Sharp angle Label, the other steps inside uniformity touch same.

• The integrity of the effect (the effect is also well demonstrated)
• The advantages of the performance (using the structure of the table and nested inside, slightly more complex than the UL,LI structure, the picture size is less than 1k, overall performance is quite good. ）
• Code portability and reuse (when more or fewer steps, you can add TD, to meet arbitrary requirements, applicable to any place)
• Compatibility (compatible with IE6 and other browsers is required)
• Easy maintenance (very easy to maintain)
• Easy to expand (highly scalable)

The advantage of this approach is its scalability and ease of maintainability, the same effect, the different implementations, its maintainability, scalability, and so on are not the same.