How to Use CSS Naming Rules Basic Styles Components
Elements
Button Input Radio&Checkbox On-off Select Datetimepicker Dropdown
Layout
Grid Form
Data Display
Tab Table Pagination Badge Process
Feedback
Dialog Message Tooltip PopConfirm Loader
Other
Breadcrumb SideNav
I18N

Process

Example

Basic


30%


    <div class="z-process-bar">
        <div class="z-process" style="width: 30%"></div>
    </div>

Size

Large
40%

Default
60%

Small

Mini 

    <div class="z-process-bar large">
        <div class="z-process" style="width: 40%">40%</div>
    </div>

    <div class="z-process-bar">
        <div class="z-process" style="width: 60%">60%</div>
    </div>

    <div class="z-process-bar small">
        <div class="z-process" style="width: 50%"></div>
    </div>

    <div class="z-process-bar mini">
        <div class="z-process" style="width: 70%"></div>
    </div>

Colors

40%

60%

50%

70%

50%

    <div class="z-process-bar green">
        <div class="z-process" style="width: 40%">40%</div>
    </div>

    <div class="z-process-bar red">
        <div class="z-process" style="width: 60%">60%</div>
    </div>

    <div class="z-process-bar teal">
        <div class="z-process" style="width: 50%">50%</div>
    </div>

    <div class="z-process-bar yellow">
        <div class="z-process" style="width: 70%">70%</div>
    </div>
    
    <div class="z-process-bar purple">
        <div class="z-process" style="width: 50%">50%</div>
    </div>