.loader{--animationDuration:3s;position:relative;width:44px;height:44px}.loader:before{content:"";position:absolute;inset:37px auto auto 19px;width:6px;height:6px;border-radius:50%;transform:translate(-18px,-18px);animation:dotRect var(--animationDuration) cubic-bezier(.785,.135,.15,.86) infinite}.dark .loader:before,.loader:before{background:#8c6a4b}.loader svg{width:100%;height:100%}.loader svg :is(rect,polygon,circle){fill:none;stroke:#353535;stroke-width:10px;stroke-linejoin:round;stroke-linecap:round}.dark .loader svg :is(rect,polygon,circle){stroke:#ffffff}.loader svg polygon{stroke-dasharray:145 calc(221 - 145) 145 calc(221 - 145);stroke-dashoffset:0;animation:pathTriangle var(--animationDuration) cubic-bezier(.785,.135,.15,.86) infinite}.loader svg rect{stroke-dasharray:calc(calc(256 / 4) * 3) calc(256 / 4) calc(calc(256 / 4) * 3) calc(256 / 4);stroke-dashoffset:0;animation:pathRect 3s cubic-bezier(.785,.135,.15,.86) infinite}.loader svg circle{stroke-dasharray:calc(calc(200 / 4) * 3) calc(200 / 4) calc(calc(200 / 4) * 3) calc(200 / 4);stroke-dashoffset:75;animation:pathCircle var(--animationDuration) cubic-bezier(.785,.135,.15,.86) infinite}.loader.triangle{width:48px}.loader.triangle:before{left:21px;transform:translate(-10px,-18px);animation:dotTriangle var(--animationDuration) cubic-bezier(.785,.135,.15,.86) infinite}@keyframes pathTriangle{33%{stroke-dashoffset:74}66%{stroke-dashoffset:147}to{stroke-dashoffset:221}}@keyframes dotTriangle{33%{transform:translate(0)}66%{transform:translate(10px,-18px)}to{transform:translate(-10px,-18px)}}@keyframes pathRect{25%{stroke-dashoffset:64}50%{stroke-dashoffset:128}75%{stroke-dashoffset:192}to{stroke-dashoffset:256}}@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:125}50%{stroke-dashoffset:175}75%{stroke-dashoffset:225}to{stroke-dashoffset:275}}