30:T71a,{ let [dasharray, rotate, stroke, all] = document.querySelectorAll('circle'); const clock = document.querySelector('.clock'); let start = 0; let deg = -90; const [minStroke, maxStroke] = [2,6]; let strokeWidth = minStroke; let then = Date.now(); const duration = 1250; let aStart, rafID; function frame(time) { if(!aStart) { aStart = time; rafID = window.requestAnimationFrame(frame); return; } const progress = (time - aStart) / duration; let deg = progress * 360; let transform; if (progress < 1) { rotate.style.transform = `rotate(${deg}deg)`; } else { aStart = null; } rafID = window.requestAnimationFrame(frame); } function sine() { let now = Date.now(); let delta = (now - then) / duration; //console.log({delta}); then = now; const pos = 90 * Math.sin( start ); let width = Math.abs(maxStroke * Math.sin( strokeWidth )); if (width >= maxStroke || width <= minStroke) { width = 2; } if(dasharray && rotate && stroke) { dasharray.setAttribute('stroke-dasharray', `${Math.abs(pos)} 360`); //rotate.style.transform = `rotate(${deg}deg)`; stroke.setAttribute('stroke-width', width); all.setAttribute('stroke-dasharray', `${Math.abs(pos)} 360`); all.style.transform = `rotate(${deg}deg)`; all.setAttribute('stroke-width', width); } start += 0.05; strokeWidth += 0.05; if (deg >= 270) { deg = -90; } deg += 360 / (duration / (duration * delta)); window.requestAnimationFrame(sine); } //const animDashArray( sine(); rafID = window.requestAnimationFrame(frame); setTimeout(() => clock.classList.add('running'), 0); //window.setInterval( sine, 1250/iterations ); }31:T5b2,html``32:[] 2e:{"title":"Loader Spinner","cells":[{"id":0,"value":"md`# Loader Spinner\nGraph out and visualise the sine wave used to animate the spinner loader.\n\n![](${gif})\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"md`\n In the gif above you can see the circle has some weight to it like it builds momentum as it's falling and slows again as it reaches the top.\n\nWe can express this via a sine wave.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"sinewave = {\n const svg = d3.select(DOM.svg(width, height));\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n \n svg.append(\"path\")\n .datum(data)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"d\", line);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"data = {\n let counter = 0;\n const wave = [];\n const increase = Math.PI / iterations;\n\n for (let i = 0; i <= 1; i += 1/iterations ) {\n let x = i;\n let y = Math.sin(counter);\n wave.push([x, y]);\n counter += increase;\n }\n \n // Last one should be absolute value\n wave[wave.length - 1] = [1,0];\n\n return wave;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"{\n const dot = document.querySelector('.dot');\n let start = 0;\n \n function sine(){\n const pos = 50 * Math.sin( start ) + 110;\n if(dot && dot.style) {\n dot.style.transform = `translate3d(0,${pos}px,0)`;\n console.log(50*Math.sin(start));\n }\n start += 0.05;\n }\n window.setInterval( sine, 1250/iterations );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"{\n const spinner = document.querySelector('.spinner');\n let start = Date.now();\n \n function sine(){\n const pos = 50 * Math.sin( start );\n var delta = (Date.now() - start);\n if(spinner && spinner.style) {\n spinner.style.transform = `rotate(${delta * 5/iterations}deg)`;\n }\n \n }\n window.setInterval( sine, 1250/iterations );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":247,"value":"html`\n

\n\n

\n\n\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"gif = 'https://garden.zendesk.com/react-components-archive/d3d8b5fb6e150110e7268aed6c76d887.gif'","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"width = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"iterations = 60","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"x = d3.scaleLinear()\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"y = d3.scaleLinear()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(10).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(10).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"line = d3.line()\n .x(d => x(d[0]))\n .y(d => y(d[1]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}