@property --loading-angle{syntax:"<angle>";inherits:false;initial-value:0deg}.loading-spinner{--loading-color:var(--primary);--border-width:3px;--size:40px;--height:200px;display:flex;justify-content:center;align-items:center;width:100%;height:var(--height);background-color:var(--bg-800);&:after{display:block;content:"";width:var(--size);height:var(--size);border-width:var(--border-width);border-style:solid;border-image:conic-gradient(from var(--loading-angle),transparent 25%,var(--loading-color)) 1;animation:loading-spin 2.5s linear infinite}}@keyframes loading-spin{0%{transform:rotate(0);--loading-angle:0deg}to{transform:rotate(1turn);--loading-angle:5turn}}