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

<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>

1
2
3
4
5
6
7
8

<div class="center">
    <div class="circular-bar">
        <div class="circular-bar-chart" data-percent="75" data-plugin-options='{"barColor": "#e36159"}'>
            <strong>HTML/CSS</strong>
            <label>75%</label>
        </div>
    </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<div class="center">
    <h5 class="dark">Default</h5>
    <div class="divider">
        <em class="fa fa-chevron-down"></em>
    </div>
    <div class="divider">
        <em class="fa fa-star"></em>
    </div>
    <div class="divider">
        <em class="fa fa-bolt"></em>
    </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<div class="center">
    <h5 class="dark">Colored</h5>
    <div class="divider colored">
        <em class="fa fa-chevron-down"></em>
    </div>
    <div class="divider colored">
        <em class="fa fa-star"></em>
    </div>
    <div class="divider colored">
        <em class="fa fa-bolt"></em>
    </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<div class="center">
    <h5 class="dark">Dark</h5>
    <div class="divider dark">
        <em class="fa fa-chevron-down"></em>
    </div>
    <div class="divider dark">
        <em class="fa fa-star"></em>
    </div>
    <div class="divider dark">
        <em class="fa fa-bolt"></em>
    </div>
</div>