“it’s the logic and the concept of designing everything.”
I think the examples are where this article falls over. Obviously incredible detail has been put into the progress loader in the first example, but by doing so it breaks the basic browser accessibility of showing which element has tab-focus for keyboard users. Also something to consider is that buttons with loaders like this are best used for ajax calls, but if the progress meter is done via CSS active state alone, you could end up in the situation where the call has failed but the active state is still telling the user something’s happening. It’s much safer to make progress meters programatic, so that you can set timeouts for failed calls etc.
“it’s the logic and the concept of designing everything.”
I think the examples are where this article falls over. Obviously incredible detail has been put into the progress loader in the first example, but by doing so it breaks the basic browser accessibility of showing which element has tab-focus for keyboard users. Also something to consider is that buttons with loaders like this are best used for ajax calls, but if the progress meter is done via CSS active state alone, you could end up in the situation where the call has failed but the active state is still telling the user something’s happening. It’s much safer to make progress meters programatic, so that you can set timeouts for failed calls etc.