When I saw Google's new Material You update to their popular Material Design framework, I was very excited about some of the bold choices they made, it looks really different.
If you haven't seen it yet, check our their blog post at https://material.io/blog/announcing-material-you
This video they included particularly inspired me, you can see a wavy seek bar in the bottom left hand corner:
I decided to try and recreate this seek bar using html, css and javascript, and this is what I got at the end:
My implementation is definitely not perfect, but I think it does a pretty good job of replicating the video, and it's responsive! Try moving the progress handle around.
In order to create this effect, I'm generating an animated SVG element using javascript to make sure it responds to the position of the seek bar and is responsive when the screen width is smaller. I suggest you take a look at the MDN docs for SVG paths to understand how it works, but essentially I'm using the Q operator to emulate a sine wave, and giving it three steps to animate between to emulate the wave travelling from left to right.
I tried to make this seek bar accessible as well, but I'm not an expert on aria properties 😅 Let me know if you attempt this a different way or have any questions. What's your favourite new Material You component?
Top comments (1)
See this library for Android and Compose