Css is not my cup of tea !

Question

In below code i just want to make a simple loading kind of animation starting from second part of my capsule on click of emoji in the first part of capsule ,i tried to make but failed i need that animation to be smooth and to fill the second part of capsule completely with desired colour
https://code.sololearn.com/WwXbZ0o0EVOb/?ref=app

Answer 1

You can consider fixed the linear-gradient but animate background-position instead,
Use background shorthand background:linear-gradient(to left,white ,yellow) left center/0% no-repeat; where 0% is the background-position.

Use background-position 200% if want to fully cover up background with full color at the end of animation.

https://code.sololearn.com/WvUoZtNUf537/?ref=app

Answer 2

Calviղ wow ! You made it perfect though the value of background property is still confusing to me but the output is perfect 👏👏👏👏👏😊😊

Answer 3

Not bad at all.