Loader by JaydipPrajapati1910
#e8e8e8
1.loader { 2 position: absolute; 3 top: 50%; 4 left: 50%; 5 transform: translate(-50%,-50%); 6 animation: animate 8s linear infinite; 7} 8 9.pencil { 10 width: 150px; 11 background: #ffc334; 12 border-top: 10px solid #ffd268; 13 border-bottom: 10px solid #e3af38; 14 overflow: hidden; 15 transform-origin: top; 16} 17 18.pencil p { 19 margin: 0; 20 padding: 0; 21 text-align: center; 22 font-size: 12px; 23 line-height: 15px; 24 text-transform: uppercase; 25 font-weight: bold; 26 color: #d09200; 27} 28 29.pencil:before { 30 content: ''; 31 position: absolute; 32 left: -80px; 33 top: 0; 34 border-style: solid; 35 border-color: transparent #e29663 transparent transparent; 36 border-width: 17px 40px 18px; 37} 38 39.pencil:after { 40 content: ''; 41 position: absolute; 42 left: -80px; 43 top: 0; 44 border-style: solid; 45 border-color: transparent #262626 transparent transparent; 46 border-width: 17px 40px 18px; 47 transform: scale(.3); 48} 49 50.top { 51 position: absolute; 52 top: 0; 53 right: 0; 54 height: 35px; 55 width: 35px; 56 background: #ccc; 57 border-top: 10px solid #dedede; 58 border-bottom: 10px solid #b9bfbf; 59} 60 61.top:before { 62 content: ''; 63 position: absolute; 64 top: -10px; 65 right: -100%; 66 width: 150%; 67 height: 100%; 68 background: #d76f6e; 69 border-top: 10px solid #da8e8d; 70 border-bottom: 10px solid #c85957; 71 border-top-right-radius: 5px; 72 border-bottom-right-radius: 5px; 73 z-index: 2; 74} 75 76.stroke { 77 position: absolute; 78 top: 50%; 79 left: calc(100% - 80px); 80 transform: translate(-50%,-50%) rotate(45deg); 81 border: 5px solid transparent; 82 border-left-color: #000; 83 border-top-color: #000; 84 width: 220px; 85 height: 220px; 86 border-radius: 50%; 87 z-index: 1; 88} 89 90@keyframes animate { 91 0% { 92 transform: translate(-50%,-50%) rotate(360deg); 93 } 94 95 100% { 96 transform: translate(-50%,-50%) rotate(0deg); 97 } 98}
782 views
782 views
MIT License