Hi all - I’ve noticed a very interesting search indicator on Twitch but couldn’t fathom how to replicate this style of progress indication, therefore wondering if someone could point me in the right direction.
To explain, when you begin typing into the ‘Friends Search’ input field, a small dot animates it’s way left and right along the bottom-border of the text input field.
Does anyone know how this could be achieved?
Many thanks in advance 
Hey, @meowsiclez!
This is a forum for third party developers building on the Twitch platform. Your question is more general around front-end development. I would recommend StackOverflow for questions of that nature.
Having said that, my guess is that it is simply an HTML element with ::after pseudo-element that is animated using CSS animation. The pseudo-element will be absolutely positioned to make it overlap the input box. That’s how I would implement it. 
Edit: I was interested in how to accomplish this, so here is a JSFiddle: https://jsfiddle.net/ztd76L63/
Hi Dallas,
I really appreciate this response! I had posted on StackOverflow before this but it was ignored unfortunately. Also the Fiddle is VERY much appreciated.
Understood. SO can be good and bad depending upon the community. Glad the Fiddle helped!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
