indicators and status

[YuezhenQin]

1. Badge 标记

Badges are visual indicators that appear for new notifications, counts, or statuses.

2. Empty state

3. Placeholder

A placeholder is a shimmering block that takes the place of content before it appears on the screen. Placeholder components provide visual feedback that something is loading and help reduce perceived wait times.

The shimmer component is a 45 degree angled gradient color block that animates 40% gradient highlight in a 1-second loop.

4. Progress circle

5. Progress bar

6. Progress steps

$$ 7. Tag

[YuezhenQin]

Progress bar

Anatomy

At minimum, a progress bar component contains a linear background track and a progress indicator. An optional label can accompany the bar below.

determinate progress bar	indeterminate progress bar	stepped progress bar

Usage

Use progress bars to show progress in terms of time, goals and objectives, or steps. 

There are 3 types of progress bars: indeterminate, determinate, and stepped. Depending on the use case, one bar type may be more appropriate than others.	Progress bar type	Wait time	Duration	# of steps	Behavior
Indeterminate	Unknown	Short	Single	Pulses continuously
Determinate	Known	Long	Single or multiple	Fills the bar from start to end
Stepped	Known or unknown	Long	Multiple	Each segment can pulse or fill from start to end until all steps are complete

	Duration	Delay	Ease	Opaque color position	Transparent color position
Enter	500ms	0ms	quintic ease-in-and-out	Center (0.5) -> Sides (0.0, 1.0)	Sides (0.0, 1.0)
Exit	500ms	0ms	quintic ease-in-and-out	Sides (0.0, 1.0)	Center (0.5) -> Sides (0.0, 1.0)

[YuezhenQin]

tmp

[YuezhenQin]

tmp

[YuezhenQin]

placeholder

A placeholder is a shimmering block that takes the place of content before it appears on the screen. Placeholder components provide visual feedback that something is loading and help reduce perceived wait times.

streaming HTML