diff --git a/docs/index.html.ejs b/docs/index.html.ejs index c8eeb30..0df0d75 100644 --- a/docs/index.html.ejs +++ b/docs/index.html.ejs @@ -43,6 +43,7 @@
  • TreeView
  • Tabs
  • TableView
    • +
  • Progress Indicator
  • Issues, Contributing, etc.
    • @@ -882,7 +883,6 @@
    -

    TableView

    @@ -969,6 +969,35 @@ }); `) %> +

    +
    + +
    +

    Progress Indicator

    +
    +
    + You can use a progress indicator, also known as a progress bar control, to show the percentage of completion of a lengthy operation. + +
    + — Microsoft Windows User Experience p. 189 +
    +
    + +

    + There are two types of progress bars: solid and segmented. The solid version is the default. To declare a segmented bar, you should use the segmented class. +

    + + <%- example(` +
    + +
    + `) %> + + <%- example(` +
    + +
    + `) %>
    diff --git a/style.css b/style.css index 5c22050..48767e1 100644 --- a/style.css +++ b/style.css @@ -891,3 +891,35 @@ table > tbody > tr > * { padding: 0 var(--grouped-element-spacing); height: 14px; } + +.progress-indicator { + height: 32px; + position: relative; + box-shadow: var(--border-sunken-inner); + padding: 4px 4px; + border: none; + box-sizing: border-box; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 0; +} + + +.progress-indicator > .progress-indicator-bar { + height: 100%; + display: block; + background-color: var(--dialog-blue); +} + +.progress-indicator.segmented > .progress-indicator-bar { + width: 100%; + background-color: transparent; /* resets the background color which is set to blue in the non-segmented selector */ + background-image: linear-gradient( + 90deg, + var(--dialog-blue) 0 16px, + transparent 0 2px + ); + background-repeat: repeat; + background-size: 18px 100%; +}