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