ProgressBar CSS Styling

SmartProgressbar is a basic progress bar that accepts a value and shows a colored bar that describes the stage of the current process. There are three types: horizontal, vertical and circular.

Required files

The Smart.ProgressBar element requires the following file references to be placed on a web page in order for the custom element to be successfully registered and properly working:

  • smart.element.js -- this is the base file that defines the common architecture of all Smart custom elements. It is part of the repository ni-kismet/smart-element.
  • smart.progressbar.js -- this file defines the functionality of the Smart.ProgressBar custom element.

Smart.ProgressBar also requires the following style sheets in order to be displayed correctly.

  • smart.base.css -- the base style sheet file.

Initialization

To create an instance of a horizontal Smart.ProgressBar custom element, insert the following tag in an HTML page:

<smart-progress-bar></smart-progress-bar>

To create an instance of a vertical Smart.ProgressBar custom element, insert the following tag in an HTML page:

<smart-progress-bar orientation="vertical"></smart-progress-bar>

To create an instance of a circular Smart.ProgressBar custom element, insert the following tag in an HTML page:

<smart-circular-progress-bar></smart-circular-progress-bar>

To set properties of the custom element initially, do so by setting the respective attributes of the tag, e.g.:

<smart-progress-bar value="20" max="40" min="5" orientation="horizontal" inverted></smart-progress-bar>
<smart-circular-progress-bar value="20" max="40" min="5" inverted></smart-circular-progress-bar>

Getting and setting properties dynamically

Before accessing the custom element's API in JavaScript, the custom element's instance has to be retrieved:

let customElement = document.querySelector('smart-progress-bar');

and for the Circular Progress Bar:

let customElement = document.querySelector('smart-circular-progress-bar');

Properties are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to get a property dynamically:

let customElement = customElement.value;

Here is an example showing how to set a property dynamically:

customElement.value = 0;

Animations

By default the animations(transitions) for the Smart.ProgressBar are disabled (material design animations when value is "null" are enabled). They can be enabled by adding the CSS class called "animation" to the element, like so:

<smart-progress-bar class="animation"></smart-progress-bar>
<smart-progress-bar class="animation" orientation="vertical"></smart-progress-bar>
<smart-circular-progress-bar class="animation"></smart-circular-progress-bar>

Styling (CSS API)

Smart HTML Elements use a pair of css files - smart.base.css and smart.[theme name].css. The base stylesheet creates the styles related to the element's layout like margin, padding, border-width, position. The second CSS file applies the HTML Element's colors, fonts, borders and backgrounds. The smart.base.css should be included before the second CSS file.

CSS selectors

The following CSS selectors can be used to style Linear progress bar:

  • smart-progress-bar - the element itself. Can be used to set width and height for the whole element.
    • .smart-container - the container that holds all of the internals of the element. Shoudn't be used for styling.
    • .smart-value - the progress fill.
    • .smart-label - a numeric indicator for the fill.

The following CSS selectors can be used to style Circular progress bar:

  • smart-circular-progress-bar - the element itself. Can be used to set width and height for the whole element.
    • .smart-container - the container that holds all of the internals of the element. Shoudn't be used for styling.
    • SVG element - an SVG container.
      • .smart-value-path - an SVG Circle element that acts as a layer behind the fill (the fill path). Used for styling purposes only.
      • .smart-value - an SVG Circle element that acts as the fill.
      • .smart-label-container - a DIV element that is used as a container for an arbitrary HTML content(e.g. another custom element).
      • .smart-label - a numeric indicator for the fill.

CSS variables

The Progress bars uses the following CSS variables:

  • --smart-progress-bar-default-width - used to set the default width of the Linear progress bar. Default is 200px.
  • --smart-progress-bar-default-height - used to set the default height of the Linear progress bar. Default is 30px.
  • --smart-circular-progress-bar-default-size - used to set the default width and height of the Circulcar progress bar. Default is 150px.
  • --smart-circular-progress-bar-fill-size - used to set the width of the fill of the Circular progress bar which is relative to the size of the inner container(the HTML container in the middle of the element). Default value is 20%.