旋转器 Spinners

在检索数据或计算缓慢时显示旋转器。旋转器是动画 svg 或 gif，它们减少了对尴尬的白屏和空白容器的使用，以传达系统正在运行的信息。当页面上的组件在不刷新页面的情况下进行异步更新时, 请使用旋转器。

将旋转器水平和垂直居中在容器内，在未首先应用浅色或深色遮罩的情况下, 不要将旋转器直接放置在页面上的文本或其他视觉元素上。

Spinners：Card

如有必要, 您可以使用文本标签来传达系统正在执行的操作, 例如 "上传数据..."、“加载中”。

List View

旋转加载过程示例：

Loading Example

模板 Stencils

模版是在视觉上传达内容正在加载过程中的占位符。

Stencils

模板抽象地表示生成的内容布局将是什么样子。使用模板进行整页刷新，而不是异步更新。与数十个自旋的旋转器同时或空白的白色页面相比，模板提供了更具视觉吸引力的体验。

当数据需要超过300毫秒才能检索时, 请使用模板。对于小于300毫秒，直接显示数据；如果数据需要301毫秒才能加载，则模板会迅速淡入，然后交叉淡入数据；模版和数据之间没有 "白色闪光灯"。如果组件仅在具有数据时显示，则不要显示模板。

通过使用简单、微妙的形状来指示内容，但不包括按钮和其他 ui 元素的位置，从而保持模板的简单和轻量级。保持形状高度一致，以减少视觉噪音。模板应具有响应性和拉伸性，以填充它们所在的容器；将模板从页面左上角加载到右下角。

表数据加载模板

对于表数据列表，不要用模板填充屏幕。将表数据行模板渲染 20次，并将每行的不透明度降低 5%，以创建从100% 到0% 不透明度的淡入淡出效果，从而产生无限的数据效果。(请参见下面的示例)

Table Data Loading Stencil

记录详细信息模板

信息流淡出五个实例以指示无限滚动，每个相关列表显示特定组件的模板的一个实例。

Record Detail Stencil

Loading indicators help to reassure the user that the system is actively retrieving data.

Spinners

Show spinners when retrieving data or performing slow computations.

Spinners are animated SVGs or GIFs. They reduce the use of awkward white screens and blank containers to communicate that the system is working. Use spinners when a component on a page is making an asynchronous update without refreshing the page.

Stencils

Stencils are placeholders that visually communicate that content is in the process of loading.

Stencils abstractly represent what the resulting content layout will look like. Use stencils for full page refreshes, not asynchronous updates. Stencils offer a more visually appealing experience than dozens of spinners animating at the same time or a blank white page.

Use stencils when data takes longer than 300 ms to retrieve. For less than 300 ms, just show the data. If the data takes 301 ms to load, the stencil fades-in promptly and then cross-fades to the data. Do not have a “white flash” between stencils and data.

If a component is only displayed when it has data, then don’t show a stencil.

Keep stencils simple and lightweight, by using simple, subtle shapes to indicate content, but don’t include the placement of buttons and other UI elements. Keep the shape heights consistent to reduce visual noise.

Stencils should be responsive and stretch to fill the container that they are in.Load stencils from the top left of the page to the bottom right.

Table Data Loading Stencil

For table lists, don’t fill the screen up with stencils. Render a table data row stencil 20 times and reduce the opacity of each row by 5% to create a fade effect from 100% to 0% opacity, giving an infinite data effect. (see example below)

Record Detail Stencil

Feed fades out over five instances to indicate infinite scroll. Each related list shows one instance of the component-specific stencil.