Loader by mahdisad19
#e8e8e8
1.loader { 2 --path: #d99058; 3 --dot: #29c966; 4 --duration: 3s; 5 width: 44px; 6 height: 44px; 7 position: relative; 8} 9 10.loader:before { 11 content: ""; 12 width: 6px; 13 height: 6px; 14 border-radius: 50%; 15 position: absolute; 16 display: block; 17 background: var(--dot); 18 top: 37px; 19 left: 19px; 20 transform: translate(-18px, -18px); 21 animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) 22 infinite; 23} 24 25.loader svg { 26 display: block; 27 width: 100%; 28 height: 100%; 29} 30 31.loader svg rect, 32.loader svg polygon, 33.loader svg circle { 34 fill: none; 35 stroke: var(--path); 36 stroke-width: 10px; 37 stroke-linejoin: round; 38 stroke-linecap: round; 39} 40 41.loader svg polygon { 42 stroke-dasharray: 145 76 145 76; 43 stroke-dashoffset: 0; 44 animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) 45 infinite; 46} 47 48.loader svg rect { 49 stroke-dasharray: 192 64 192 64; 50 stroke-dashoffset: 0; 51 animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite; 52} 53 54.loader svg circle { 55 stroke-dasharray: 150 50 150 50; 56 stroke-dashoffset: 75; 57 animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) 58 infinite; 59} 60 61.loader.triangle { 62 width: 48px; 63} 64 65.loader.triangle:before { 66 left: 21px; 67 transform: translate(-10px, -18px); 68 animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) 69 infinite; 70} 71 72@keyframes pathTriangle { 73 33% { 74 stroke-dashoffset: 74; 75 } 76 77 66% { 78 stroke-dashoffset: 147; 79 } 80 81 100% { 82 stroke-dashoffset: 221; 83 } 84} 85 86@keyframes dotTriangle { 87 33% { 88 transform: translate(0, 0); 89 } 90 91 66% { 92 transform: translate(10px, -18px); 93 } 94 95 100% { 96 transform: translate(-10px, -18px); 97 } 98} 99 100@keyframes pathRect { 101 25% { 102 stroke-dashoffset: 64; 103 } 104 105 50% { 106 stroke-dashoffset: 128; 107 } 108 109 75% { 110 stroke-dashoffset: 192; 111 } 112 113 100% { 114 stroke-dashoffset: 256; 115 } 116} 117 118@keyframes dotRect { 119 25% { 120 transform: translate(0, 0); 121 } 122 123 50% { 124 transform: translate(18px, -18px); 125 } 126 127 75% { 128 transform: translate(0, -36px); 129 } 130 131 100% { 132 transform: translate(-18px, -18px); 133 } 134} 135 136@keyframes pathCircle { 137 25% { 138 stroke-dashoffset: 125; 139 } 140 141 50% { 142 stroke-dashoffset: 175; 143 } 144 145 75% { 146 stroke-dashoffset: 225; 147 } 148 149 100% { 150 stroke-dashoffset: 275; 151 } 152} 153 154.loader { 155 display: inline-block; 156 margin: 0 16px; 157} 158
170 views
Variation of aloader
MIT License