1.loader {
2  position: relative;
3  height: 200px;
4  width: 200px;
5  border-bottom: 3px solid #ff3d00;
6  box-sizing: border-box;
7  animation: drawLine 4s linear infinite;
8}
9
10.loader:before {
11  content: "";
12  position: absolute;
13  left: calc(100% + 14px);
14  bottom: -6px;
15  width: 16px;
16  height: 100px;
17  border-radius: 20px 20px 50px 50px;
18  background-repeat: no-repeat;
19  background-image: linear-gradient(#ff3d00 6px, transparent 0),
20    linear-gradient(45deg, rgba(0, 0, 0, 0.02) 49%, white 51%),
21    linear-gradient(315deg, rgba(0, 0, 0, 0.02) 49%, white 51%),
22    linear-gradient( to bottom, #ffffff 10%, #ff3d00 10%, #ff3d00 90%, #ffffff 90% );
23  background-size: 3px 3px, 8px 8px, 8px 8px, 16px 88px;
24  background-position: center bottom, left 88px, right 88px, left top;
25  transform: rotate(25deg);
26  animation: pencilRot 4s linear infinite;
27}
28
29@keyframes drawLine {
30  0%, 100% {
31    width: 0px
32  }
33
34  45%, 55% {
35    width: 200px
36  }
37}
38
39@keyframes pencilRot {
40  0%, 45% {
41    bottom: -6px;
42    left: calc(100% + 14px);
43    transform: rotate(25deg);
44  }
45
46  55%,
47  100% {
48    bottom: -12px;
49    left: calc(100% + 16px);
50    transform: rotate(220deg);
51  }
52}