Loader by gustavofusco
#e8e8e8
1.pencil { 2 display: block; 3 width: 10em; 4 height: 10em; 5} 6 7.pencil__body1, 8.pencil__body2, 9.pencil__body3, 10.pencil__eraser, 11.pencil__eraser-skew, 12.pencil__point, 13.pencil__rotate, 14.pencil__stroke { 15 animation-duration: 3s; 16 animation-timing-function: linear; 17 animation-iteration-count: infinite; 18} 19 20.pencil__body1, 21.pencil__body2, 22.pencil__body3 { 23 transform: rotate(-90deg); 24} 25 26.pencil__body1 { 27 animation-name: pencilBody1; 28} 29 30.pencil__body2 { 31 animation-name: pencilBody2; 32} 33 34.pencil__body3 { 35 animation-name: pencilBody3; 36} 37 38.pencil__eraser { 39 animation-name: pencilEraser; 40 transform: rotate(-90deg) translate(49px,0); 41} 42 43.pencil__eraser-skew { 44 animation-name: pencilEraserSkew; 45 animation-timing-function: ease-in-out; 46} 47 48.pencil__point { 49 animation-name: pencilPoint; 50 transform: rotate(-90deg) translate(49px,-30px); 51} 52 53.pencil__rotate { 54 animation-name: pencilRotate; 55} 56 57.pencil__stroke { 58 animation-name: pencilStroke; 59 transform: translate(100px,100px) rotate(-113deg); 60} 61 62/* Animations */ 63@keyframes pencilBody1 { 64 from, 65 to { 66 stroke-dashoffset: 351.86; 67 transform: rotate(-90deg); 68 } 69 70 50% { 71 stroke-dashoffset: 150.8; 72 /* 3/8 of diameter */ 73 transform: rotate(-225deg); 74 } 75} 76 77@keyframes pencilBody2 { 78 from, 79 to { 80 stroke-dashoffset: 406.84; 81 transform: rotate(-90deg); 82 } 83 84 50% { 85 stroke-dashoffset: 174.36; 86 transform: rotate(-225deg); 87 } 88} 89 90@keyframes pencilBody3 { 91 from, 92 to { 93 stroke-dashoffset: 296.88; 94 transform: rotate(-90deg); 95 } 96 97 50% { 98 stroke-dashoffset: 127.23; 99 transform: rotate(-225deg); 100 } 101} 102 103@keyframes pencilEraser { 104 from, 105 to { 106 transform: rotate(-45deg) translate(49px,0); 107 } 108 109 50% { 110 transform: rotate(0deg) translate(49px,0); 111 } 112} 113 114@keyframes pencilEraserSkew { 115 from, 116 32.5%, 117 67.5%, 118 to { 119 transform: skewX(0); 120 } 121 122 35%, 123 65% { 124 transform: skewX(-4deg); 125 } 126 127 37.5%, 128 62.5% { 129 transform: skewX(8deg); 130 } 131 132 40%, 133 45%, 134 50%, 135 55%, 136 60% { 137 transform: skewX(-15deg); 138 } 139 140 42.5%, 141 47.5%, 142 52.5%, 143 57.5% { 144 transform: skewX(15deg); 145 } 146} 147 148@keyframes pencilPoint { 149 from, 150 to { 151 transform: rotate(-90deg) translate(49px,-30px); 152 } 153 154 50% { 155 transform: rotate(-225deg) translate(49px,-30px); 156 } 157} 158 159@keyframes pencilRotate { 160 from { 161 transform: translate(100px,100px) rotate(0); 162 } 163 164 to { 165 transform: translate(100px,100px) rotate(720deg); 166 } 167} 168 169@keyframes pencilStroke { 170 from { 171 stroke-dashoffset: 439.82; 172 transform: translate(100px,100px) rotate(-113deg); 173 } 174 175 50% { 176 stroke-dashoffset: 164.93; 177 transform: translate(100px,100px) rotate(-113deg); 178 } 179 180 75%, 181 to { 182 stroke-dashoffset: 439.82; 183 transform: translate(100px,100px) rotate(112deg); 184 } 185}
14K views
14K views
MIT License