2d:null 2e:["$","title",null,{"children":"Hello HTML Progress Element | Andrew Wooldridge | Observable"}] 33:[] 31:{"id":"c7261ea400d5559b","slug":"hello-html-progress-element","title":"Hello HTML Progress Element","thumbnail":"c0272090cd39c0eae456d91882ec9ff195148b7d7af1f402a354b9d65d4eae82","access_level":"public","create_time":"$D2021-02-13T19:22:21.991Z","update_time":"$D2021-02-13T19:41:01.244Z","view_time":null,"first_public_time":"$D2021-02-13T19:36:26.885Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"2d6b5d0f9034e560","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":"starter_2024"},"version":30,"publish_version":30,"role":null,"authored":false,"authors":[{"type":"individual","id":"b8d79ca293134247","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":null}],"members":[{"type":"individual","id":"b8d79ca293134247","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"99e6b8beaf232e00","slug":"html-elements","title":"HTML Elements","owner":{"id":"2d6b5d0f9034e560","login":"triptych","name":"Andrew Wooldridge"}},"type":"notebook","body":{"title":"Hello HTML Progress Element","cells":[{"id":0,"value":"md`# Hello HTML Progress Element`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"html`

Some code used from --> https://observablehq.com/@mbostock/showing-progress and learnings from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress

Re run cell below to see progress change.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"viewof progress = {\n const progressMeter = html``\n yield progressMeter;\n let sum = 0;\n for (let i = 0, n = 1000; i < n; ++i) {\n sum += 1;\n progressMeter.value = sum;\n await new Promise(requestAnimationFrame);\n }\n progressMeter.value = sum;\n return progressMeter;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"