Ajax Loader
HTML 
<html>
1
<html>
2
<head>
3
<title>Progress Bar Demo | Codelator</title>
4
</head>
5
<body>
6
 
7
<!-- Simple Progress Bars STARTS -->
8
<h3>Simple Progress Bars</h3>
9
<div class="container">
10
<div class="red progressbar" style="width:20%"></div>
11
</div>
12
 
13
<div class="container">
14
<div class="blue progressbar" style="width:40%"></div>
15
</div>
16
 
17
<div class="container">
18
<div class="yellow progressbar" style="width:60%"></div>
19
</div>
20
 
21
<div class="container">
22
<div class="green progressbar"  style="width:80%"></div>
23
</div>
24
 
25
<div class="container">
26
<div class="orange progressbar"  style="width:100%"></div>
27
</div>
28
<!-- Simple Progress Bars ENDS -->
29
<br />
30
<!-- Animated Progress Bars STARTS -->
31
<h3>Animated Progress Bars</h3>
32
<div class="container striped active">
33
<div class="progressbar red" style="width:33.33%"></div>
34
</div>
35
 
36
<div class="container striped active">
37
<div class="progressbar blue" style="width: 66.66%"></div>
38
</div>
39
<!-- Animated Progress Bars ENDS -->
40
<br />
41
<!-- Multicolored Progress Bars STARTS -->
42
<h3>Multicolored Progress Bars</h4>
43
<div class="container">
44
<div class="orange progressbar"  style="width:25%"></div>
45
<div class="red progressbar" style="width:30%"></div>
46
<div class="yellow progressbar" style="width:45%"></div>
47
</div>
48
 
49
<div class="container">
50
<div class="blue progressbar"  style="width:10%"></div>
51
<div class="green progressbar" style="width:50%"></div>
52
<div class="red progressbar" style="width:40%"></div>
53
</div>
54
<!-- Multicolored Progress Bars STARTS -->
55
<br />
56
<!-- Striped Progress Bars STARTS -->
57
<h3>Striped Progress Bar</h3>
58
<div class="container striped">
59
<div class="red progressbar" style="width:80%"></div>
60
</div>
61
 
62
<div class="container striped">
63
<div class="progressbar green" style="width:40%"></div>
64
</div>
65
<!-- Striped Progress Bars ENDS -->
66
<br />
67
<!-- Striped Progress Bars STARTS -->
68
<h3>Gradient Progress Bar</h3>
69
<div class="container gradient">
70
<div class="yellow progressbar" style="width:25%"></div>
71
</div>
72
 
73
<div class="container gradient">
74
<div class="progressbar blue" style="width:75%"></div>
75
</div>
76
<!-- Striped Progress Bars ENDS -->
77
<br />
78
<h6>&copy; Codelator.com, All rights reserved.</h6>
79
</body>
80
</html>
 
CSS 
body{
1
body{
2
  background-color:#444;
3
  width:50%;
4
  margin:50px auto;
5
  color:#fff
6
}
7
h3,h6{
8
  text-align:center;
9
  font-family:Tahoma, Geneva, sans-serif
10
}
11
12
/* Code for Animation STARTS */
13
@-webkit-keyframes bars{
14
  from{
15
      background-position:40px 0
16
    }
17
    to
18
    {
19
      background-position:0 0
20
    }
21
}
22
 
23
@keyframes bars{
24
  from{
25
      background-position:40px 0
26
    }
27
    to
28
    {
29
      background-position:0 0
30
    }
31
}
32
/* Code for Animation ENDS */
33
34
35
/* Container for Progress Bar STARTS */
36
.container{
37
  background-color:#F1F1F1;
38
  border-radius:10px;
39
  height:15px;
40
  overflow:hidden;
41
  margin-bottom:15px;
42
}
43
/* Container for Progress Bar ENDS */
44
 
45
 
46
/* Progress Bar STARTS */
47
.progressbar{
48
  height:100%;
49
  width:0%;
50
  float:left;
51
52
}
53
/* Progress Bar ENDS */
54
 
55
/* Colors STARTS*/
56
.red{background-color:#C33}
57
.blue{background-color:#09F}
58
.green{background-color:#6F0}
59
.yellow{background-color:#FC0}
60
.orange{background-color:#F60}
61
/* Colors ENDS*/
62
 
63
.container.active .progressbar{
64
  -webkit-animation:bars 5s linear infinite;
65
  animation:bars 5s linear infinite;
66
}
67
.striped .progressbar{
68
  background-size:40px 40px;
69
  background-image:linear-gradient(135deg, #fff 50%, transparent 50%, transparent 50%, #fff 50%, rgba(255,255,255) 50%, transparent 50%, transparent);
70
  background-image:-webkit-linear-gradient(135deg, #fff 50%, transparent 50%, transparent 50%, #fff 50%,#fff 50%, transparent 50%, transparent);
71
}
72
.striped .red{
73
  background-image:-webkit-linear-gradient(90deg, #F33 25%, transparent 25%, transparent 50%, #F33 50%, #F33 75%, transparent 75%, transparent);
74
  background-image:linear-gradient(90deg, #F33 25%, transparent 25%, transparent 50%, #F33 50%, #F33 75%, transparent 75%, transparent);
75
}
76
.striped .blue{
77
  background-image:-webkit-linear-gradient(135deg, #0CF 25%, transparent 25%, transparent 50%, #0CF 50%, #0CF 75%, transparent 75%, transparent);
78
  background-image:linear-gradient(135deg, #0CF 25%, transparent 25%, transparent 50%, #0CF 50%, #0CF 75%, transparent 75%, transparent);
79
}
80
.striped .green{
81
  background-image:-webkit-linear-gradient(135deg, #6C0 25%, transparent 25%, transparent 50%, #6C0 50%, #6C0 75%, transparent 75%, transparent);
82
  background-image:linear-gradient(135deg, #6C0 25%, transparent 25%, transparent 50%, #6C0 50%, #6C0 75%, transparent 75%, transparent);
83
}
84
.gradient .yellow{
85
  background-image:-webkit-linear-gradient(#FC6,#FF6);
86
  background-image:linear-gradient(#FC6,#FF6);
87
}
88
.gradient .blue{
89
  background-image:-webkit-linear-gradient(#06F,#0CF);
90
  background-image:linear-gradient(#06F,#0CF);
91
}
 

Progress Bar in CSS for your website

CSSDeck G+