Thinking on ways to solve a LOADING BAR

In today's GUI Challenge, @AdamArgyleInk shows how to style the built-in progress element and how to implement great screen reader UX, light and dark adaptive colors, custom animations and more.

Chapters:
0:00 - Introduction
0:27 - Overview
1:11 - Focus Visible
2:55 - Cross Browser
3:36 - Screen Reader
6:22 - HTML
7:45 - Screen Reader Only
9:12 - CSS
17:16 - JavaScript
19:44 - Outro

Resources:

#GUIchallenges #CSS #ChromeDeveloper

product: Chrome - General; fullname: Adam Argyle;

[brentmcd]

value of the progress bar are always a good idea! good work !

[qzbnyv]

Always a fan of your videos, Adam. They’re very helpful. I’m glad you get to make them.

[roobs]

Is there a guide to get set up with something akin to the 'debugging corner' in this video? If not, please can we have one?

[alystair]

Heads up Adam, although visually appealing, the dark grey syntax formatting contrast is a bit too low on mobile - consider lightening it a smidge :D

[YashRao]

Might want to have logic to remove aria-busy if value is 1, else it won’t be removed?

[Kamil_Ocean]

Thanks a lot, it's a good and helpful video. How do you resize the DOM element by mouse at 12:30 time on your video?

[drmonochromer]

very dark background and very hard to see parenthesis

[THEapphacker]

Is focusing the progress bar necessary? I thought there were aria attributes to announce this to the user instead (or that progress element would implicitly do this).

[Frexuz]

Why isnt border radius just half of the track height? I rly dislike when its bigger than it's own possible max value :P 50% is always correct for uniform shapes.

[giorgiarabuli]

can someone tell me what app he is using for testing on multiple devices

[jasondunken]

Nice presentation. But I really, really don't like your editor's color scheme. Having (){}'"; barely visible would drive me crazy. I didn't see them at first and was like, "what am I even looking at". Just my 2c.

[khemmahato]

Ha ha ha dont use loading bar user will think website is slow i warn.