Search
Menu
  1. Welcome
Search

About Our Company

Call Centers 24x7® is a premier US-based customer service and tech support call center, also offering fulfillment services, software and customization of software including hosted CRM and phone systems. Based in Port Angeles, Washington State. Since 2002.

Get in touch

Follow Us

Shortcodes

Progress Bars Shortcodes

Check out all the progress bars options.

Default

60% Complete
60%
0%

HTML Shortcode 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<div class="row">
    <div class="col-md-4">
        <div class="progress">
            <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                <span class="sr-only">60% Complete</span>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="progress">
            <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                60%
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="progress">
            <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
                0%
            </div>
        </div>
    </div>
</div>

Contextual classes

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)

HTML Shortcode 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
 
<div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
        <span class="sr-only">40% Complete (success)</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
        <span class="sr-only">20% Complete</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        <span class="sr-only">60% Complete (warning)</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
        <span class="sr-only">80% Complete (danger)</span>
    </div>
</div>

Striped

40% Complete (success)

Animated

45% Complete

HTML Shortcode 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
 
<div class="row">
    <div class="col-md-6">
        <h4>Striped</h4>
        <div class="progress">
            <div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
                <span class="sr-only">40% Complete (success)</span>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <h4>Animated</h4>
        <div class="progress">
            <div class="progress-bar progress-bar-primary progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%;">
                <span class="sr-only">45% Complete</span>
            </div>
        </div>
    </div>
</div>

Border Radius

60% Complete
60% Complete
60% Complete

HTML Shortcode 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<div class="row">
    <div class="col-md-4">
        <div class="progress progress-no-border-radius">
            <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                <span class="sr-only">60% Complete</span>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="progress progress-border-radius">
            <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                <span class="sr-only">60% Complete</span>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="progress">
            <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                <span class="sr-only">60% Complete</span>
            </div>
        </div>
    </div>
</div>

Sizes

60% Complete
60% Complete
60% Complete

HTML Shortcode 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<div class="row">
    <div class="col-md-4">
        <div class="progress progress-sm">
            <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                <span class="sr-only">60% Complete</span>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="progress">
            <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                <span class="sr-only">60% Complete</span>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="progress progress-lg">
            <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                <span class="sr-only">60% Complete</span>
            </div>
        </div>
    </div>
</div>

Animated & Tooltips

HTML/CSS
100%
Design
85%
WordPress
75%
Photoshop
85%

Colors

Primary
50%
Secondary
70%
Tertiary
75%
Quaternary
40%

HTML Shortcode 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 
<div class="row">
    <div class="col-md-6">
        <h4>Animated &amp; Tooltips</h4>
        <div class="progress-bars">
            <div class="progress-label">
                <span>HTML/CSS</span>
            </div>
            <div class="progress">
                <div class="progress-bar progress-bar-primary" data-appear-progress-animation="100%">
                    <span class="progress-bar-tooltip">100%</span>
                </div>
            </div>
            <div class="progress-label">
                <span>Design</span>
            </div>
            <div class="progress">
                <div class="progress-bar progress-bar-primary" data-appear-progress-animation="85%" data-appear-animation-delay="300">
                    <span class="progress-bar-tooltip">85%</span>
                </div>
            </div>
            <div class="progress-label">
                <span>WordPress</span>
            </div>
            <div class="progress">
                <div class="progress-bar progress-bar-primary" data-appear-progress-animation="75%" data-appear-animation-delay="600">
                    <span class="progress-bar-tooltip">75%</span>
                </div>
            </div>
            <div class="progress-label">
                <span>Photoshop</span>
            </div>
            <div class="progress">
                <div class="progress-bar progress-bar-primary" data-appear-progress-animation="85%" data-appear-animation-delay="900">
                    <span class="progress-bar-tooltip">85%</span>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <h4>Colors</h4>
        <div class="progress-bars">
            <div class="progress-label">
                <span>Primary</span>
            </div>
            <div class="progress">
                <div class="progress-bar progress-bar-primary" data-appear-progress-animation="50%">
                    <span class="progress-bar-tooltip">50%</span>
                </div>
            </div>
            <div class="progress-label">
                <span>Secondary</span>
            </div>
            <div class="progress">
                <div class="progress-bar progress-bar-secondary" data-appear-progress-animation="70%" data-appear-animation-delay="300">
                    <span class="progress-bar-tooltip">70%</span>
                </div>
            </div>
            <div class="progress-label">
                <span>Tertiary</span>
            </div>
            <div class="progress">
                <div class="progress-bar progress-bar-tertiary" data-appear-progress-animation="75%" data-appear-animation-delay="600">
                    <span class="progress-bar-tooltip">75%</span>
                </div>
            </div>
            <div class="progress-label">
                <span>Quaternary</span>
            </div>
            <div class="progress">
                <div class="progress-bar progress-bar-quaternary" data-appear-progress-animation="40%" data-appear-animation-delay="900">
                    <span class="progress-bar-tooltip">40%</span>
                </div>
            </div>
        </div>
    </div>
</div>

Circular

HTML/CSS
HTML/CSS

HTML Shortcode 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<div class="row">
    <div class="col-md-4">
        <div class="circular-bar">
            <div class="circular-bar-chart" data-percent="75" data-plugin-options="{'barColor': '#0088CC'}">
                <strong>HTML/CSS</strong>
                <label>75%</label>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="circular-bar only-icon">
            <div class="circular-bar-chart" data-percent="55" data-plugin-options="{'barColor': '#0088CC'}">
                <em class="fa fa-star"></em>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="circular-bar single-line">
            <div class="circular-bar-chart" data-percent="58" data-plugin-options="{'barColor': '#333'}">
                <strong>HTML/CSS</strong>
            </div>
        </div>
    </div>
</div>

Sizes

HTML/CSS
HTML/CSS

HTML Shortcode 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<div class="row">
    <div class="col-md-4">
        <div class="circular-bar circular-bar-sm">
            <div class="circular-bar-chart" data-percent="75" data-plugin-options="{'size': 85, 'lineWidth': 3, 'barColor': '#0088CC'}">
                <label>75%</label>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="circular-bar">
            <div class="circular-bar-chart" data-percent="75" data-plugin-options="{'barColor': '#0088CC'}">
                <strong>HTML/CSS</strong>
                <label>75%</label>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="circular-bar circular-bar-lg">
            <div class="circular-bar-chart" data-percent="75" data-plugin-options="{'size': 250, 'barColor': '#0088CC'}">
                <strong>HTML/CSS</strong>
                <label>75%</label>
            </div>
        </div>
    </div>
</div>

Options

HTML/CSS
HTML/CSS
HTML/CSS

HTML Shortcode 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<div class="row">
    <div class="col-md-4">
        <div class="circular-bar">
            <div class="circular-bar-chart" data-percent="75" data-plugin-options="{'size': 175, 'lineWidth': 3, 'barColor': '#0088CC', 'trackColor': '#CCC'}">
                <strong>HTML/CSS</strong>
                <label>75%</label>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="circular-bar">
            <div class="circular-bar-chart" data-percent="75" data-plugin-options="{'size': 175, 'lineWidth': 10, 'lineCap': 'square','barColor': '#0088CC'}">
                <strong>HTML/CSS</strong>
                <label>75%</label>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="circular-bar">
            <div class="circular-bar-chart" data-percent="75" data-plugin-options="{'size': 175, 'lineWidth': 15, 'lineCap': 'square', 'scaleColor': '#999', 'barColor': '#0088CC'}">
                <strong>HTML/CSS</strong>
                <label>75%</label>
            </div>
        </div>
    </div>
</div>
Copyright 2026 by Call Centers 24x7 Terms Of Use Privacy Statement
Back To Top