Progress Bar

A custom element (ws-progress) that is a simpler progress bar that is easier to customize consistently between browsers.

Attributes

The ws-progress element uses attrs similar to the regular progress element in html. min, max, and value all work as standard, with buffer working like the value attribute, but for the buffer bar. Instead of using aria-* attributes with additional elements, setting the busy attribute will make the ws-progress show as indeterminate.

Preview

Preview Theme

Example

<ws-flex>
    <ws-titlebar>
        <span ws-x="[$title] [$title-text]">Basic Progress Bar</span>
    </ws-titlebar>
    <ws-progress value="0.3"></ws-progress>
    <ws-progress value="0.7"></ws-progress>

    <ws-titlebar>
        <span ws-x="[$title] [$title-text]">Colorized Progress Bar</span>
    </ws-titlebar>
    <ws-progress value="0.3" ws-x="[$color @primary]"></ws-progress>
    <ws-progress value="0.7" ws-x="[$color @secondary]"></ws-progress>

    <ws-titlebar>
        <span ws-x="[$title] [$title-text]">
            Interdemindate (busy) Progress Bar
        </span>
    </ws-titlebar>
    <ws-progress busy></ws-progress>
    <ws-progress busy ws-x="[$color @primary]"></ws-progress>
    <ws-progress busy ws-x="[$color @accent]"></ws-progress>

    <ws-titlebar>
        <span ws-x="[$title] [$title-text]">Buffered Progress Bar</span>
    </ws-titlebar>
    <ws-progress value="0.3" buffer="0.5"></ws-progress>
    <ws-progress value="0.7" buffer="0.9" ws-x="[$color @danger] [r 0px]"></ws-progress>
</ws-flex>