Progress Bars
Circular Progress Bars
Default circular progress bar inherits accent colour ($brand-color-accent).
Determinate Progress Bars
Default progress bar inherits accent colour ($brand-color-accent).
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 accent colour ($brand-color-accent).
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.
.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.