2a:null 2b:["$","title",null,{"children":"Indeterminate loading indicator | Máté Homolya | Observable"}] 30:Tc8d,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` `; }31:[] 2e:{"id":"5cc78aa82df3c17f","slug":"loading","title":"Indeterminate loading indicator","thumbnail":"053ba6bc6b75aef6918f1c994a8075a4888538ba3a1ae7865b4a83fa9b13e2c5","access_level":"public","create_time":"$D2022-05-25T16:52:32.316Z","update_time":"$D2022-05-25T17:36:38.472Z","view_time":null,"first_public_time":"$D2022-05-25T17:11:59.976Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"7c53bf02883e536b","login":"mateh","name":"Máté Homolya","avatar_url":"https://avatars-next.observableusercontent.com/6709535e610a611406cd7a7aea5ca7555ca380d04cde563c1ea0c830a30d430c","tier":"starter_2024"},"version":89,"publish_version":89,"role":null,"authored":false,"authors":[{"type":"individual","id":"fe6e56d7dd5ccae5","login":"mateh","name":"Máté Homolya","avatar_url":"https://avatars-next.observableusercontent.com/6709535e610a611406cd7a7aea5ca7555ca380d04cde563c1ea0c830a30d430c","tier":null}],"members":[{"type":"individual","id":"fe6e56d7dd5ccae5","login":"mateh","name":"Máté Homolya","avatar_url":"https://avatars-next.observableusercontent.com/6709535e610a611406cd7a7aea5ca7555ca380d04cde563c1ea0c830a30d430c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"0195db60a63091d1","slug":"utilities","title":"Utilities","owner":{"id":"7c53bf02883e536b","login":"mateh","name":"Máté Homolya"}},"type":"notebook","body":{"title":"Indeterminate loading indicator","cells":[{"id":0,"value":"# Indeterminate loading indicator\n\nUse this notebook to import a loading indicator element into notebooks that take an undetermined amount to load. For determined time intervals, such as a file upload operation, use a determinate progress bar indicator instead.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"html`\n

\n${loading({\n style: \"color: #3b5fc0\",\n size: 160\n})}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":86,"value":"## Usage and default values\n\nThe `loading()` function will will procude the following result:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":81,"value":"loading({\n /** @type string */\n style: \"\",\n /** @type number */\n size: 20,\n /** @type undefined|boolean|string|string[] */\n class: \"\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"function classes(...classes) {\n return classes.filter(Boolean).join(\" \");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":61,"value":"## Appendix\n\nRefer to https://observablehq.com/@mbostock/showing-progress","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2f:"$2e:body"