March 4 | Add native html iframe support (Youtube, Google maps, Webcam), html progress support

[softmarshmallow]

1. iframe support - Youtube, Google maps, Webcam

watch the demo on vimeo

2. Progressbar with native html <progress> tag (indeterminate with accent color)

https://user-images.githubusercontent.com/16307013/160318749-2bcbaaa3-1cab-4e8a-aa47-b1d53fe362e1.mov

we use different strategy for indeterminate (empty value) and standard.

for indeterminate, to preserve the native loading animation, we do not clear the css appearance property, only provide the accent-color property.

References

• https://nikitahl.com/progress-bar-css
• https://freefrontend.com/javascript-progress-bars/
• https://css-tricks.com/html5-progress-element/
• https://www.growingwiththeweb.com/2014/01/the-progress-element.html
• https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/grida/designto-codes/4bbnECMW6i3wtN7tuUoDmavQN7aL
✅ Preview: https://staging-branch-code.grida.co