.loader{--path:#2f3545;--dot:#5628ee;--duration:3s;width:44px;height:44px;position:relative}.loader:before{content:"";background:var(--dot);width:6px;height:6px;animation:dotRect var(--duration)cubic-bezier(.785,.135,.15,.86)infinite;border-radius:50%;display:block;position:absolute;top:37px;left:19px;transform:translate(-18px,-18px)}.loader svg{width:100%;height:100%;display:block}.loader svg rect,.loader svg polygon,.loader svg circle{fill:none;stroke:var(--path);stroke-width:10px;stroke-linejoin:round;stroke-linecap:round}.loader svg polygon{stroke-dasharray:145 76 145 76;stroke-dashoffset:0;animation:pathTriangle var(--duration)cubic-bezier(.785,.135,.15,.86)infinite}.loader svg rect{stroke-dasharray:192 64 192 64;stroke-dashoffset:0;animation:3s cubic-bezier(.785,.135,.15,.86) infinite pathRect}.loader svg circle{stroke-dasharray:150 50 150 50;stroke-dashoffset:75px;animation:pathCircle var(--duration)cubic-bezier(.785,.135,.15,.86)infinite}.loader.triangle{width:48px}.loader.triangle:before{animation:dotTriangle var(--duration)cubic-bezier(.785,.135,.15,.86)infinite;left:21px;transform:translate(-10px,-18px)}@keyframes pathTriangle{33%{stroke-dashoffset:74px}66%{stroke-dashoffset:147px}to{stroke-dashoffset:221px}}@keyframes dotTriangle{33%{transform:translate(0)}66%{transform:translate(10px,-18px)}to{transform:translate(-10px,-18px)}}@keyframes pathRect{25%{stroke-dashoffset:64px}50%{stroke-dashoffset:128px}75%{stroke-dashoffset:192px}to{stroke-dashoffset:256px}}@keyframes dotRect{25%{transform:translate(0)}50%{transform:translate(18px,-18px)}75%{transform:translateY(-36px)}to{transform:translate(-18px,-18px)}}@keyframes pathCircle{25%{stroke-dashoffset:125px}50%{stroke-dashoffset:175px}75%{stroke-dashoffset:225px}to{stroke-dashoffset:275px}}.loader{margin:0 16px;display:inline-block}