diff --git a/docs/index.html.ejs b/docs/index.html.ejs index 148b3a1..e8856c6 100644 --- a/docs/index.html.ejs +++ b/docs/index.html.ejs @@ -41,6 +41,7 @@
  • TreeView
    • +
  • ProgressBar
  • Issues, Contributing, etc.
    • @@ -796,7 +797,7 @@ import "xp.css/dist/98.css";

    - You can render a status bar with the status-bar class, + You can render a status bar with the status-bar class, and status-bar-field for every child text element.

    @@ -821,7 +822,7 @@ import "xp.css/dist/98.css"; `) %> - +
    @@ -909,6 +910,47 @@ import "xp.css/dist/98.css";
    +
    +

    ProgressBar

    +
    +
    + With a progress bar, users can follow the progress + of a lengthy operation. A progress bar may either show an approximate + percentage of completion (determinate) or indicate that an operation is + ongoing (indeterminate) + +
    + +

    + To render a progress bar, use a <progress> element. +

    + +

    + The max attribute describes how much work the task indicated by the progress element requires, if present, must have a value greater than 0 and be a valid floating point number. The default value is 1. +

    + +

    + The value attribute specifies how much of the task that has been completed. It must be a valid floating point number between 0 and max, or between 0 and 1 if max is omitted. +

    + + <%- example(` + + `) %> + +

    + If there is no value attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take. +

    + + <%- example(` + + `) %> + +
    +
    +

    Issues, Contributing, etc.

    diff --git a/themes/XP/_progressbar.scss b/themes/XP/_progressbar.scss new file mode 100644 index 0000000..d8e6b70 --- /dev/null +++ b/themes/XP/_progressbar.scss @@ -0,0 +1,161 @@ +/*-------------------------------------------*\ + ProgressBar +\*-------------------------------------------*/ + +@keyframes sliding { + 0% { + transform: translateX(-30px); + } + 100% { + transform: translateX(100%); + } + } + + progress { + &, + &[value], + &:not([value]) { + --determinate-track: repeating-linear-gradient( + to right, + #fff 0px, + #fff 2px, + transparent 2px, + transparent 10px + ), + linear-gradient( + to bottom, + #acedad 0%, + #7be47d 14%, + #4cda50 28%, + #2ed330 42%, + #42d845 57%, + #76e275 71%, + #8fe791 85%, + #ffffff 100% + ); + --indeterminate-track: repeating-linear-gradient( + to right, + transparent 0px, + transparent 8px, + #fff 8px, + #fff 10px, + transparent 10px, + transparent 18px, + #fff 18px, + #fff 20px, + transparent 20px, + transparent 28px, + #fff 28px, + #fff 100% + ), + linear-gradient( + to bottom, + #acedad 0%, + #7be47d 14%, + #4cda50 28%, + #2ed330 42%, + #42d845 57%, + #76e275 71%, + #8fe791 85%, + #ffffff 100% + ); + --indeterminate-track-animation: sliding 2s linear 0s infinite; + --track-shadow: inset 0px 0px 1px 0px rgba(104, 104, 104, 1); + --track-height: 14px; + } + + box-sizing: border-box; + + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + + height: var(--track-height); + + border: 1px solid #686868; + border-radius: 4px; + + padding: 1px 2px 1px 0px; + + overflow: hidden; + background-color: #fff; + + -webkit-box-shadow: var(--track-shadow); + -moz-box-shadow: var(--track-shadow); + box-shadow: var(--track-shadow); + + /* Determinate styles */ + &[value] { + /* Chrome, Safari, Edge */ + &::-webkit-progress-bar { + background-color: transparent; + } + &::-webkit-progress-value { + border-radius: 2px; + background: var(--determinate-track); + } + /* Firefox */ + &::-moz-progress-bar { + border-radius: 2px; + background: var(--determinate-track); + } + } + + /* Indeterminate styles */ + &:not([value]) { + /* Apply for Chrome, Safari and Edge but animation only works in Safari */ + &::-webkit-progress-bar { + width: 100%; + background: var(--indeterminate-track); + animation: var(--indeterminate-track-animation); + } + + /* Solution for Chrome and Edge: animate pseudo element :after */ + & { + position: relative; + } + /* This pseudo element is to hide the not working -webkit-progress-bar animation above for Chrome and Edge */ + &::before { + box-sizing: border-box; + content: ""; + position: absolute; + top: 0; + left: 0; + + width: 100%; + height: 100%; + + background-color: #fff; + + -webkit-box-shadow: var(--track-shadow); + -moz-box-shadow: var(--track-shadow); + box-shadow: var(--track-shadow); + } + /* Real animated element */ + &::after { + box-sizing: border-box; + content: ""; + position: absolute; + top: 1px; + left: 2px; + + width: 100%; + height: calc(100% - 2px); + + padding: 1px 2px 1px 2px; + + border-radius: 2px; + + background: var(--indeterminate-track); + animation: var(--indeterminate-track-animation); + } + + /* Firefox */ + &::-moz-progress-bar { + width: 100%; + background: var(--indeterminate-track); + animation: var(--indeterminate-track-animation); + } + } + } + \ No newline at end of file diff --git a/themes/XP/index.scss b/themes/XP/index.scss index 9af0178..798f1f9 100644 --- a/themes/XP/index.scss +++ b/themes/XP/index.scss @@ -5,12 +5,14 @@ * https://github.com/botoxparty/XP.css/blob/main/LICENSE */ -@import "../../gui/index.scss"; -@import "_variables.scss"; -@import "_global.scss"; -@import "_window.scss"; -@import "_buttons.scss"; -@import "_forms.scss"; -@import "_groupbox.scss"; -@import "_tabs.scss"; -@import "_treeview.scss"; + @import "../../gui/index.scss"; + @import "_variables.scss"; + @import "_global.scss"; + @import "_window.scss"; + @import "_buttons.scss"; + @import "_forms.scss"; + @import "_groupbox.scss"; + @import "_tabs.scss"; + @import "_treeview.scss"; + @import "_progressbar.scss"; + \ No newline at end of file