Bootstrap Snippet Gauge Meter Progress Bar/Indicator using HTML CSS Bootstrap jQuery

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <div class="col-xs-6 meter-container-inner">
                                  <center>
                                      <b>Facebook(FB)</b>
                                      <hr style="width: 75%; margin: 3px 0 10px;">
                                      <!-- long -->
                                      <input class="long-knob" value="39">
                                      <!-- short -->
                                        <div style="margin-top: -190px;">
                                            <input class="short-knob" value="61">
                                            <div class="meter-cover"></div>
                                            <div class="meter-digit">
                                                <div>SSI</div>
                                                <div style="font-size: 24px; margin-top: 9px;">-1.56</div>
                                            </div>
                                        </div>
                                        <div style="font-size: 12px;">
                                              <div style="margin-bottom: 8px;">
                                                  <div class="text-left meter-ind-buy bullish-color">Buy:<br>39%</div>
                                                  <div style="display: inline-block;" class="text-right bearish-color">Sell:<br>61%</div>
                                              </div>
                                              <span class="label label-bearish text-capitalize"><span class="hidden-sm hidden-md">Signal:·</span>bearish</span>
                                              <div style="margin-top: 8px;">
                                                  <span style="color: #a1a6a9;">% Chg. Over Interest:<br></span>
                                                  <span>1.1%</span>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
.meter-container-inner {
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding: 10px 0;
}
.meter-cover {
    width: 0;
    height: 0;
    border-left: 58px solid transparent;
    border-right: 54px solid transparent;
    border-bottom: 42px solid #fff;
    margin-top: -146px;
    margin-left: 0px;
    position: relative;
    padding: 0 20px;    
}
.meter-digit {
    text-align: center;
    margin-top: -64px;
    position: relative;    
}
.meter-ind-buy {
    display: inline-block;
    margin-right: 22px;    
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
<script>
$(document).ready(function() {
     $(".long-knob").knob({
                     'fgColor':"#56b4eb",
                     'bgColor':"#eaeaed",
                     'rotation':"anticlockwise",
                     'readOnly':true,
                     'displayInput':false,
                     'thickness': .16,
                     'width': 116,
                     'max': 300
                });
                $(".short-knob").knob({
                     'fgColor':"#fe6981",
                     'bgColor':"#eaeaed",
                     'rotation':"clockwise",
                     'readOnly':true,
                     'displayInput':false,
                     'thickness': .2,
                     'width': 88,
                     'max': 300
                });
})
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Knob/1.2.13/jquery.knob.min.js"></script>  
        
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Gauge Meter Progress Bar/Indicator"
Bootstrap 3.3.0 Snippet by Jimfeng

Related: See More

Questions / Comments:

"Gauge Meter Progress Bar/Indicator" Bootstrap 3.3.0 Snippet by Jimfeng

Related: See More

Questions / Comments:

"Gauge Meter Progress Bar/Indicator"
Bootstrap 3.3.0 Snippet by Jimfeng