2158b632c0
Co-authored-by: tedium <format-bot@polymer-project.org> |
||
---|---|---|
.. | ||
images | ||
src | ||
.npmignore | ||
package.json | ||
README.md | ||
tsconfig.json |
<mwc-linear-progress>
IMPORTANT: The Material Web Components are a work in progress and subject to major changes until 1.0 release.
Progress indicators express an unspecified wait time or display the length of a process.
Material Design Guidelines: Progress Indicators
Installation
npm install @material/mwc-linear-progress
NOTE: The Material Web Components are distributed as ES2017 JavaScript Modules, and use the Custom Elements API. They are compatible with all modern browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional tooling step is required to resolve bare module specifiers, as well as transpilation and polyfills for Edge and IE11. See here for detailed instructions.
Example usage
Determinate
<script type="module">
import '@material/mwc-linear-progress';
</script>
<mwc-linear-progress progress="0.5"></mwc-linear-progress>
Indederminate
<mwc-linear-progress indeterminate></mwc-linear-progress>
Determinate buffer
<mwc-linear-progress progress="0.25" buffer="0.5"></mwc-linear-progress>
Reversed
<mwc-linear-progress
reverse
progress="0.25"
buffer="0.5">
</mwc-linear-progress>
Styled
<style>
mwc-linear-progress {
--mdc-theme-primary: red;
--mdc-linear-progress-buffer-color: orange;
/* Note: all that was changed from default was "fill='orange'" */
--mdc-linear-progress-buffering-dots-image:
url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' preserveAspectRatio='none slice'%3E%3Ccircle cx='1' cy='1' r='1' fill='orange'/%3E%3C/svg%3E");
}
</style>
<mwc-linear-progress progress="0.25" buffer="0.5"></mwc-linear-progress>
API
Slots
None
Properties/Attributes
Name | Type | Default | Description |
---|---|---|---|
indeterminate |
boolean |
false |
Sets the linear-progress into its indeterminate state. |
progress |
number |
0 |
Sets the primary progress bar's value. Value should be between [0, 1]. |
buffer |
number |
1 |
Sets the buffer progress bar's value. Value should be between [0, 1]. Setting this value to be less than 1 will reveal moving, buffering dots. |
reverse |
boolean |
false |
Reverses the direction of the linear progress indicator. |
closed |
boolean |
false |
Sets the progress indicator to the closed state. Sets content opactiy to 0. Typically should be set to true when loading has finished. |
Methods
Name | Description |
---|---|
open() => void |
Sets Slider.closed to false ; |
close() => void |
Sets Slider.closed to true ; |
Events
None
CSS Custom Properties
Default value for --mdc-linear-progress-buffering-dots-image
:
data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' preserveAspectRatio='none slice'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23e6e6e6'/%3E%3C/svg%3E
If you paste that data url into your browser you can see and inspect the SVG.
You may also notice that it is simply a colored circle with some transparent
space to its right. If you would like to change the color of the circle, you can
simply change the fill="%23e6e6e6"
to any valid color property (n.b. %23
is
the url-encoded equivalent of #
).