Jump To:

  1. Demos
    1. Basic Progress Bar
    2. Indeterminate Loader
    3. Semantic Status Bars
  2. Variables
    1. $config
    2. $styles
  3. Mixins
    1. set()
    2. set-styles()
    3. styles()
  4. Functions
    1. get()

Groups a set of buttons

Demos

Basic Progress Bar

A standard progress bar with a label and percentage value.

System Update 65%
HTML 
<div class="progress-bar">
  <div class="progress-bar__header">
    <strong class="progress-bar__label">System Update</strong>
    <span class="progress-bar__value">65%</span>
  </div>
  <div class="progress-bar__track">
    <div class="progress-bar__bar" style="width: 65%;"></div>
  </div>
</div>

Indeterminate Loader

An animated bar for states where progress is unknown, using the `progress-bar--indeterminate` modifier.

HTML 
<div class="progress-bar progress-bar--loader progress-bar--indeterminate">
  <div class="progress-bar__track">
    <div class="progress-bar__bar"></div>
  </div>
</div>

Semantic Status Bars

Using status modifiers like `progress-bar--success` and `progress-bar--danger`.

Setup Complete
Storage Low
HTML 
<div class="progress-bar progress-bar--success">
  <div class="progress-bar__header"><strong class="progress-bar__label">Setup Complete</strong></div>
  <div class="progress-bar__track">
    <div class="progress-bar__bar" style="width: 100%;"></div>
  </div>
</div>
<div class="progress-bar progress-bar--danger">
  <div class="progress-bar__header"><strong class="progress-bar__label">Storage Low</strong></div>
  <div class="progress-bar__track">
    <div class="progress-bar__bar" style="width: 92%;"></div>
  </div>
</div>

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "margin" : (0 0 0.5em 0),
  "header-gap" : 0.25em,
  "line-height" : true,
  "value-color" : "type-tertiary",
  "value-margin" : 0.5em,
  "value-font-weight" : true,
  "value-margin-deficit" : 0.3em,
  "value-color-deficit" : "danger",
  "bar-height" : 12px,
  "bar-color" : "accent",
  "bar-color-deficit" : "danger",
  "icon-color" : "type-tertiary",
  "icon-color-deficit" : "danger",
  "track-color" : "placeholder-background-alt",
  "track-margin" : (0.1em 0),
  "rounded-border-radius" : 50px,
  "animation-duration" : 200ms,
  "animation-timing" : ease,
  "animation-initial-duration" : 500ms,
  "animation-initial-timing" : ease-in,
  "animation-indeterminate-duration" : 2.5s
);
File Information
  • File: _progress-bar.scss
  • Group: progress-bar
  • Type: variable
  • Lines (comments): 28-50
  • Lines (code): 52-74

Map Properties

Name Type Default Description
header-gap Dimension 0.25em Margin/gap for the icon/value
margin List (0 0 0.5em 0) Margin for the progress bar.
line-height Boolean true Line height for the progress bar. If true, falls back to typography's line-height-dense.
value-color Color "type-tertiary" Color of the value text.
value-margin Dimension 0.5em Margin for the value text.
value-font-weight Boolean true Font weight for the value text. If true, falls back to typography's font-weight-light.
value-margin-deficit Dimension 0.3em Margin for the deficit value text.
value-color-deficit Color "danger" Color of the deficit value text.
bar-height Dimension 12px Height of the progress bar.
bar-color Color rgb(80, 80, 171) Color of the progress bar.
bar-color-deficit Color "danger" Color of the deficit portion of the progress bar.
icon-color Color "type-tertiary" Color of the icon.
icon-color-deficit Color "danger" Color of the icon in a deficit state.
track-color Color #ccc Color of the progress bar track.
track-margin List (0.1em 0) Margin for the progress bar track.
rounded-border-radius CssValue 100vmax Border radius for the rounded modifier.
animation-duration Time 200ms Duration of the width transition animation.
animation-timing CssValue ease Timing function for the width transition animation.
animation-initial-duration Time 500ms Duration of the initial fill animation.
animation-initial-timing CssValue ease-in Timing function for the initial fill animation.
animation-indeterminate-duration Time 2.5s Duration of the indeterminate loading animation.

$styles

Variable Type: Map This is the map of styles (variations in progress bar types) - Each style becomes the modifier and accepts ("bar-color", "bar-height", "track-color") - Use this to match whatever progress system(s) your creating 
$styles: (
  "success" : (
    "bar-color" : "success",
    "icon-color" : "success"
  ),
  "warning" : (
    "bar-color" : "warning",
    "icon-color" : "warning"
  ),
  "danger" : (
    "bar-color" : "danger",
    "icon-color" : "danger"
  ),
  "small" : (
    "bar-height" : 8px
  ),
  "loader" : (
    "bar-height" : 4px,
    "track-color" : transparent,
  )
);
File Information
  • File: _progress-bar.scss
  • Group: progress-bar
  • Type: variable
  • Lines (comments): 76-79
  • Lines (code): 80-100

Mixins

set()

Mixin

Change modules $config

File Information
  • File: _progress-bar.scss
  • Group: progress-bar
  • Type: mixin
  • Lines (comments): 102-105
  • Lines (code): 107-109

Examples

@include ulu.component-progress-bar-set(( "property" : value ));

Parameters

Name Type Description
$changes Map Map of changes

Require

set-styles()

Mixin

Change modules $config

File Information
  • File: _progress-bar.scss
  • Group: progress-bar
  • Type: mixin
  • Lines (comments): 111-114
  • Lines (code): 116-118

Examples

@include ulu.component-progress-bar-set-styles(( "small" : ( "bar-height" : 8px ) ));

Parameters

Name Type Description
$changes Map Map of changes

Require

styles()

Mixin

Prints component styles

File Information
  • File: _progress-bar.scss
  • Group: progress-bar
  • Type: mixin
  • Lines (comments): 130-133
  • Lines (code): 135-280

Demo

View

Examples

@include ulu.component-progress-bar-styles();

Require

Functions

get()

Function

Get a config option

File Information
  • File: _progress-bar.scss
  • Group: progress-bar
  • Type: function
  • Lines (comments): 120-123
  • Lines (code): 125-128

Examples

@include ulu.component-progress-bar-get("property");

Parameters

Name Type Description
$name Map Name of property

Require