Ajax Loader
HTML 
<center>
1
<center>
2
<div id="SkillBox">
3
        <center><p>My Skills</p></center>
4
        <img src="http://2.bp.blogspot.com/--aPlnH6X1YA/UEf7yeJ3gGI/AAAAAAAATgw/TgMK9IVzipk/s1600/Skills%2B-%2BPawan%2BMall.png" alt="Skill - Pawan Mall" />
5
  <div class="SkillBar">
6
    <div id="Skill-HTML">
7
      <span class="Skill-Area ">HTML</span>
8
      <span class="PercentText ">100%</span>
9
    </div>
10
  </div>
11
12
  <div class="SkillBar">
13
    <div id="Skill-CSS">
14
      <span class="Skill-Area ">CSS/CSS3</span>
15
      <span class="PercentText ">70%</span>
16
    </div>
17
  </div>
18
 
19
  <div class="SkillBar">
20
    <div id="Skill-jQuery">
21
      <span class="Skill-Area ">jQuery</span>
22
      <span class="PercentText ">40%</span>
23
    </div>
24
  </div>
25
26
  <div class="SkillBar">
27
    <div id="Skill-JS">
28
      <span class="Skill-Area ">Javascript</span>
29
      <span class="PercentText ">65%</span>
30
    </div>
31
  </div>
32
33
  <div class="SkillBar">
34
    <div id="Skill-XML">
35
      <span class="Skill-Area ">XML </span>
36
      <span class="PercentText ">40%</span>
37
    </div>
38
  </div>
39
40
    <div class="SkillBar">
41
    <div id="Skill-C">
42
      <span class="Skill-Area ">C</span>
43
      <span class="PercentText ">30%</span>
44
    </div>
45
  </div>
46
47
    <div class="SkillBar">
48
    <div id="Skill-JAVA">
49
      <span class="Skill-Area ">JAVA </span>
50
      <span class="PercentText ">25%</span>
51
    </div>
52
  </div>
53
54
    <div class="SkillBar">
55
    <div id="Skill-PHP">
56
      <span class="Skill-Area ">PHP </span>
57
      <span class="PercentText ">50%</span>
58
    </div>
59
  </div>
60
61
    <div class="SkillBar">
62
    <div id="Skill-SQL">
63
      <span class="Skill-Area ">SQL </span>
64
      <span class="PercentText ">80%</span>
65
    </div>
66
  </div>
67
68
    <div class="SkillBar">
69
    <div id="Skill-VBNET">
70
      <span class="Skill-Area ">VB.NET</span>
71
      <span class="PercentText ">35%</span>
72
    </div>
73
  </div>
74
75
</div>
76
</center>
 
CSS 
/*
1
/*
2
// Responsive My Skills Box Widget
3
// Made with ❤ by @Pawan_Mall
4
// http://www.pawanmall.net
5
*/
6
 
7
body { background: #E9E5E2;margin:2%; }
8
 
9
#SkillBox {
10
    font-size: 20px;
11
    font-family: 'Indie Flower', cursive;
12
    width: 95%;
13
    height: auto;
14
    margin: 40px auto;
15
    background-color: #fff;
16
    //border: 1px solid #cdcdcd;
17
    padding: 10px;
18
    border-radius:20px;
19
    -o-border-radius:20px;
20
    -webkit-border-radius:20px;
21
    -ms-border-radius:20px;
22
    -moz-border-radius:20px;
23
}
24
#SkillBox img {
25
    width: 20%;
26
    height: 10%;
27
    margin: auto 35%;
28
    padding: 10px;
29
}
30
.SkillBar {
31
    width: 90%;
32
    height: 50px;
33
    position: relative;
34
    background: rgba(17, 17, 17, .3);
35
    margin: 20px auto;
36
}
37
#Skill-HTML {
38
    width: 100%;
39
    animation: Animate-HTML 4s;
40
    -webkit-animation: Animate-HTML 4s;
41
    -moz-animation: Animate-HTML 4s;
42
    -o-animation: Animate-HTML 4s;
43
    height: 50px;
44
    position: absolute;
45
    background-color: #ea8564;
46
}
47
@keyframes Animate-HTML {
48
    from {
49
    width: 10px;
50
}
51
to {
52
    width: 100%}
53
}@-webkit-keyframes Animate-HTML {
54
    from {
55
    width: 10px;
56
}
57
to {
58
    width: 100%}
59
}@-moz-keyframes Animate-HTML {
60
    from {
61
    width: 10px;
62
}
63
to {
64
    width: 100%}
65
}@-o-keyframes Animate-HTML {
66
    from {
67
    width: 10px;
68
}
69
to {
70
    width: 100%}
71
}#Skill-CSS {
72
    animation: Animate-CSS 5s;
73
    -webkit-animation: Animate-CSS 5s;
74
    -moz-animation: Animate-CSS 5s;
75
    -o-animation: Animate-CSS 5s;
76
    width: 70%;
77
    height: 50px;
78
    position: absolute;
79
    background-color: #55a69f;
80
}
81
@keyframes Animate-CSS {
82
    from {
83
    width: 10px;
84
}
85
to {
86
    width: 70%}
87
}@-webkit-keyframes Animate-CSS {
88
    from {
89
    width: 10px;
90
}
91
to {
92
    width: 70%}
93
}@-moz-keyframes Animate-CSS {
94
    from {
95
    width: 10px;
96
}
97
to {
98
    width: 70%}
99
}@-o-keyframes Animate-CSS {
100
    from {
101
    width: 10px;
102
}
103
to {
104
    width: 70%}
105
}#Skill-jQuery {
106
    animation: Animate-jQuery 5s;
107
    -webkit-animation: Animate-jQuery 5s;
108
    -moz-animation: Animate-jQuery 5s;
109
    -o-animation: Animate-jQuery 5s;
110
    width: 40%;
111
    height: 50px;
112
    position: absolute;
113
    background-color: #99856d;
114
}
115
@keyframes Animate-jQuery {
116
    from {
117
    width: 10px;
118
}
119
to {
120
    width: 40%}
121
}@-webkit-keyframes Animate-jQuery {
122
    from {
123
    width: 10px;
124
}
125
to {
126
    width: 40%}
127
}@-moz-keyframes Animate-jQuery {
128
    from {
129
    width: 10px;
130
}
131
to {
132
    width: 40%}
133
}@-o-keyframes Animate-jQuery {
134
    from {
135
    width: 10px;
136
}
137
to {
138
    width: 40%}
139
}#Skill-JS {
140
    animation: Animate-JS 4s;
141
    -webkit-animation: Animate-JS 4s;
142
    -moz-animation: Animate-JS 4s;
143
    -o-animation: Animate-JS 4s;
144
    width: 65%;
145
    height: 50px;
146
    position: absolute;
147
    background-color: #c44e45;
148
}
149
@keyframes Animate-JS {
150
    from {
151
    width: 10px;
152
}
153
to {
154
    width: 65%}
155
}@-webkit-keyframes Animate-JS {
156
    from {
157
    width: 10px;
158
}
159
to {
160
    width: 65%}
161
}@-moz-keyframes Animate-JS {
162
    from {
163
    width: 10px;
164
}
165
to {
166
    width: 65%}
167
}@-o-keyframes Animate-JS {
168
    from {
169
    width: 10px;
170
}
171
to {
172
    width: 65%}
173
}#Skill-XML {
174
    animation: Animate-XML 4s;
175
    -webkit-animation: Animate-XML 4s;
176
    -moz-animation: Animate-XML 4s;
177
    -o-animation: Animate-XML 4s;
178
    width: 40%;
179
    height: 50px;
180
    position: absolute;
181
    background-color: #5aa669;
182
}
183
@keyframes Animate-XML {
184
    from {
185
    width: 10px;
186
}
187
to {
188
    width: 40%}
189
}@-webkit-keyframes Animate-XML {
190
    from {
191
    width: 10px;
192
}
193
to {
194
    width: 40%}
195
}@-moz-keyframes Animate-XML {
196
    from {
197
    width: 10px;
198
}
199
to {
200
    width: 40%}
201
}@-o-keyframes Animate-XML {
202
    from {
203
    width: 10px;
204
}
205
to {
206
    width: 40%}
207
}#Skill-C {
208
    animation: Animate-C 4s;
209
    -webkit-animation: Animate-C 4s;
210
    -moz-animation: Animate-C 4s;
211
    -o-animation: Animate-C 4s;
212
    width: 30%;
213
    height: 50px;
214
    position: absolute;
215
    background-color: #970cc1;
216
}
217
@keyframes Animate-C {
218
    from {
219
    width: 10px;
220
}
221
to {
222
    width: 30%}
223
}@-webkit-keyframes Animate-C {
224
    from {
225
    width: 10px;
226
}
227
to {
228
    width: 30%}
229
}@-moz-keyframes Animate-C {
230
    from {
231
    width: 10px;
232
}
233
to {
234
    width: 30%}
235
}@-o-keyframes Animate-C {
236
    from {
237
    width: 10px;
238
}
239
to {
240
    width: 30%}
241
}#Skill-JAVA {
242
    animation: Animate-JAVA 4s;
243
    -webkit-animation: Animate-JAVA 4s;
244
    -moz-animation: Animate-JAVA 4s;
245
    -o-animation: Animate-JAVA 4s;
246
    width: 25%;
247
    height: 50px;
248
    position: absolute;
249
    background-color: #8e930c;
250
}
251
@keyframes Animate-JAVA {
252
    from {
253
    width: 10px;
254
}
255
to {
256
    width: 25%}
257
}@-webkit-keyframes Animate-JAVA {
258
    from {
259
    width: 10px;
260
}
261
to {
262
    width: 25%}
263
}@-moz-keyframes Animate-JAVA {
264
    from {
265
    width: 10px;
266
}
267
to {
268
    width: 25%}
269
}@-o-keyframes Animate-JAVA {
270
    from {
271
    width: 10px;
272
}
273
to {
274
    width: 25%}
275
}#Skill-PHP {
276
    animation: Animate-PHP 4s;
277
    -webkit-animation: Animate-PHP 4s;
278
    -moz-animation: Animate-PHP 4s;
279
    -o-animation: Animate-PHP 4s;
280
    width: 50%;
281
    height: 50px;
282
    position: absolute;
283
    background-color: #5A69A6;
284
}
285
@keyframes Animate-PHP {
286
    from {
287
    width: 10px;
288
}
289
to {
290
    width: 50%}
291
}@-webkit-keyframes Animate-PHP {
292
    from {
293
    width: 10px;
294
}
295
to {
296
    width: 50%}
297
}@-moz-keyframes Animate-PHP {
298
    from {
299
    width: 10px;
300
}
301
to {
302
    width: 50%}
303
}@-o-keyframes Animate-PHP {
304
    from {
305
    width: 10px;
306
}
307
to {
308
    width: 50%}
309
}#Skill-SQL {
310
    animation: Animate-SQL 4s;
311
    -webkit-animation: Animate-SQL 4s;
312
    -moz-animation: Animate-SQL 4s;
313
    -o-animation: Animate-SQL 4s;
314
    width: 80%;
315
    height: 50px;
316
    position: absolute;
317
    background-color: #23b1db;
318
}
319
@keyframes Animate-SQL {
320
    from {
321
    width: 10px;
322
}
323
to {
324
    width: 80%}
325
}@-webkit-keyframes Animate-SQL {
326
    from {
327
    width: 10px;
328
}
329
to {
330
    width: 80%}
331
}@-moz-keyframes Animate-SQL {
332
    from {
333
    width: 10px;
334
}
335
to {
336
    width: 80%}
337
}@-o-keyframes Animate-SQL {
338
    from {
339
    width: 10px;
340
}
341
to {
342
    width: 80%}
343
}#Skill-VBNET {
344
    animation: Animate-VBNET 4s;
345
    -webkit-animation: Animate-VBNET 4s;
346
    -moz-animation: Animate-VBNET 4s;
347
    -o-animation: Animate-VBNET 4s;
348
    width: 35%;
349
    height: 50px;
350
    position: absolute;
351
    background-color: #f8a51e;
352
}
353
@keyframes Animate-VBNET {
354
    from {
355
    width: 10px;
356
}
357
to {
358
    width: 35%}
359
}@-webkit-keyframes Animate-VBNET {
360
    from {
361
    width: 10px;
362
}
363
to {
364
    width: 35%}
365
}@-moz-keyframes Animate-VBNET {
366
    from {
367
    width: 10px;
368
}
369
to {
370
    width: 35%}
371
}@-o-keyframes Animate-VBNET {
372
    from {
373
    width: 10px;
374
}
375
to {
376
    width: 35%}
377
}.Skill-Area {
378
    z-index: 1;
379
    float: left;
380
    //position: absolute;
381
    margin-top: 15px;
382
    margin-left: 15px;
383
    text-shadow: none;
384
    color: #fff;
385
    //font-family: Lato-Regular, sans-serif;
386
    font-size: 18px;
387
}
388
.PercentText {
389
    z-index: 3;
390
    position: relative;
391
    padding-right: 15px;
392
    margin-top: 15px;
393
    float: right;
394
    text-shadow: none;
395
    color: #fff;
396
    //font-family: Lato-Regular, sans-serif;
397
    font-size: 18px;
398
}
 

Animated Responsive Skills Bar

CSSDeck G+