Ajax Loader
HTML 
<ul>
1
<ul>
2
  <li><div class="icon arrow-previous"></div></li>
3
  <li><div class="icon arrow-right"></div></li>
4
  <li><div class="icon arrow-left"></div></li>
5
  <li><div class="icon arrow-next"></div></li>
6
  <li><div class="icon arrow-bottom"></div></li>
7
  <li><div class="icon arrow-top"></div></li>
8
  <li><div class="icon smart-phone"></div></li>
9
  <li><div class="icon information-button"></div></li>
10
  <li><div class="icon speech-bubble"></div></li>
11
  <li><div class="icon speech-bubble speech-bubble--no-text"></div></li>
12
  <li><div class="icon bullet-list"></div></li>
13
  <li><div class="icon scale"></div></li>
14
  <li><div class="icon credit-card"></div></li>
15
  <li><div class="icon calendar-tick"></div></li>
16
  <li><div class="icon outcoming"></div></li>
17
  <li><div class="icon clock"></div></li>
18
  <li><div class="icon mail"></div></li>
19
  <li><div class="icon add"></div></li>
20
  <li><div class="icon bookmark"></div></li>
21
  <li><div class="icon portfolio"></div></li>
22
  <li><div class="icon hierarchy"></div></li>
23
  <li><div class="icon converging-arrows"></div></li>
24
  <li><div class="icon not-charging"></div></li>
25
  <li><div class="icon battery battery--two-bars"></div></li>
26
  <li><div class="icon battery battery--three-bars"></div></li>
27
  <li><div class="icon battery battery--four-bars"></div></li>
28
  <li><div class="icon menu-three-lines"></div></li>
29
  <li><div class="icon cross-out-mark"></div></li>
30
  <li><div class="icon arrow-refresh"></div></li>
31
  <li><div class="icon wrong-sign"></div></li>
32
  <li><div class="icon clapper"></div></li>
33
  <li><div class="icon tablet-locked"></div></li>
34
  <li><div class="icon storage"></div></li>
35
  <li><div class="icon card-and-machine"></div></li>
36
  <li><div class="icon aim-target"></div></li>
37
  <li><div class="icon box"></div></li>
38
  <li><div class="icon window-computer"></div></li>
39
  <li><div class="icon circle-of-circles"></div></li>
40
  <li><div class="icon window-plus"></div></li>
41
  <li><div class="icon stack"></div></li>
42
  <li><div class="icon bluethooth"></div></li>
43
</ul>
 
CSS 
@color: black;
1
@color: black;
2
 
3
body {
4
  background: #e6e6e6;
5
}
6
 
7
ul {
8
  list-style-type: none;
9
  padding: 0;
10
  margin: 0;
11
  font-size: 0;
12
13
  li {
14
    width: 64px;
15
    height: 64px;
16
    border: 39px solid white;
17
    background: #FFF;
18
    display: inline-block;
19
    position: relative;
20
    vertical-align: top;
21
    margin: 5px;
22
  
23
    &:after {
24
      background: rgba(0, 100, 255, 0.1);
25
      width: 2px;
26
      height: 100%;
27
      position: absolute;
28
      left: 50%;
29
      margin-left: -1px;
30
      content: '';
31
    }
32
  
33
    &:before {
34
      background: rgba(0, 100, 255, 0.1);
35
      height: 2px;
36
      width: 100%;
37
      position: absolute;
38
      top: 50%;
39
      margin-top: -1px;
40
      content: '';
41
    }
42
  
43
    /* comment this ↓ to see the middle of the box */
44
    &:after, &:before { content: normal; }
45
  }
46
}
47
 
48
.icon {
49
  position: relative;
50
  display: inline-block;
51
52
  .box-sizing;
53
54
  &:after, &:before {
55
    content: '';
56
    position: absolute;
57
  
58
    .box-sizing;
59
  }
60
}
61
 
62
.arrow {
63
64
  &-previous, &-next, &-bottom, &-top {
65
    width: 100%;
66
    height: 100%;
67
68
    &:before, &:after {
69
      width: 39px;
70
      height: 2px;
71
      background: @color;
72
      content: '';
73
      position: absolute;
74
      top: 50%;
75
    }
76
  
77
    &:before { .rotate(-44deg); }
78
    &:after  { .rotate(44deg); }
79
  }
80
81
  &-previous {
82
    &:before, &:after {
83
      left: 25%;
84
      .transform-origin(0, 0);
85
    }
86
  }
87
88
  &-next {
89
    &:before, &:after {
90
      right: 25%;
91
      .transform-origin(100%, 100%);
92
    }
93
  }
94
95
  &-bottom {
96
    &:before, &:after {
97
      .transform-origin(50%, 0);
98
    }
99
  
100
    &:before { left: 0;  .rotate(46deg);  }
101
    &:after  { right: 0; .rotate(-46deg); }
102
  }
103
104
  &-top {
105
    &:before, &:after {
106
      .transform-origin(50%, 100%);
107
    }
108
  
109
    &:before { left: 0;  .rotate(-46deg);  }
110
    &:after  { right: 0; .rotate(46deg); }
111
  }
112
}
113
 
114
.arrow {
115
  &-right, &-left {
116
    height: 2px;
117
    width: 55px;
118
    background: @color;
119
    position: absolute;
120
    top: 50%;
121
    margin-top: -1px;
122
  
123
    &:after {
124
      content: '';
125
      position: absolute;
126
      width: 25px;
127
      height: 25px;
128
      bottom: 1px;
129
      border: 2px solid @color;
130
    }
131
  }
132
133
  &-right:after {
134
    .rotate(-45deg);
135
    .transform-origin(100%, 100%);
136
    border-left: none;
137
    border-top: none;
138
    right: -1px;
139
  }
140
141
  &-left:after {
142
    .rotate(45deg);
143
    .transform-origin(0, 100%);
144
    border-right: none;
145
    border-top: none;
146
    left: -1px;
147
  }
148
}
149
 
150
.smart-phone {
151
  width: 28px;
152
  height: 54px;
153
  border: 2px solid @color;
154
  border-radius: 4px;
155
  position: absolute;
156
  left: 50%;
157
  top: 50%;
158
  margin: -25px 0 0 -14px;
159
160
  &:after {
161
    content: '';
162
    position: absolute;
163
    width: 100%;
164
    top: 4px;
165
    bottom: 5px;
166
    border: 2px solid @color;
167
    border-left: 0;
168
    border-right: 0;
169
  }
170
171
  &:before {
172
    position: absolute;
173
    content: '';
174
    left: 50%;
175
    bottom: 1px;
176
    width: 3px;
177
    height: 3px;
178
    margin-left: -1px;
179
    background: @color;
180
    border-radius: 100%;
181
  }
182
}
183
 
184
.information-button {
185
  width: 56px;
186
  height: 56px;
187
  border: 2px solid @color;
188
  border-radius: 100%;
189
  position: absolute;
190
  left: 50%;
191
  top: 50%;
192
  margin: -28px auto auto -28px;
193
194
  &:before {
195
    width: 4px;
196
    height: 4px;
197
    background: @color;
198
    border-radius: 100%;
199
    left: 50%;
200
    margin-left: -2px;
201
    top: 10px;
202
  }
203
204
  &:after {
205
    width: 4px;
206
    height: 25px;
207
    background: @color;
208
    border-radius: 10px;
209
    left: 50%;
210
    margin-left: -2px;
211
    bottom: 10px;
212
  }
213
}
214
 
215
.speech-bubble {
216
  width: 56px;
217
  height: 40px;
218
  border: 2px solid @color;
219
  position: absolute;
220
  top: 50%;
221
  left: 50%;
222
  margin: -20px 0 0 -28px;
223
  box-shadow: inset 10px 0 0 0 white,
224
              inset -10px 0 0 0 white,
225
              inset 0 13px 0 0 white,
226
              inset 0 15px 0 0 @color,
227
              inset 0 -13px 0 0 white,
228
              inset 0 -15px 0 0 @color;
229
 
230
  &--no-text {
231
    box-shadow: none;
232
  }
233
234
  &:before {
235
    width: 0;
236
    height: 0;
237
    border-top: 9px solid transparent;
238
    border-bottom: 9px solid transparent;
239
    border-right: 9px solid @color;
240
    bottom: -14px;
241
    left: 10px;
242
  
243
    .rotate(45deg);
244
  }
245
246
  &:after {
247
    width: 0;
248
    height: 0;
249
    border-top: 9px solid transparent;
250
    border-bottom: 9px solid transparent;
251
    border-right: 9px solid white;
252
    bottom: -9px;
253
    left: 12px;
254
  
255
    .rotate(45deg);
256
  }
257
}
258
 
259
.bullet-list {
260
  width: 6px;
261
  height: 6px;
262
  background: white;
263
  border-radius: 100%;
264
  position: absolute;
265
  top: 50%;
266
  left: 6px;
267
  margin: -3px 0 0 0;
268
269
  box-shadow: 0 20px 0 0 white,
270
              0 -20px 0 0 white,
271
              0 0 0 2px @color,
272
              0 -20px 0 2px @color,
273
              0 20px 0 2px @color;
274
275
  &:after {
276
    background: @color;
277
    width: 32px;
278
    height: 2px;
279
    left: 18px;
280
    top: 50%;
281
    margin: -1px 0 0 0;
282
    box-shadow: 0 -20px 0 0 @color,
283
                0 20px 0 0 @color;
284
  }
285
}
286
 
287
.scale {
288
  width: 62px;
289
  height: 18px;
290
  border: 2px solid @color;
291
  top: 50%;
292
  left: 50%;
293
  margin: -18px 0 0 -31px;
294
295
  background: linear-gradient(
296
    to right,
297
    transparent 66.66%, @color 33.33%
298
  );
299
  background-size: 3px 6px;
300
  background-repeat: repeat-x;
301
  background-position: bottom left;
302
303
  .rotate(45deg);
304
305
  &:after {
306
    width: 100%;
307
    height: 100%;
308
    background: linear-gradient(
309
      to right,
310
      transparent 90%, @color 10%
311
    );
312
    background-size: 15px 8px;
313
    background-repeat: repeat-x;
314
    background-position: bottom left;
315
  }
316
}
317
 
318
.credit-card {
319
  width: 56px;
320
  height: 40px;
321
  border: 2px solid @color;
322
  position: absolute;
323
  top: 50%;
324
  left: 50%;
325
  margin: -20px 0 0 -28px;
326
  border-radius: 3px;
327
328
  &:after {
329
    width: 100%;
330
    height: 6px;
331
    top: 7px;
332
    left: 0;
333
    background: @color;
334
  }
335
336
  &:before {
337
    width: 16px;
338
    height: 5px;
339
    right: 5px;
340
    bottom: 7px;
341
    background: @color;
342
  }
343
}
344
 
345
.calendar-tick {
346
  width: 54px;
347
  height: 52px;
348
  position: absolute;
349
  top: 50%;
350
  left: 50%;
351
  margin: -26px 0 0 -27px;
352
  border: 2px solid @color;
353
  box-shadow: inset 0 9px 0 0 white,
354
              inset 0 11px 0 0 @color;
355
356
  &:after {
357
    width: 20px;
358
    height: 14px;
359
    border: 2px solid @color;
360
    border-top: 0;
361
    border-right: 0;
362
  
363
    .rotate(-45deg);
364
    left: 50%;
365
    top: 50%;
366
    margin: -7px 0 0 -10px;
367
  }
368
369
  &:before {
370
    width: 2px;
371
    height: 10px;
372
    background: @color;
373
    left: 6px;
374
    top: -6px;
375
  
376
    box-shadow: 9px 0 0 0 @color,
377
                18px 0 0 0 @color,
378
                27px 0 0 0 @color,
379
                36px 0 0 0 @color;
380
  }
381
}
382
 
383
.outcoming {
384
  position: absolute;
385
  width: 32px;
386
  height: 46px;
387
  border: 2px solid @color;
388
  border-right: 0;
389
  top: 50%;
390
  left: 5px;
391
  margin-top: -23px;
392
393
  &:after {
394
    width: 46px;
395
    height: 2px;
396
    background: @color;
397
    top: 50%;
398
    left: 6px;
399
    margin-top: -1px;
400
  }
401
402
  &:before {
403
    width: 20px;
404
    height: 20px;
405
    right: -24px;
406
    top: 50%;
407
    margin-top: -20px;
408
    border: 2px solid @color;
409
    border-top: 0;
410
    border-left: 0;
411
    box-sizing: border-box;
412
    -moz-box-sizing: border-box;
413
  
414
    .rotate(-45deg);
415
    .transform-origin(100%, 100%);
416
  }
417
}
418
 
419
.clock {
420
  width: 56px;
421
  height: 56px;
422
  border: 2px solid @color;
423
  border-radius: 100%;
424
  position: absolute;
425
  left: 50%;
426
  top: 50%;
427
  margin: -28px 0 0 -28px;
428
429
  &:after {
430
    width: 19px;
431
    height: 21px;
432
    border: 2px solid @color;
433
    border-left: 0;
434
    border-top: 0;
435
    bottom: 50%;
436
    right: 50%;
437
    margin: 0 -1px -1px 0;
438
    box-sizing: border-box;
439
    -moz-box-sizing: border-box;
440
  }
441
}
442
 
443
.mail {
444
  width: 56px;
445
  height: 36px;
446
  border: 2px solid @color;
447
  position: absolute;
448
  left: 50%;
449
  top: 50%;
450
  margin: -18px 0 0 -28px;
451
452
  &:before, &:after {
453
    background: @color;
454
    width: 33px;
455
    height: 2px;
456
    top: 2px;
457
  }
458
459
  &:before {
460
    .rotate(34deg);
461
    .transform-origin(0, 0);
462
  }
463
464
  &:after {
465
    right: 0;
466
    .rotate(-34deg);
467
    .transform-origin(100%, 0);
468
  }
469
}
470
 
471
.add {
472
  position: absolute;
473
  left: 50%;
474
  top: 50%;
475
  margin: -28px 0 0 -3px;
476
477
  &, &:before {
478
    background: @color;
479
    height: 56px;
480
    width: 6px;
481
    border-radius: 10px;
482
  }
483
484
  &:before {
485
    .rotate(90deg);
486
  }
487
}
488
 
489
.bookmark {
490
  width: 42px;
491
  height: 56px;
492
  position: absolute;
493
  left: 50%;
494
  top: 50%;
495
  margin: -28px 0 0 -21px;
496
  border: 2px solid @color;
497
  border-bottom: 0;
498
499
  &:after {
500
    width: 30px;
501
    height: 30px;
502
    border: 2px solid @color;
503
    border-right: 0;
504
    border-bottom: 0;
505
    top: 100%;
506
    left: 50%;
507
    margin: -15px 0 0 -15px;
508
    box-sizing: border-box;
509
    moz-box-sizing: border-box;
510
  
511
    .rotate(45deg);
512
  }
513
}
514
 
515
.portfolio {
516
  width: 50px;
517
  height: 34px;
518
  position: absolute;
519
  left: 50%;
520
  top: 50%;
521
  margin: -17px 0 0 -25px;
522
  border: 2px solid @color;
523
  box-shadow: inset 0 8px 0 0 white,
524
              inset 0 10px 0 0 @color;
525
526
  &:before {
527
    width: 18px;
528
    height: 7px;
529
    border: 2px solid @color;
530
    border-bottom: 0;
531
    left: 50%;
532
    top: -9px;
533
    margin: 0 0 0 -9px;
534
    box-sizing: border-box;
535
    moz-box-sizing: border-box;
536
  }
537
538
  &:after {
539
    width: 4px;
540
    height: 4px;
541
    background: white;
542
    left: 7px;
543
    top: 10px;
544
    box-shadow: 0 0 0 1px @color,
545
                28px 0 0 0 white,
546
                28px 0 0 1px @color;
547
  }
548
}
549
 
550
.hierarchy {
551
  width: 7px;
552
  height: 7px;
553
  background: white;
554
  position: absolute;
555
  left: 43px;
556
  top: 50%;
557
  margin-top: -4px;
558
  box-shadow: 0 -19px 0 0 white,
559
              0 19px 0 0 white,
560
              0 0 0 2px @color,
561
              0 -19px 0 2px @color,
562
              0 19px 0 2px @color,
563
              -28px 0 0 2px white,
564
              -28px 0 0 4px @color;
565
566
  &:before {
567
    width: 10px;
568
    height: 41px;
569
    border: 2px solid @color;
570
    border-right: 0;
571
    top: -17px;
572
    left: -12px;
573
  
574
    .box-sizing;
575
  }
576
577
  &:after {
578
    width: 15px;
579
    height: 2px;
580
    background: @color;
581
    left: -17px;
582
    top: 50%;
583
    margin-top: -1px;
584
  }
585
}
586
 
587
.converging-arrows {
588
  width: 78px;
589
  height: 2px;
590
  position: absolute;
591
  top: 50%;
592
  left: 50%;
593
  margin: -1px 0 0 -39px;
594
  box-shadow: inset 32px 0 0 0 @color,
595
              inset -32px 0 0 0 @color;
596
597
  .rotate(-45deg);
598
  .transform-origin(50%, 50%);
599
600
  &:before, &:after {
601
    width: 20px;
602
    height: 20px;
603
    border: 2px solid @color;
604
    top: 50%;
605
    margin-top: -10px;
606
  
607
    .box-sizing;
608
    .rotate(45deg);
609
    .transform-origin(50%, 50%);
610
  }
611
612
  &:before {
613
    left: 10px;
614
    border-left: 0;
615
    border-bottom: 0;
616
  }
617
618
  &:after {
619
    right: 10px;
620
    border-right: 0;
621
    border-top: 0;
622
  }
623
}
624
 
625
.not-charging {
626
  width: 50px;
627
  height: 24px;
628
  border: 1px solid @color;
629
  position: absolute;
630
  top: 50%;
631
  left: 50%;
632
  margin: -12px 0 0 -25px;
633
 
634
  &:after {
635
    width: 60px;
636
    height: 1px;
637
    background: @color;
638
    left: 50%;
639
    top: 50%;
640
    margin: 0 0 0 -30px;
641
    box-shadow: 0 0 0 1px white;
642
  
643
    .rotate(45deg);
644
  }
645
646
  &:before {
647
    width: 5px;
648
    height: 10px;
649
    border: 1px solid @color;
650
    border-left: 0;
651
    right: -6px;
652
    top: 50%;
653
    margin-top: -5px;
654
  }
655
}
656
 
657
.battery {
658
  width: 44px;
659
  height: 24px;
660
  border: 1px solid @color;
661
  position: absolute;
662
  top: 50%;
663
  left: 50%;
664
  margin: -12px 0 0 -22px;
665
666
  &--two-bars:after,
667
  &--three-bars:after,
668
  &--four-bars:after {
669
    height: 16px;
670
    width: 5px;
671
    background: white;
672
    left: 3px;
673
    top: 3px;
674
  }
675
676
  &--two-bars:after {
677
    box-shadow: 0 0 0 1px @color,
678
                10px 0 0 0 white,
679
                10px 0 0 1px @color;
680
  }
681
682
  &--three-bars:after {
683
    box-shadow: 0 0 0 1px @color,
684
                10px 0 0 0 white,
685
                10px 0 0 1px @color,
686
                20px 0 0 0 white,
687
                20px 0 0 1px @color;
688
  }
689
690
  &--four-bars:after {
691
    box-shadow: 0 0 0 1px @color,
692
                10px 0 0 0 white,
693
                10px 0 0 1px @color,
694
                20px 0 0 0 white,
695
                20px 0 0 1px @color,
696
                30px 0 0 0 white,
697
                30px 0 0 1px @color;
698
  }
699
700
  &:before {
701
    width: 5px;
702
    height: 10px;
703
    border: 1px solid @color;
704
    border-left: 0;
705
    right: -6px;
706
    top: 50%;
707
    margin-top: -5px;
708
  }
709
}
710
 
711
.menu-three-lines {
712
  position: absolute;
713
  top: 50%;
714
  left: 50%;
715
  margin: -1px 0 0 -28px;
716
717
  &, &:after, &:before {
718
    width: 56px;
719
    height: 2px;
720
    background: @color;
721
  }
722
723
  &:before { top: -20px; }
724
  &:after  { bottom: -20px; }
725
}
726
 
727
.cross-out-mark {
728
  width: 84px;
729
  height: 2px;
730
  position: absolute;
731
  margin: -1px 0 0 -42px;
732
733
  .rotate(45deg);
734
  .transform-origin(50%, 50%);
735
736
  &, &:after {
737
    background: @color;
738
    left: 50%;
739
    top: 50%;
740
  }
741
742
  &:after {
743
    height: 84px;
744
    width: 2px;
745
    margin: -42px 0 0 -1px;
746
  }
747
}
748
 
749
.arrow-refresh {
750
  position: absolute;
751
  width: 54px;
752
  height: 54px;
753
  border: 2px solid @color;
754
  border-radius: 100%;
755
  left: 50%;
756
  top: 50%;
757
  margin: -27px 0 0 -27px;
758
759
  &:before {
760
    width: 20px;
761
    height: 20px;
762
    background: white;
763
    right: -2px;
764
    bottom: 50%;
765
  }
766
767
  &:after {
768
    width: 12px;
769
    height: 12px;
770
    border: 2px solid @color;
771
    border-top: 0;
772
    border-left: 0;
773
    top: -6px;
774
    right: 6px;
775
  
776
    .rotate(-10deg);
777
    .transform-origin(100%, 100%);
778
  }
779
}
780
 
781
.wrong-sign {
782
  width: 56px;
783
  height: 56px;
784
  position: absolute;
785
  top: 50%;
786
  left: 50%;
787
  margin: -28px 0 0 -28px;
788
  border: 1px solid @color;
789
790
  &:before, &:after {
791
    width: 40px;
792
    height: 1px;
793
    background: @color;
794
    top: 50%;
795
    left: 50%;
796
    margin-left: -20px;
797
  }
798
799
  &:before { .rotate(-45deg); }
800
  &:after  { .rotate(45deg);  }
801
}
802
 
803
.clapper {
804
  height: 30px;
805
  position: absolute;
806
  left: 50%;
807
  top: 50%;
808
  margin: -4px 0 0 -25px;
809
810
  &, &:before, &:after {
811
    width: 50px;
812
    border: 2px solid @color;
813
  }
814
815
  &:before, &:after {
816
    height: 8px;
817
    left: -2px;
818
    background-position: -8px 0;
819
    background-size: 8px 8px;
820
  
821
    background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 7px, @color 7px, @color 8px);
822
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 7px, @color 7px, @color 8px);
823
  }
824
825
  &:before {
826
    top: -8px;
827
  }
828
829
  &:after {
830
    top: -15px;
831
  
832
    .rotate(-15deg);
833
    .transform-origin(0, 100%);
834
  }
835
}
836
 
837
.tablet-locked {
838
  width: 36px;
839
  height: 56px;
840
  position: absolute;
841
  left: 50%;
842
  top: 50%;
843
  margin: -28px 0 0 -18px;
844
  border: 2px solid @color;
845
  border-radius: 2px;
846
  box-shadow: inset 0 4px 0 0 white,
847
              inset 0 6px 0 0 @color,
848
              inset 0 -6px 0 0 white,
849
              inset 0 -8px 0 0 @color;
850
851
  &:before {
852
    width: 8px;
853
    height: 8px;
854
    border: 1px solid @color;
855
    border-radius: 100%;
856
    left: 50%;
857
    top: 17px;
858
    margin-left: -4px;
859
    box-shadow: 0 28px 0 -2px @color;
860
  }
861
862
  &:after {
863
    width: 12px;
864
    height: 10px;
865
    border-radius: 1px;
866
    top: 22px;
867
    left: 50%;
868
    border: 1px solid @color;
869
    background: white;
870
    margin-left: -6px;
871
  }
872
}
873
 
874
.storage {
875
  width: 40px;
876
  height: 54px;
877
  border: 2px solid @color;
878
  position: absolute;
879
  left: 50%;
880
  top: 50%;
881
  margin: -27px 0 0 -20px;
882
883
  &:before {
884
    width: 10px;
885
    height: 2px;
886
    background: @color;
887
    left: 50%;
888
    margin-left: -5px;
889
    top: 7px;
890
    box-shadow: 0 16px 0 0 @color,
891
                0 32px 0 0 @color;
892
  }
893
894
  &:after {
895
    width: 30px;
896
    height: 2px;
897
    background: @color;
898
    left: 50%;
899
    margin-left: -15px;
900
    top: 16px;
901
    box-shadow: 0 16px 0 0 @color;
902
  }
903
}
904
 
905
.card-and-machine {
906
  width: 56px;
907
  height: 14px;
908
  position: absolute;
909
  left: 50%;
910
  top: 50%;
911
  margin: -24px 0 0 -28px;
912
913
  &, &:before {
914
    border: 2px solid @color;
915
  }
916
917
  &:before, &:after {
918
    .transform(skew(160deg, 0deg));
919
  }
920
921
  &:before {
922
    width: 34px;
923
    height: 40px;
924
    border-radius: 3px;
925
    background: white;
926
    left: 3px;
927
    top: 5px;
928
  
929
    background-color: white;
930
    background: linear-gradient(
931
      to right,
932
      white 55%,
933
      @color 55%, @color 72%,
934
      white 72%
935
    );
936
    background-size: 100% 100%;
937
    background-repeat: no-repeat;
938
    background-position: bottom left;
939
  }
940
941
  &:after {
942
    width: 4px;
943
    height: 12px;
944
    background: @color;
945
    top: 27px;
946
    left: 7px;
947
  }
948
}
949
 
950
.aim-target {
951
  width: 40px;
952
  height: 40px;
953
  border: 2px solid @color;
954
  border-radius: 100%;
955
  position: absolute;
956
  left: 50%;
957
  top: 50%;
958
  margin: -20px 0 0 -20px;
959
960
  &:before, &:after {
961
    width: 58px;
962
    height: 2px;
963
    box-shadow: inset 17px 0 0 0 @color,
964
                inset -17px 0 0 0 @color;
965
    top: 50%;
966
    left: 50%;
967
    margin: -1px 0 0 -29px;
968
  }
969
970
  &:after {
971
    .rotate(90deg);
972
  }
973
}
974
 
975
.box {
976
  width: 40px;
977
  height: 40px;
978
  position: absolute;
979
  top: 50%;
980
  left: 50%;
981
  margin: -14px 0 0 -28px;
982
  box-shadow: inset 12px 0 0 0 white,
983
              inset -12px 0 0 0 white,
984
              inset 0 5px 0 0 white,
985
              inset 0 7px 0 0 @color;
986
987
  &, &:before, &:after {
988
    border: 2px solid @color;
989
    background: white;
990
  }
991
992
  &, &:before {
993
    width: 40px;
994
  }
995
996
  &:before {
997
    height: 13px;
998
    border-bottom: 0;
999
    top: -15px;
1000
    left: 6px;
1001
    box-shadow: inset 17px 0 0 0 white,
1002
                inset 19px 0 0 0 @color;
1003
  
1004
    .transform(skew(130deg, 0deg));
1005
  }
1006
1007
  &:after {
1008
    height: 39px;
1009
    width: 16px;
1010
    border-left: 0;
1011
    border-top: 0;
1012
    top: -8px;
1013
    left: 38px;
1014
      
1015
    .transform(skew(0deg, 139deg));
1016
  }
1017
}
1018
 
1019
.window-computer {
1020
  width: 58px;
1021
  height: 58px;
1022
  border: 2px solid @color;
1023
  position: absolute;
1024
  left: 50%;
1025
  top: 50%;
1026
  background: white;
1027
  margin: -29px 0 0 -29px;
1028
  box-shadow: inset 0 9px 0 0 white,
1029
              inset 0 11px 0 0 @color;
1030
1031
  &:before, &:after {
1032
    background: @color;
1033
    height: 3px;
1034
    top: 3px;
1035
  }
1036
1037
  &:before {
1038
    width: 12px;
1039
    left: 3px;
1040
  }
1041
1042
  &:after {
1043
    width: 3px;
1044
    right: 3px;
1045
    border-radius: 100%;
1046
    box-shadow: -6px 0 0 0 @color;
1047
  }
1048
}
1049
 
1050
.circle-of-circles {
1051
  width: 6px;
1052
  height: 6px;
1053
  border-radius: 100%;
1054
  background: white;
1055
  position: absolute;
1056
  left: 50%;
1057
  top: 50%;
1058
  margin: -28px 0 0 -3px;
1059
  box-shadow: 17px 8px 0 0 white,
1060
              24px 25px 0 0 white,
1061
              17px 42px 0 0 white,
1062
              0 48px 0 0 white,
1063
              -17px 42px 0 0 white,
1064
              -24px 25px 0 0 white,
1065
              -17px 8px 0 0 white,
1066
            
1067
              0 0 0 1px @color,
1068
              17px 8px 0 1px @color,
1069
              24px 25px 0 1px @color,
1070
              17px 42px 0 1px @color,
1071
              0 48px 0 1px @color,
1072
              -17px 42px 0 1px @color,
1073
              -24px 25px 0 1px @color,
1074
              -17px 8px 0 1px @color;
1075
}
1076
 
1077
.window-plus {
1078
  width: 38px;
1079
  height: 38px;
1080
  position: absolute;
1081
  top: 50%;
1082
  left: 50%;
1083
  margin: -12px 0 0 -26px;
1084
  border: 2px solid @color;
1085
  box-shadow: 14px -14px 0 -2px white,
1086
              14px -14px 0 0 @color;
1087
1088
  &:before, &:after {
1089
    background: @color;
1090
    left: 50%;
1091
    top: 50%;
1092
  }
1093
1094
  &:before {
1095
    width: 26px;
1096
    height: 2px;
1097
    margin: -1px 0 0 -13px;
1098
  }
1099
1100
  &:after {
1101
    width: 2px;
1102
    height: 26px;
1103
    margin: -13px 0 0 -1px;
1104
  }
1105
}
1106
 
1107
.stack {
1108
  width: 54px;
1109
  height: 36px;
1110
  position: absolute;
1111
  top: 50%;
1112
  left: 50%;
1113
  margin: -11px 0 0 -27px;
1114
1115
  &, &:before, &:after {
1116
    border: 2px solid @color;
1117
  }
1118
1119
  &:before, &:after {
1120
    border-bottom: 0;
1121
  }
1122
1123
  &:before {
1124
    width: 46px;
1125
    height: 8px;
1126
    left: 2px;
1127
    top: -10px;  
1128
  }
1129
1130
  &:after {
1131
    width: 32px;
1132
    height: 5px;
1133
    left: 8px;
1134
    top: -16px;  
1135
  }
1136
}
1137
 
1138
.bluethooth {
1139
  height: 56px;
1140
  width: 2px;
1141
  background: @color;
1142
  position: absolute;
1143
  left: 50%;
1144
  top: 50%;
1145
  margin: -28px 0 0 -1px;
1146
1147
  &:before, &:after {
1148
    width: 20px;
1149
    height: 20px;
1150
    left: 2px;
1151
 
1152
    border: 2px solid @color;
1153
    border-left: 0;
1154
  }
1155
1156
  &:before {
1157
    top: 0px;
1158
    .transform-origin(0, 0);
1159
    .rotate(45deg);
1160
  }
1161
1162
  &:after {
1163
    bottom: 0;
1164
    .transform-origin(0, 100%);
1165
    .rotate(-45deg);
1166
  }
1167
}
1168
 
1169
/* MIXINS */
1170
 
1171
.rotate (@deg) {
1172
  -webkit-transform: rotate(@deg);
1173
  -moz-transform:    rotate(@deg);
1174
  -ms-transform:     rotate(@deg);
1175
  -o-transform:      rotate(@deg);
1176
}
1177
 
1178
.transform-origin (@x:center, @y:center) {
1179
  -webkit-transform-origin: @x @y;
1180
  -moz-transform-origin:    @x @y;
1181
  -ms-transform-origin:     @x @y;
1182
  -o-transform-origin:      @x @y;
1183
}
1184
 
1185
.box-sizing (@value:border-box) {
1186
  box-sizing: @value;
1187
  -moz-box-sizing: @value;
1188
}
1189
 
1190
.transform(@string){
1191
  -webkit-transform: @string;
1192
  -moz-transform:    @string;
1193
  -ms-transform:     @string;
1194
  -o-transform:      @string;
1195
}
 

Single Element Icons

CSSDeck G+