Ajax Loader
×
HTML
<p>Hover Bar</p>
1
<p>Hover Bar</p>
2
<div id="wrapper">
3
<div class="bar">
4
  <span class="cat6">60%</span>
5
  <span class="cat1">10%</span>
6
  <span class="cat3">30%</span>
7
</div>
8
</div>
9
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
 
CSS
body{
1
body{
2
  background:#0866c6;
3
}
4
.bar {border:1px solid;
5
    width: 570px;
6
    height: 20px;
7
    line-height: 160px;
8
    padding: .25em;
9
    background: rgba(255,255,255,0.35);
10
    margin: 8em auto;
11
    overflow: hidden;
12
  text-align:center;
13
  background:#eee;
14
  color:transparent;
15
}
16
p{
17
  font-family: 'RobotoRegular', 'Helvetica Neue', Helvetica, sans-serif;
18
  color:#fff;
19
  font-size:2.5em;
20
  text-align:center;
21
  position:absolute;
22
  left:50%;
23
  width:500px;
24
  margin-left:-250px;
25
  top:0;
26
}
27
.bar span {
28
    display: block;
29
    height: 100%;
30
    float: left;
31
    position: relative;
32
    -webkit-transition: width .2s ease;
33
    -moz-transition: width .4s ease;
34
    -o-transition: width .4s ease;
35
    transition: width .4s ease;
36
}
37
 
38
.bar span.cat6 {
39
    width: 0;
40
    background: #2361a1;
41
    z-index: 4;
42
}
43
 
44
.bar span.cat1 {
45
    width: 0;
46
    background: #37a0f3;
47
    z-index: 3;
48
    -webkit-transition: width .4s ease .4s;
49
    -moz-transition: width .4s ease .4s;
50
    -o-transition: width .4s ease .4s;
51
    transition: width .4s ease .4s;
52
}
53
 
54
.bar span.cat3 {
55
    width: 0;
56
    background: #58c779;
57
    z-index: 2;
58
    -webkit-transition: width .4s ease .8s;
59
    -moz-transition: width .4s ease .8s;
60
    -o-transition: width .4s ease .8s;
61
    transition: width .4s ease .8s;
62
}
63
 
64
.bar.active span.cat6 {
65
    width: 60%;
66
  color:#eee;
67
}
68
 
69
.bar.active span.cat1 {
70
    width: 10%;
71
  color:#eee;
72
}
73
 
74
.bar.active span.cat3 {
75
    width: 30%;
76
  color:#eee;
 
JavaScript
$(document).ready(function () {
1
$(document).ready(function () {
2
    // Declare Vars
3
    var blockLast = $('#wrapper');
4
    
5
    //Create an event, here its on "mouseover"
6
    blockLast.on('mouseover', function (e) {
7
        e.preventDefault();
8
        var elm = $('#wrapper .bar');
9
        elm.addClass('active');
10
    });
11
    blockLast.on('mouseleave', function (e) {
12
        e.preventDefault();
13
        var elm = $('#wrapper .bar');       
14
        elm.removeClass('active');
15
    });
16
});
 

Untitled

CSSDeck G+