Design Technologist
loading({
/** @type string */
style: "",
/** @type number */
size: 20,
/** @type undefined|boolean|string|string[] */
class: ""
})
function classes(...classes) {
return classes.filter(Boolean).join(" ");
}
loading = (props = {}) => {
const { class: c, size = 20, style = "" } = props;
const id = DOM.uid().id;
const loadingStyle = [0, 83, 166, 250, 333, 416, 500, 583, 666, 750, 833, 916]
.map((mil, i) => {
const p = mil / 10; // opacity: 0.6
const initO = (0.6 * p) / 100;
const points = [
{ p: 0, o: initO },
{ p, o: 0 },
{ p: p + 0.1, o: 0.6 },
{ p: 100, o: initO }
]
.sort((a, b) => a.p - b.p)
// filter unique p values
.filter((v, i, a) => i === 0 || v.p !== a[i - 1].p);
return `
@keyframes spin-${id}-${i} {
${points.map(({ p, o }) => `${p}% { opacity: ${o}; }`).join("\n")}
}
`;
})
.join("\n");
return html`
<style>${loadingStyle}</style>
<svg
class="${classes(c)}"
style="${style}"
width="${size}"
height="${(size / 20) * 21}"
viewBox="0 0 20 21"
xmlns="http://www.w3.org/2000/svg"
>
<g fill="currentColor">
<path
d="M6.366 1.706a1 1 0 10-1.732 1l1.5 2.598a1 1 0 001.732-1l-1.5-2.598z"
style="animation:spin-${id}-11 1000ms linear infinite normal forwards"
opacity="0"
/>
<path
d="M1.706 6.366l2.598 1.5a1 1 0 101-1.732l-2.598-1.5a1 1 0 10-1 1.732z"
style="animation:spin-${id}-10 1000ms linear infinite normal forwards"
opacity="0"
/>
<path
d="M5 10a1 1 0 00-1-1H1a1 1 0 000 2h3a1 1 0 001-1z"
style="animation:spin-${id}-9 1000ms linear infinite normal forwards"
opacity="0"
/>
<path
d="M5.67 12.5a1 1 0 00-1.366-.366l-2.598 1.5a1 1 0 101 1.732l2.598-1.5A1 1 0 005.67 12.5z"
style="animation:spin-${id}-8 1000ms linear infinite normal forwards"
opacity="0"
/>
<path
d="M7.5 14.33a1 1 0 00-1.366.366l-1.5 2.598a1 1 0 101.732 1l1.5-2.598A1 1 0 007.5 14.33z"
style="animation:spin-${id}-7 1000ms linear infinite normal forwards"
opacity="0"
/>
<path
d="M10 15a1 1 0 00-1 1v3a1 1 0 102 0v-3a1 1 0 00-1-1z"
style="animation:spin-${id}-6 1000ms linear infinite normal forwards"
opacity="0"
/>
<path
d="M13.866 14.696a1 1 0 00-1.732 1l1.5 2.598a1 1 0 101.732-1l-1.5-2.598z"
style="animation:spin-${id}-5 1000ms linear infinite normal forwards"
opacity="0"
/>
<path
d="M18.294 13.634l-2.598-1.5a1 1 0 10-1 1.732l2.598 1.5a1 1 0 101-1.732z"
style="animation:spin-${id}-4 1000ms linear infinite normal forwards"
opacity="0"
/>
<path
d="M19 9h-3a1 1 0 000 2h3a1 1 0 000-2z"
style="animation:spin-${id}-3 1000ms linear infinite normal forwards"
opacity="0"
/>
<path
d="M14.33 7.5a1 1 0 001.366.366l2.598-1.5a1 1 0 10-1-1.732l-2.598 1.5A1 1 0 0014.33 7.5z"
style="animation:spin-${id}-2 1000ms linear infinite normal forwards"
opacity="0"
/>
<path
d="M12.5 5.67a1 1 0 001.366-.366l1.5-2.598a1 1 0 10-1.732-1l-1.5 2.598A1 1 0 0012.5 5.67z"
style="animation:spin-${id}-1 1000ms linear infinite normal forwards"
opacity="0"
/>
<path
d="M10 0a1 1 0 00-1 1v3a1 1 0 002 0V1a1 1 0 00-1-1z"
style="animation:spin-${id}-0 1000ms linear infinite normal forwards"
opacity="0"
/>
</g>
</svg>
`;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
