Thinking on ways to solve a LOADING BAR

Channel:
Chrome for Developers
Subscribers:
791,000
Published on ● Video Link: https://www.youtube.com/watch?v=TD1QxlGgIPk


Duration: 20:32
16,365 views
486

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:
Read along → https://goo.gle/3CKFoUs
Try a demo → https://goo.gle/3KRLo0F
Get the source → https://goo.gle/3i7PgOA

Watch more GUI Challenges → https://goo.gle/GUIchallenges
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs

#GUIchallenges #CSS #ChromeDeveloper



product: Chrome - General; fullname: Adam Argyle;



Other Videos By Chrome for Developers


2022-05-03Is .css a bad idea? Is inlining the way forward? | HTTP 203
2022-04-27Adaptive frosted glass #Shorts
2022-04-21Chrome 101 - What’s New in DevTools
2022-04-13Thinking on ways to solve DIALOG
2022-03-304 lines of CSS for a vertical responsive slideshow #Shorts
2022-03-29New in Chrome 100: User Agent string updates, Multi-screen window placement API, and more!
2022-03-29What key was pressed? (You won't believe how keyboard events work) | HTTP 203
2022-03-24Chrome 100 - What’s New in DevTools
2022-03-23Cache your fonts, images & pages - Unpacking the Workbox
2022-03-18FLEDGE demo walkthrough | What is the Privacy Sandbox?
2022-03-16Thinking on ways to solve a LOADING BAR
2022-03-15Building VR and AR experiences using HTML | HTTP 203
2022-03-10CSS Grid debugging tools | DevTools Tips
2022-03-08Chrome 99 - What’s New in DevTools
2022-03-01New in Chrome 99: CSS Cascade Layers, Show Picker, and more!
2022-02-10CSS Flexbox debugging tools | DevTools Tips
2022-02-09Thinking on ways to solve SVG FAVICON
2022-02-01New in Chrome 98: Per-element opt-out for auto-dark, COLRv1, and more!
2022-01-27Chrome 98 - What’s New in DevTools
2022-01-19Thinking on ways to solve a DARK/LIGHT THEME SWITCH
2022-01-13Discover and fix low contrast text with DevTools | DevTools Tips


Tags:
purpose: Educate
pr_pr: Chrome
series: GUI Challenges
gui challenges
css
css tutorial
how to use css
what is css
chrome developer
chrome developers
google chrome developer
google chrome developers
developer
developers
google chrome
chrome
google
Adam Argyle
type: Screencast (10-20min)
GDS: Yes