Modal

Modals stop the user for an important change or decision.

Best Practices

Use Modals sparingly.
Modals are meant to disrupt the user’s flow for important choices.
On a small phone, all content and all user interface elements must be seen within a single screen height.
Any buttons that close or cancel the modal should get initial focus.
Modals hold focus until the action is completed or dismissed.
Do not use modals to notify a user of a successful or unsuccessful action; Use a Toast instead.
Do not use forms in a modal.
Tabbing should only cycle between the buttons inside the Modal.
For accessibility reasons do not close the modal by tapping the modal backdrop.
For accessibility reasons pressing ESC should close or cancel the modal.

See the Pen Loading Animation by LA Gov Design Team (@lagovdesignteam) on CodePen.