396 views
CSS
1.loader { 2 height: 20vh; 3 width: 20vh; 4 max-height: 480px; 5 min-width: 480px; 6}
HTML
1<svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg" class="loader"> 2<defs> 3 <path id="move-path" d="M102.546 83.5C109.859 70.8333 128.141 70.8333 135.454 83.5L157.971 122.5C165.284 135.167 156.143 151 141.517 151H96.4833C81.8571 151 72.7158 135.167 80.0289 122.5L102.546 83.5Z" fill="#D9D9D9"></path> 4 <filter id="goo"> 5 <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"></feGaussianBlur> 6 <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 60 -32"></feColorMatrix> 7 </filter> 8</defs> 9<g filter="url(#goo)"> 10 <circle cx="119" cy="74" r="20" stroke="#6f8191" stroke-width="8"></circle> 11 <circle cx="79" cy="141" r="20" stroke="#6f8191" stroke-width="8"></circle> 12 <circle cx="157" cy="141" r="20" stroke="#6f8191" stroke-width="8"></circle> 13 <circle cx="0" cy="0" r="14" fill="#6f8191"> 14 <animateMotion path="M102.546 83.5C109.859 70.8333 128.141 70.8333 135.454 83.5L157.971 122.5C165.284 135.167 156.143 151 141.517 151H96.4833C81.8571 151 72.7158 135.167 80.0289 122.5L102.546 83.5Z" dur="2s" repeatCount="indefinite"></animateMotion> 15 </circle> 16</g> 17</svg> 18 19