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

<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 class="progress">
    <div class="progress-bar progress-bar-success" style="width: 40%;">
        <span class="sr-only">40% Complete (success)</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" style="width: 20%;">
        <span class="sr-only">20% Complete</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" style="width: 60%;">
        <span class="sr-only">60% Complete (warning)</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" style="width: 80%;">
        <span class="sr-only">80% Complete</span>
    </div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-info" style="width: 40%;">
        <span class="sr-only">40% Complete (info)</span>
    </div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar" style="width: 45%;">
        <span class="sr-only">45% Complete</span>
    </div>
</div>