Ajax Loader
HTML 
 
1
 
2
<body>
3
    <div class="pencil_box">
4
        <div id="pencil_wrapper" class="green">
5
            <div class="eraser"></div>
6
            <div class="sleeve"></div>
7
            <div class="shaft"></div>
8
            <div class="point"></div>
9
            <div class="lead"></div>
10
        </div>
11
    </div>
12
 
13
</body>
 
CSS 
body{
1
body{
2
  background-color:#FFE4B5;
3
}
4
#pencil_wrapper{
5
    position: absolute;
6
    top: 20px;
7
    left: 12px;
8
    width: 50px;
9
    margin-left: 100px;
10
}
11
.eraser{
12
    position: relative;
13
    top: 1px;
14
    left: -11px;
15
    width: 43px;
16
    height: 20px;
17
    box-shadow: 0 3px 1px #b57070, 0 -1px 2px #b57070;
18
    border-top-right-radius: 4px;
19
    border-top-left-radius: 4px;
20
    background: linear-gradient(to right,  #cd8282 0%,#f5aaaa 40%,#b96e6e 75%,#b96e6e 100%);
21
}
22
.sleeve{
23
    position: relative;
24
    top: 2px;
25
    left: -13px;
26
    width: 46px;
27
    height: 30px;
28
    border-radius: 2px;
29
    border-bottom: solid thin #2C2C2C;
30
    border-right: solid thin #2C2C2C;
31
    background: linear-gradient(to right, #867163 0%,#f8e0cb 40%, #eed3be 50%, #4c3b30 100%);
32
    z-index: 2;
33
}
34
.sleeve:before {
35
    position: absolute;
36
    content: "";
37
    top: 8px;
38
    left: 5px;
39
    width: 34px;
40
    height: 8px;
41
    border-top: solid 3px rgba(0,0,0,.07);
42
    border-bottom: solid 3px rgba(0,0,0,.07);
43
    border-radius: 2px;
44
}
45
.shaft {
46
    position: relative;
47
    top: 0;
48
    width: 21px;
49
    border-bottom-left-radius: 10px;
50
    border-bottom-right-radius: 10px;
51
    z-index: 1;
52
}
53
.shaft:before,
54
.shaft:after {
55
    position: absolute;
56
    content: "";
57
    width: 10px;
58
}
59
.shaft,
60
.shaft:before,
61
.shaft:after {
62
    top: 0;
63
    height: 175px;
64
}
65
.shaft:before {
66
    left: -12px;
67
    border-top-left-radius: 4px;
68
    border-bottom-right-radius: 10px;
69
}
70
.shaft:after {
71
    left: 21px;
72
    border-top-right-radius: 2px;
73
    border-bottom-left-radius: 8px;
74
}
75
.point {
76
    position: relative;
77
    top: -2px;
78
    left: -12px;
79
    width: 0;
80
    height: 0;
81
    border-top: solid 40px rgba(202,176,147,1);
82
    border-right: solid 22.5px rgba(202,176,147,0);
83
    border-left: solid 22.5px rgba(202,176,147,0);
84
}
85
.point:before {
86
    position: absolute;
87
    content: "";
88
    top: -50px;
89
    left: -18px;
90
    width: 35px;
91
    height: 10px;
92
    background: rgba(197,173,145,1);
93
}
94
.point:after {
95
    position: absolute;
96
    content: "";
97
    top: -49px;
98
    left: -15px;
99
    width: 30px;
100
    height: 40px;
101
    background: linear-gradient(to right,  rgba(208,181,159,0.65) 0%,rgba(253,231,213,1) 40%,rgba(240,187,162,0.5) 85%,rgba(197,173,145,1) 100%);
102
    border-radius: 50% / 0% 0% 80% 80%;
103
}
104
.lead {
105
    position: relative;
106
    top: -14px;
107
    left: 3px;
108
    width: 0;
109
    height: 0;
110
    border-top: solid 13px #000000;
111
    border-right: solid 7px rgba(255,255,255,0);
112
    border-left: solid 7px rgba(255,255,255,0);
113
    z-index: 1;
114
}
115
.lead:before {
116
    position: absolute;
117
    content: "";
118
    top: -13px;
119
    left: -5px;
120
    border-top: solid 10px rgba(255,255,255,.6);
121
    border-right: solid 0 rgba(0,255,0,0);
122
    border-left: solid 5px rgba(255,255,255,0);
123
}
124
.lead:after {
125
    position: absolute;
126
    content: "Ideas";
127
    top: -80px;
128
    left: -53px;
129
    width: 105px;
130
    display: block;
131
    color: #000000;
132
    font: small-caps 14px 'helvetica';
133
    text-transform: lowercase;
134
    text-align: right;
135
    letter-spacing: 1px;
136
    text-shadow: 1px 1px 0px rgba(255,255,255,.35);
137
    -webkit-transform: rotate(-90deg);
138
    -moz-transform: rotate(-90deg);
139
    -o-transform: rotate(-90deg);
140
    -ms-transform: rotate(-90deg);
141
    transform: rotate(-90deg);
142
}
143
 
144
#pencil_wrapper.green .shaft {
145
    background-color: #2b8122;
146
    border-bottom: solid 6px #2b8122;
147
}
148
#pencil_wrapper.green .shaft:before {
149
    background-color: #75df25;
150
    border-right: solid 2px #75df25;
151
    border-bottom: solid 4px #75df25;
152
    border-left: solid thin #46b100;
153
}
154
#pencil_wrapper.green .shaft:after {
155
    background-color: #1e7605;
156
    border-right: solid 1px #0d6504;
157
    border-bottom: solid 4px #1e7605;
158
    border-left: solid thin #1e7605;
159
}
160
 
 

Css Pencil

CSSDeck G+