Component proposal: Spinner

[Gennady77]

I try to show the process of loading data and didn't find spinners in the component list. They aren't provided in the system?

[mejiaj]

How would this component work? File input uses a spinner by adding the is-loading class. The SVG is is called loader.svg

[mgifford]

This is how CMSgov does it:
https://design.cms.gov/components/spinner/
https://github.com/CMSgov/design-system/blob/master/packages/design-system/src/components/Spinner/Spinner.tsx

or from react:
https://react-bootstrap.github.io/components/spinners/

or from Salesforce
https://www.lightningdesignsystem.com/components/spinners/

These look like a good solutions:
https://codeburst.io/how-to-create-a-simple-css-loading-spinner-make-it-accessible-e5c83c2e464c
https://codepen.io/stuartjnelson/pen/xWyLGR

There are others with web components, but we're not set up for that yet.

[werdnanoslen]

I'd also suggest expanding this to specifying loading patterns generally:

1. Inline loading (especially short content, table data, etc)
2. Interaction loading (like CMS' buttons above)
3. Full-page loading (spinner and dark background on full page)

I used to use & work on IBM's Carbon DS and really like their page describing everything: https://carbondesignsystem.com/patterns/loading-pattern/

[brunerae]

Adding a link to a recently-created Issue that we've closed in favor of this discussion. #5887

[szeinedd-nrel]

any update on this?

[mejiaj]

We're currently working on the Glossary and Pre-fill pattern proposals.

This one isn't quite there yet and is missing some key info. There's guidance in Getting started with USWDS component discussions - What your discussion needs to help get this moving forward.