Barras de progresso

Circular Progress Bars

Default circular progress bar inherits link colour ($link-color):

Circular progress bar with different colour options:

Determinate Progress Bars

Default progress bar inherits link colour ($link-color):

Progress bar with different colour options:

Indeterminate Progress Bars

Load Bars

A .load-bar requires four different colours (i.e. four <div class="load-bar-progress"> with different colour classes) to achieve the best visual effect. By default, a .load-bar-progress inherits link colour ($link-color).

A complete load bar consists of two separate .load-bars, and the order of .load-bar-progresss in each of the two .load-bars will be different.

Loading Additional Content Examples

Combine .el-loading with progress bars or text on any elements or body to indicate additional content is being loaded. Add .el-loading-done using custom javascript when content has been loaded to remove loading indicators.

placeholder tile
placeholder tile
placeholder tile

Finish Loading

placeholder tile
placeholder tile
placeholder tile

Finish Loading

placeholder tile
placeholder tile
placeholder tile

Finish Loading

click to expand this tile
click to expand this tile
click to expand this tile

.avoid-fout on HTML pages uses a similar technique to avoid flash of unstyled text (FOUT). .avoid-fout-done is added when Roboto font either is successfully loaded or fails to load. .avoid-fout also can be used on any HTML elements.

Nenhum comentário:

Postar um comentário