![]() Let’s make the whole thing CSS-onlyĪ “real” loader on the web would likely be powered by JavaScript and reacting to actual data somehow. ![]() text element will be used as the percentage information. bg will be our loading bar that increases over time and our. Pretty cool, huh? This is possible with the awesome magic of mix-blend-mode in CSS. See the Pen A pure CSS loading bar by Robin Rendle ( on CodePen. Here’s what I came up with, but make sure to check this demo on the latest version of Chrome to see everything working correctly: My first thought was this: how can we replicate this design pattern and what might we learn along the way? It seemed like the background was going to make the text invisible once they overlapped, but instead, the text color reversed to be white instead anywhere it overlapped with the background. But that text was the same color as the background of the bar that was filling up from left to right. ![]() The % complete was listed in text in the middle of the bar and didn’t move. Over the weekend I noticed an interesting design for a progress meter in a videogame.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |