Ajax Loader
HTML
<div class='icons'>
1
<div class='icons'>
2
  <div><div class='play'></div></div>
3
  <div><div class='stop'></div></div>
4
  <div><div class='pause'></div></div>
5
  <div><div class='back'></div></div>
6
  <div><div class='next'></div></div>
7
  <div><div class='stripes'></div></div>
8
  <div><div class='arrowup'></div></div>
9
  <div><div class='arrowdown'></div></div>
10
  <div><div class='arrowright'></div></div>
11
  <div><div class='arrowleft'></div></div>
12
  <div><div class='clock'></div></div>
13
  <div><div class='points'></div></div>
14
  <div><div class='video'></div></div>
15
  <div><div class='cloud'></div></div>
16
  <div><div class='comment'></div></div>
17
  <div><div class='comment2'></div></div>
18
  <div><div class='heart'></div></div>
19
  <div><div class='yes'></div></div>
20
  <div><div class='no'></div></div>
21
  <div><div class='search'></div></div>
22
  <div><div class='wheels'></div></div>
23
  <div><div class='share'></div></div>
24
  <div><div class='marker'></div></div>
25
  <div><div class='cam'></div></div>
26
  <div><div class='calendar'></div></div>
27
  <div><div class='link'></div></div>
28
  <div><div class='doc'></div></div>
29
  <div><div class='macbook'></div></div>
30
  <div><div class='akku'></div></div>
31
  <div><div class='phone'></div></div>
32
  <div><div class='iphone'></div></div>
33
  <div><div class='mail'></div></div>
34
  <div><div class='trash'></div></div>
35
  <div><div class='upload'></div></div>
36
  <div><div class='download'></div></div>
37
  <div><div class='profil'></div></div>
38
  <div><div class='key'></div></div>
39
  <div><div class="box"></div></div>
40
  <div><div class='youtube'></div></div>
41
  <div><div class='browser'></div></div>
42
  <div><div class='lan'></div></div>
43
  <div><div class='tv'></div></div>
44
  <div><div class='left'></div></div>
45
  <div><div class='top'></div></div>
46
  <div><div class='down'></div></div>
47
  <div><div class='right'></div></div>
48
  <div><div class='reg'></div></div>
49
  <div><div class='eye'></div></div>
50
</div>
51
 
 
CSS
@icon: #9a937a;
1
@icon: #9a937a;
2
@iconbg: #393536;
3
body {
4
  background: @iconbg;
5
}
6
:before, :after{
7
  display: block;
8
  content: "";
9
  position: absolute;
10
}
11
 
12
.icons {
13
  top: 50%;
14
  left: 50%;
15
  position: absolute;
16
  margin: -240px 0 0 -180px;
17
  width: 360px;
18
}
19
.icons > div {
20
  display: inline-block;
21
  float: left;
22
  width: 50px;
23
  height: 50px;
24
  margin: 5px;
25
  /*box-shadow: inset 0px 0px 0px 1px #ccc*/
26
}
27
 
28
.play, .stop, .pause, .back, .next, .arrowdown, .arrowup, .arrowleft, .arrowright, .stripes {
29
  width: 24px;
30
  height: 24px;
31
  border-radius: 50%;
32
  margin: 0 auto;
33
  margin-top: 11px;
34
  border: 2px solid @icon;
35
}
36
 
37
.play:before {
38
  border-top: 6px solid transparent;
39
  border-bottom: 6px solid transparent;
40
  border-left: 10px solid @icon;
41
  margin: 6px 0 0 8px;
42
}
43
 
44
.stop:before {
45
  background: @icon;
46
  margin: 7px;
47
  width: 10px;
48
  height: 10px;
49
}
50
 
51
.pause:before {
52
  background: @icon;
53
  margin: 7px 2px 0px 7px;
54
  width: 4px;
55
  height: 10px;
56
}
57
.pause:after {
58
  background: @icon;
59
  margin: 7px 2px 0px 13px;
60
  width: 4px;
61
  height: 10px;
62
}
63
 
64
.back:before {
65
  border-top: 6px solid transparent;
66
  border-bottom: 6px solid transparent;
67
  border-right: 7px solid @icon;
68
  margin: 6px 0 0 4px;
69
}
70
.back:after {
71
  border-top: 6px solid transparent;
72
  border-bottom: 6px solid transparent;
73
  border-right: 7px solid @icon;
74
  margin: 6px 0 0 10px;
75
}
76
 
77
.next:before {
78
  border-top: 6px solid transparent;
79
  border-bottom: 6px solid transparent;
80
  border-left: 7px solid @icon;
81
  margin: 6px 0 0 7px;
82
}
83
.next:after {
84
  border-top: 6px solid transparent;
85
  border-bottom: 6px solid transparent;
86
  border-left: 7px solid @icon;
87
  margin: 6px 0 0 13px;
88
}
89
 
90
.cloud {
91
  background: @icon;
92
  height: 10px;
93
  border-radius: 5px;
94
  width: 24px;
95
  float: left;
96
  margin: 24px 0 0 12px;
97
}
98
.cloud:before {
99
  background: @icon;
100
  height: 8px;
101
  border-radius: 50%;
102
  width: 8px;
103
  margin: -4px 0 0 3px;
104
}
105
.cloud:after {
106
  background: @icon;
107
  height: 12px;
108
  border-radius: 50%;
109
  width: 12px;
110
  margin: -7px 0 0 9px;
111
}
112
 
113
.search {
114
  border: 3px solid @icon;
115
  height: 8px;
116
  border-radius: 50%;
117
  width: 8px;
118
  float: left;
119
  margin: 17px 0px 0px 18px;
120
}
121
.search:after {
122
  background: @icon;
123
  transform: rotate(45deg);
124
  height: 4px;
125
  border-radius: 2px;
126
  width: 6px;
127
  margin: 8px 0px 0px 7px;
128
}
129
 
130
.comment {
131
  width: 20px;
132
  height: 14px;
133
  background: @icon;
134
  border-radius: 3px;
135
  float: left;
136
  margin: 17px 0px 0px 15px;
137
}
138
.comment:before {
139
  margin: 5px 0px 0px 5px;
140
  width: 6px;
141
  height: 6px;
142
  border-bottom: 6px solid transparent;
143
  border-left: 6px solid @icon;
144
}
145
.comment2 {
146
  width: 20px;
147
  height: 16px;
148
  background: @icon;
149
  border-radius: 50%;
150
  float: left;
151
  margin: 16px 0px 0px 15px;
152
}
153
.comment2:before {
154
  margin: 6px 0px 0px 4px;
155
  width: 6px;
156
  height: 6px;
157
  border-bottom: 6px solid transparent;
158
  border-left: 6px solid @icon;
159
}
160
 
161
.comment2:after {
162
  margin: 7px 0px 0px 5px;
163
  width: 2px;
164
  height: 2px;
165
  border-radius: 50%;
166
  background: @iconbg;
167
  box-shadow: 4px 0px 0px @iconbg,8px 0px 0px @iconbg;
168
}
169
 
170
.yes {
171
  float: left;
172
  margin: 23px 0px 0px 19px;
173
  transform: rotate(135deg);
174
  width: 16px;
175
  height: 4px;
176
  background: @icon;
177
}
178
.yes:after {
179
  width: 4px;
180
  height: 6px;
181
  background: @icon;
182
  margin: 3px 0px 0px 12px;
183
}
184
 
185
.no {
186
  float: left;
187
  margin: 23px 0px 0px 16px;
188
  transform: rotate(45deg);
189
  width: 18px;
190
  height: 4px;
191
  background: @icon;
192
}
193
.no:after {
194
  transform: rotate(90deg);
195
  width: 18px;
196
  height: 4px;
197
  background: @icon;
198
}
199
 
200
.heart {
201
  transform: rotate(45deg);
202
  width: 15px;
203
  height: 10px;
204
  background: @icon;
205
  border-radius: 10px 0px 0px 10px;
206
  margin: 20px 0 0 16px;
207
}
208
.heart:after {
209
  position: absolute;
210
  width: 10px;
211
  height: 10px;
212
  background: @icon;
213
  border-radius: 50%;
214
  margin: -5px 0 0 5px;
215
}
216
 
217
.wheels {
218
  width: 16px;
219
  height: 16px;
220
  border: 1px dashed @icon;
221
  border-radius: 50%;
222
  box-shadow: inset 0 0 0 3px @icon;
223
  margin: 16px 0 0 15px;
224
}
225
 
226
.share {
227
  width: 8px;
228
  height: 8px;
229
  border: solid 2px @icon;
230
  border-right: solid 1px transparent;
231
  border-top: solid 1px transparent;
232
  transform: rotate(45deg);
233
  margin: 20px 0 0 21px;
234
}
235
.share:before {
236
  width: 6px;
237
  height: 6px;
238
  margin: 6px 0 0 -4px;
239
  background: @icon;
240
  border-radius: 50%;
241
  box-shadow: 10px 0px 0 @icon, 0px -10px 0 @icon;
242
}
243
 
244
.marker {
245
  width: 16px;
246
  height: 16px;
247
  border-radius: 50% 50% 50% 0;
248
  background: @icon;
249
  transform: rotate(-45deg);
250
  left: 50%;
251
  top: 50%;
252
  margin: 16px 0 0 16px;
253
}
254
.marker:after {
255
  width: 8px;
256
  height: 8px;
257
  position: absolute;
258
  margin: 4px 0 0 4px;
259
  background: @iconbg;
260
  border-radius: 50%;
261
}
262
 
263
.video {
264
  width: 16px;
265
  height: 14px;
266
  background: @icon;
267
  border-radius: 3px;
268
  float: left;
269
  margin: 19px 0px 0px 16px;
270
}
271
.video:after {
272
  border-right: 10px solid @icon;
273
  border-left: 10px solid transparent;
274
  border-top: 6px solid transparent;
275
  border-bottom: 6px solid transparent;
276
  margin: 1px 0px 0px 2px;
277
}
278
 
279
.arrowup:after {
280
  width: 4px;
281
  height: 7px;
282
  background: @icon;
283
  margin: 11px 0px 0px 10px;
284
}
285
.arrowup:before {
286
  width: 0px;
287
  border-left: 6px solid transparent;
288
  border-right: 6px solid transparent;
289
  border-bottom: 6px solid @icon;
290
  margin: 6px 0px 0px 6px;
291
}
292
 
293
.arrowdown:after {
294
  width: 4px;
295
  height: 7px;
296
  background: @icon;
297
  margin: 7px 0px 0px 10px;
298
}
299
.arrowdown:before {
300
  width: 0px;
301
  border-left: 6px solid transparent;
302
  border-right: 6px solid transparent;
303
  border-top: 6px solid @icon;
304
  margin: 13px 0px 0px 6px;
305
}
306
 
307
.stripes:after {
308
  width: 12px;
309
  height: 2px;
310
  background: @icon;
311
  margin: 11px 0px 0px 6px;
312
  box-shadow:  0px 4px 0px @icon, 0px -4px 0px @icon;
313
}
314
 
315
.arrowleft:after {
316
  width: 7px;
317
  height: 4px;
318
  background: @icon;
319
  margin: 10px 0px 0px 6px;
320
}
321
.arrowleft:before {
322
  width: 0px;
323
  border-top: 6px solid transparent;
324
  border-bottom: 6px solid transparent;
325
  border-left: 7px solid @icon;
326
  margin: 6px 0px 0px 12px;
327
}
328
 
329
.arrowright:after {
330
  width: 7px;
331
  height: 4px;
332
  background: @icon;
333
  margin: 10px 0px 0px 11px;
334
}
335
.arrowright:before {
336
  width: 0px;
337
  border-top: 6px solid transparent;
338
  border-bottom: 6px solid transparent;
339
  border-right: 7px solid @icon;
340
  margin: 6px 0px 0px 5px;
341
}
342
 
343
.link {
344
  width: 6px;
345
  height: 8px;
346
  border: 2px solid @icon;
347
  border-top: solid 0em transparent;
348
  border-radius: 0 0 6px 6px;
349
  margin: 24px 0 0 15px;
350
  transform: rotate(45deg);
351
}
352
.link:before {
353
  width: 6px;
354
  height: 8px;
355
  border: 2px solid @icon;
356
  border-bottom: solid 0em transparent;
357
  border-radius: 6px 6px 0 0;
358
  margin: -14px 0 0 -2px;
359
}
360
.link:after {
361
  width: 2px;
362
  height: 10px;
363
  background: @icon;
364
  border-radius: 1px;
365
  margin: -7px 0px 0px 2px;
366
}
367
 
368
.cam{
369
  width: 18px;
370
  height: 18px;
371
  border: 2px solid @icon;
372
  border-radius: 3px;
373
  box-shadow: inset 0px 7px 0px @icon;
374
  margin: 14px 0 0 14px;
375
}
376
.cam:before{
377
  width: 5px;
378
  height: 5px;
379
  background: @iconbg;
380
  border-radius: 50%;
381
  margin: 0px 0 0 13px
382
}
383
.cam:after{
384
  width: 8px;
385
  height: 8px;
386
  background: @iconbg;
387
  border-radius: 50%;
388
  border: 2px solid @icon;
389
  margin: 2px 0 0 3px
390
}
391
 
392
.calendar{
393
  width: 18px;
394
  height: 13px;
395
  border: 2px solid @icon;
396
  border-radius: 3px;
397
  box-shadow: inset 0px 3px 0px @icon;
398
  margin: 18px 0 0 14px;
399
}
400
.calendar:before{
401
  width: 2px;
402
  height: 5px;
403
  background: @iconbg;
404
  border: 2px solid @icon;
405
  border-radius: 2px;
406
  margin: -6px 0 0 2px;
407
  z-index: 1;
408
}
409
.calendar:after{
410
  width: 2px;
411
  height: 5px;
412
  background: @iconbg;
413
  border: 2px solid @icon;
414
  border-radius: 2px;
415
  margin: -6px 0 0 10px;
416
}
417
 
418
.clock{
419
  width: 24px;
420
  height: 24px;
421
  border: 2px solid @icon;
422
  border-radius: 50%;
423
  margin: 0 auto;
424
  margin-top: 11px;
425
}
426
.clock:before{
427
  width: 2px;
428
  height: 8px;
429
  background: @icon;
430
  border-radius: 2px;
431
  margin: 6px 0 0 11px
432
}
433
.clock:after{
434
  width: 6px;
435
  height: 2px;
436
  background: @icon;
437
  border-radius: 2px;
438
  margin: 14px 0 0 11px; 
439
  transform: rotate(35deg);
440
}
441
 
442
.points{
443
  width: 24px;
444
  height: 24px;
445
  border: 2px solid @icon;
446
  border-radius: 50%;
447
  margin: 0 auto;
448
  margin-top: 11px;
449
}
450
.points:after{
451
  width: 4px;
452
  height: 4px;
453
  background: @icon;
454
  border-radius: 50%;
455
  margin: 10px 0 0 4px;
456
  box-shadow: 6px 0px 0px @icon, 12px 0px 0px @icon
457
}
458
 
459
.macbook{
460
  width: 18px;
461
  height: 12px;
462
  border: 2px solid @icon;
463
  border-radius: 0.2em 0.2em 0 0;
464
  margin: 15px 0 0 14px;
465
}
466
.macbook:after{
467
  width: 30px;
468
  height: 2px;
469
  background: @icon;
470
  border-radius: 0 0 2px 2px;
471
  margin: 14px 0 0 -6px;
472
}
473
.macbook:before{
474
  width: 8px;
475
  height: 1px;
476
  background: @iconbg;
477
  margin: 14px 0 0 5px;
478
  z-index: 1
479
}
480
 
481
.akku{
482
  width: 16px;
483
  height: 8px;
484
  border: 2px solid @iconbg;
485
  background: @icon;
486
  border-radius: 2px;
487
  margin: 18px 0 0 14px;
488
  box-shadow: 0px 0px 0px 2px @icon, inset -4px 0px 0px @iconbg;
489
}
490
.akku:after{
491
  width: 2px;
492
  height: 8px;
493
  background: @icon;
494
  border-radius: 2px;
495
  margin: 0px 0 0 20px;
496
}
497
.phone{
498
  width: 8px;
499
  height: 8px;
500
  background: @icon;
501
  border-radius: 8px 5px 5px 8px;
502
  box-shadow: 0px 16px 0px 0px @icon;
503
  transform: rotate(45deg);
504
  margin: 14px 0 0 27px;
505
}
506
.phone:after{
507
  width: 5px;
508
  height: 18px;
509
  background: @icon;
510
  margin: 3px 0 0 -1px;
511
  border-radius: 100%;
512
}
513
 
514
.mail{
515
  width: 22px;
516
  height: 16px;
517
  border: 2px solid @icon;
518
  border-radius: 3px;
519
  margin: 14px 0 0 12px;
520
}
521
.mail:after{
522
  width: 15px;
523
  height: 2px;
524
  background: @icon;
525
  border-radius: 3px;
526
  transform: rotate(35deg);
527
  margin: 3px 0 0 -2px;
528
}
529
.mail:before{
530
  width: 15px;
531
  height: 2px;
532
  background: @icon;
533
  border-radius: 3px;
534
  transform: rotate(-35deg);
535
  margin: 3px 0 0 10px;
536
}
537
 
538
.trash{
539
  border: 2px solid @icon;
540
  width: 12px;
541
  height: 14px;
542
  border-radius: 0px 0px 2px 2px;
543
  margin: 17px 0 0 17px;
544
}
545
.trash:after{
546
  background: @icon;
547
  width: 20px;
548
  height: 3px;
549
  border-radius: 2px;
550
  margin: -3px 0 0 -4px 
551
}
552
.trash:before{
553
  background: @icon;
554
  width: 6px;
555
  height: 3px;
556
  border-radius: 2px;
557
  margin: -6px 0 0 3px 
558
}
559
 
560
.iphone{
561
  height: 22px;
562
  width: 13px;
563
  border: 2px solid @icon;
564
  border-radius: 3px;
565
  box-shadow: inset 0px 2px 0px @icon, inset 0px -3px 0px @icon;
566
  margin: 11px 0 0 16px
567
}
568
.iphone:after{
569
  height: 1px;
570
  width: 5px;
571
  background: @iconbg;
572
  border-radius: 3px;
573
  margin: 0 0 0 4px;
574
}
575
.iphone:before{
576
  height: 3px;
577
  width: 3px;
578
  background: @iconbg;
579
  border-radius: 3px;
580
  margin: 20px 0 0 5px;
581
}
582
 
583
.upload{
584
  width: 18px;
585
  height: 6px;
586
  border: 3px solid @icon;
587
  border-top: none;
588
  margin: 24px 0 0 13px
589
}
590
.upload:before{
591
  width: 4px;
592
  height: 8px;
593
  background: @icon;
594
  margin: -6px 0 0 7px
595
}
596
.upload:after{
597
  border-style: solid;
598
  border-color: transparent transparent @icon transparent;
599
  border-width: 5px;
600
  margin: -16px 0 0 4px
601
 }
602
 
603
.download{
604
  width: 18px;
605
  height: 6px;
606
  border: 3px solid @icon;
607
  border-top: none;
608
  margin: 24px 0 0 13px
609
}
610
.download:before{
611
  width: 4px;
612
  height: 8px;
613
  background: @icon;
614
  margin: -11px 0 0 7px
615
}
616
.download:after{
617
  border-style: solid;
618
  border-color: @icon transparent  transparent transparent;
619
  border-width: 5px;
620
  margin: -3px 0 0 4px
621
 }
622
 
623
.doc{
624
  width: 16px;
625
  height: 20px;
626
  border: 2px solid @icon;
627
  border-radius: 3px; 
628
  margin: 14px 0 0 15px
629
}
630
.doc:after{
631
  width: 8px;
632
  height: 8px;
633
  border-radius: 0 0 2px 0;
634
  background-image: -webkit-linear-gradient(left top, @iconbg 0%,@iconbg 50%,@icon 51%,@icon 100%);
635
  margin: -2px 0 0 -2px;
636
}
637
.doc:before{
638
  width: 10px;
639
  height: 1px;
640
  background:@icon;
641
  margin: 9px 0 0 3px;
642
  box-shadow: 0px 3px 0px @icon,0px 6px 0px @icon;
643
}
644
 
645
.profil {
646
  border-radius: 1em 1em 0.5em 0.5em;
647
  background: @icon;
648
  width: 16px;
649
  height: 8px;
650
  margin: 24px 0 0 16px;
651
}
652
.profil:before {
653
  width: 8px;
654
  height: 9px;
655
  border-radius: 50%;
656
  background: @icon;
657
  margin: -10px 0 0 4px;
658
}
659
 
660
.key{
661
  width: 4px;
662
  height: 4px;
663
  border: 4px solid @icon;
664
  border-radius: 50%;
665
  margin: 18px 0 0 12px;
666
}
667
.key:after {
668
  width: 14px;
669
  height: 4px;
670
  border-radius: 0px 1px 4px 0px;
671
  border-bottom: 2px dotted @iconbg;
672
  background: @icon;
673
  margin: 0px 0 0 7px
674
}
675
 
676
.box {
677
  width: 1px;
678
  height: 14px;
679
  transform: none;
680
  background-color: @icon;
681
  margin: 18px 0px 0px 32px
682
}
683
 
684
.box:before {
685
  width: 16px;
686
  height: 18px;
687
  background-color:  @icon;
688
  transform: perspective(50px) rotateY(-45deg);
689
  margin: -2px 0px 0px -17px
690
 
691
}
692
 
693
.youtube{
694
  width: 22px;
695
  height: 18px;
696
  border-radius: 20%;
697
  margin: 0 auto;
698
  margin-top: 15px;
699
  background: @icon;
700
}
701
.youtube:before {
702
  border-top: 5px solid transparent;
703
  border-bottom: 5px solid transparent;
704
  border-left: 8px solid @iconbg;
705
  margin: 4px 0 0 8px;
706
}
707
 
708
.browser{
709
  width: 20px;
710
  height: 17px;
711
  border-radius: 2px;
712
  margin: 0 auto;
713
  margin-top: 15px;
714
  border: 1px solid @icon;
715
  box-shadow: inset 0px 5px 0px @iconbg, inset 0px 6px 0px @icon 
716
}
717
.browser:after{
718
  background: @icon;
719
  width: 2px;
720
  height: 1px;
721
  margin: 2px 1px;
722
  box-shadow: 3px 0px 0px @icon, 6px 0px 0px @icon;
723
}
724
 
725
.lan{
726
  background: @icon;
727
  width: 4px;
728
  height: 12px;
729
  margin: 22px 0px 0px 16px;
730
  box-shadow: 6px 0px 0px @icon, 6px -4px 0px @icon, 12px 0px 0px @icon, 12px -8px 0px @icon
731
}
732
 
733
.tv{
734
  border: 2px solid @icon;
735
  width: 20px;
736
  height: 12px;
737
  margin: 15px 0px 0px 13px;
738
  border-radius: 2px;
739
}
740
 
741
.tv:before{
742
  background: @icon;
743
  width: 4px;
744
  height: 2px;
745
  margin: 14px 0px 0px 8px;
746
}
747
 
748
.tv:after{
749
  background: @icon;
750
  width: 16px;
751
  height: 2px;
752
  margin: 16px 0px 0px 2px;
753
}
754
 
755
.left{
756
  width: 4px;
757
  height: 13px;
758
  background: @icon;
759
  transform: rotate(45deg);
760
  margin: 15px 0px 0px 21px;
761
}
762
.left:after{
763
  width: 4px;
764
  height: 10px;
765
  background: @icon;
766
  transform: rotate(90deg);
767
  margin: 6px 0px 0px 6px;
768
}
769
.top{
770
  width: 4px;
771
  height: 13px;
772
  background: @icon;
773
  transform: rotate(135deg);
774
  margin: 19px 0px 0px 26px;
775
}
776
.top:after{
777
  width: 4px;
778
  height: 10px;
779
  background: @icon;
780
  transform: rotate(90deg);
781
  margin: 6px 0px 0px 6px;
782
}
783
.down{
784
  width: 4px;
785
  height: 13px;
786
  background: @icon;
787
  transform: rotate(-45deg);
788
  margin: 19px 0px 0px 20px;
789
}
790
.down:after{
791
  width: 4px;
792
  height: 10px;
793
  background: @icon;
794
  transform: rotate(90deg);
795
  margin: 6px 0px 0px 6px;
796
}
797
.right{
798
  width: 4px;
799
  height: 13px;
800
  background: @icon;
801
  transform: rotate(225deg);
802
  margin: 21px 0px 0px 23px;
803
}
804
.right:after{
805
  width: 4px;
806
  height: 10px;
807
  background: @icon;
808
  transform: rotate(90deg);
809
  margin: 6px 0px 0px 6px;
810
}
811
 
812
.reg {
813
  width: 20px;
814
  height: 3px;
815
  background: @icon;
816
  margin: 22px 0px 0px 14px;
817
  box-shadow:  0px 7px 0px @icon, 0px -7px 0px @icon;
818
}
819
 
820
.reg:after {
821
  width: 5px;
822
  height: 5px;
823
  background: @icon;
824
  border-radius: 50%;
825
  margin: -1px 0px 0px 11px;
826
  box-shadow:  -5px 7px 0px @icon, -8px -7px 0px @icon;
827
}
828
 
829
.eye{
830
  width: 22px;
831
  height: 12px;
832
  background: @icon;
833
  border-radius: 100%;
834
  margin: 19px 0px 0px 13px;
835
}
836
.eye:after{
837
  width: 4px;
838
  height: 4px;
839
  border: 2px solid @iconbg;
840
  border-radius: 100%;
841
  margin: 2px 0px 0px 7px;
842
}
 
JavaScript
// Icon Set by Andreas Storm
1
// Icon Set by Andreas Storm
2
// http://dribbble.com/andreasstorm
3
// ONE DIV - PURE CSS
 

free css icon set

CSSDeck G+