mirror of
https://github.com/onsonr/nebula.git
synced 2025-03-10 17:29:11 +00:00
1176 lines
64 KiB
HTML
1176 lines
64 KiB
HTML
<!doctype html>
|
||
<html lang="en" data-layout="component" data-shoelace-version="0.0.10">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<meta name="description" content="Progress bars are used to show the status of an ongoing operation." />
|
||
<title>Progress Bar</title>
|
||
|
||
<meta name="turbo-cache-control" />
|
||
|
||
<link rel="stylesheet" href="/assets/styles/docs.css" />
|
||
<link rel="stylesheet" href="/assets/styles/code-previews.css" />
|
||
<link rel="stylesheet" href="/assets/styles/search.css" />
|
||
|
||
<link rel="icon" href="/assets/images/logo.svg" type="image/x-icon" />
|
||
|
||
<meta name="twitter:card" content="summary" />
|
||
<meta name="twitter:creator" content="shoelace_style" />
|
||
<meta name="twitter:image" content="https://nebulaui.org/assets/images/og-image.png" />
|
||
|
||
<meta property="og:url" content="https://nebulaui.org/components/progress-bar/" />
|
||
<meta property="og:title" content="Progress Bar" />
|
||
<meta property="og:description" content="Progress bars are used to show the status of an ongoing operation." />
|
||
<meta property="og:image" content="https://nebulaui.org/assets/images/og-image.png" />
|
||
|
||
<link rel="stylesheet" href="/dist/themes/light.css" />
|
||
<link rel="stylesheet" href="/dist/themes/dark.css" />
|
||
<script type="module" src="/dist/shoelace-autoloader.js"></script>
|
||
|
||
<script>
|
||
(() => {
|
||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||
const theme = localStorage.getItem('theme') || 'auto';
|
||
document.documentElement.classList.toggle(
|
||
'sl-theme-dark',
|
||
theme === 'dark' || (theme === 'auto' && prefersDark)
|
||
);
|
||
})();
|
||
</script>
|
||
|
||
<script src="/assets/scripts/turbo.js" type="module"></script>
|
||
<script src="/assets/scripts/docs.js" defer=""></script>
|
||
<script src="/assets/scripts/code-previews.js" defer=""></script>
|
||
<script src="/assets/scripts/lunr.js" defer=""></script>
|
||
<script src="/assets/scripts/search.js" defer=""></script>
|
||
</head>
|
||
<body>
|
||
<a id="skip-to-main" class="visually-hidden" href="#main-content" data-smooth-link="false">
|
||
Skip to main content
|
||
</a>
|
||
|
||
<button id="menu-toggle" type="button" aria-label="Menu">
|
||
<svg width="148" height="148" viewBox="0 0 148 148" xmlns="http://www.w3.org/2000/svg">
|
||
<g stroke="currentColor" stroke-width="18" fill="none" fill-rule="evenodd" stroke-linecap="round">
|
||
<path d="M9.5 125.5h129M9.5 74.5h129M9.5 23.5h129"></path>
|
||
</g>
|
||
</svg>
|
||
</button>
|
||
|
||
<div id="icon-toolbar">
|
||
<a
|
||
href="https://github.com/onsonr/nebula"
|
||
title="View Nebula on GitHub"
|
||
class="external-link"
|
||
rel="noopener noreferrer"
|
||
target="_blank"
|
||
>
|
||
<sl-icon name="github"></sl-icon>
|
||
</a>
|
||
|
||
<a
|
||
href="https://twitter.com/shoelace_style"
|
||
title="Follow Nebula on Twitter"
|
||
class="external-link"
|
||
rel="noopener noreferrer"
|
||
target="_blank"
|
||
>
|
||
<sl-icon name="twitter"></sl-icon>
|
||
</a>
|
||
|
||
<sl-dropdown id="theme-selector" placement="bottom-end" distance="3">
|
||
<sl-button slot="trigger" size="small" variant="text" caret="" title="Press \ to toggle">
|
||
<sl-icon class="only-light" name="sun-fill"></sl-icon>
|
||
<sl-icon class="only-dark" name="moon-fill"></sl-icon>
|
||
</sl-button>
|
||
<sl-menu>
|
||
<sl-menu-item type="checkbox" value="light">Light</sl-menu-item>
|
||
<sl-menu-item type="checkbox" value="dark">Dark</sl-menu-item>
|
||
<sl-divider></sl-divider>
|
||
<sl-menu-item type="checkbox" value="auto">System</sl-menu-item>
|
||
</sl-menu>
|
||
</sl-dropdown>
|
||
</div>
|
||
|
||
<aside id="sidebar" data-preserve-scroll="">
|
||
<header>
|
||
<a href="/">
|
||
<img src="/assets/images/wordmark.svg" alt="Nebula" />
|
||
</a>
|
||
<div class="sidebar-version">0.0.10</div>
|
||
</header>
|
||
|
||
<div class="sidebar-buttons">
|
||
<sl-button
|
||
size="small"
|
||
class="repo-button repo-button--github"
|
||
href="https://github.com/onsonr/nebula"
|
||
target="_blank"
|
||
>
|
||
<sl-icon slot="prefix" name="github"></sl-icon> Code
|
||
</sl-button>
|
||
<sl-button
|
||
size="small"
|
||
class="repo-button repo-button--star"
|
||
href="https://github.com/onsonr/nebula/stargazers"
|
||
target="_blank"
|
||
>
|
||
<sl-icon slot="prefix" name="star-fill"></sl-icon> Star
|
||
</sl-button>
|
||
<sl-button
|
||
size="small"
|
||
class="repo-button repo-button--twitter"
|
||
href="https://twitter.com/shoelace_style"
|
||
target="_blank"
|
||
>
|
||
<sl-icon slot="prefix" name="twitter"></sl-icon> Follow
|
||
</sl-button>
|
||
</div>
|
||
|
||
<button class="search-box" type="button" title="Press / to search" aria-label="Search" data-plugin="search">
|
||
<sl-icon name="search"></sl-icon>
|
||
<span>Search</span>
|
||
</button>
|
||
|
||
<nav>
|
||
<ul>
|
||
<li>
|
||
<h2>Getting Started</h2>
|
||
<ul>
|
||
<li><a href="/">Home</a></li>
|
||
<li><a href="/getting-started/installation">Installation</a></li>
|
||
<li><a href="/getting-started/usage">Usage</a></li>
|
||
<li><a href="/getting-started/themes">Themes</a></li>
|
||
<li><a href="/getting-started/customizing">Customizing</a></li>
|
||
<li><a href="/getting-started/form-controls">Form Controls</a></li>
|
||
<li><a href="/getting-started/localization">Localization</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<h2>Frameworks</h2>
|
||
<ul>
|
||
<li><a href="/frameworks/react">React</a></li>
|
||
<li><a href="/frameworks/vue">Vue</a></li>
|
||
<li><a href="/frameworks/angular">Angular</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<h2>Resources</h2>
|
||
<ul>
|
||
<li><a href="/resources/community">Community</a></li>
|
||
<li>
|
||
<a
|
||
href="https://github.com/onsonr/nebula/discussions"
|
||
class="external-link"
|
||
rel="noopener noreferrer"
|
||
target="_blank"
|
||
>Help & Support</a
|
||
>
|
||
</li>
|
||
<li><a href="/resources/accessibility">Accessibility</a></li>
|
||
<li><a href="/resources/contributing">Contributing</a></li>
|
||
<li><a href="/resources/changelog">Changelog</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<h2>Components</h2>
|
||
<ul>
|
||
<li>
|
||
<a href="/components/alert"> Alert </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/animated-image"> Animated Image </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/animation"> Animation </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/avatar"> Avatar </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/badge"> Badge </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/breadcrumb"> Breadcrumb </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/breadcrumb-item"> Breadcrumb Item </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/button"> Button </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/button-group"> Button Group </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/card"> Card </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/carousel"> Carousel </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/carousel-item"> Carousel Item </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/checkbox"> Checkbox </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/color-picker"> Color Picker </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/copy-button"> Copy Button </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/details"> Details </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/dialog"> Dialog </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/divider"> Divider </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/drawer"> Drawer </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/dropdown"> Dropdown </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/format-bytes"> Format Bytes </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/format-date"> Format Date </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/format-number"> Format Number </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/icon"> Icon </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/icon-button"> Icon Button </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/image-comparer"> Image Comparer </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/include"> Include </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/input"> Input </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/menu"> Menu </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/menu-item"> Menu Item </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/menu-label"> Menu Label </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/mutation-observer"> Mutation Observer </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/option"> Option </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/popup"> Popup </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/progress-bar" class="active-link"> Progress Bar </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/progress-ring"> Progress Ring </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/qr-code"> QR Code </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/radio"> Radio </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/radio-button"> Radio Button </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/radio-group"> Radio Group </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/range"> Range </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/rating"> Rating </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/relative-time"> Relative Time </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/resize-observer"> Resize Observer </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/select"> Select </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/skeleton"> Skeleton </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/spinner"> Spinner </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/split-panel"> Split Panel </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/switch"> Switch </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/tab"> Tab </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/tab-group"> Tab Group </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/tab-panel"> Tab Panel </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/tag"> Tag </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/textarea"> Textarea </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/tooltip"> Tooltip </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/tree"> Tree </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/tree-item"> Tree Item </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/visually-hidden"> Visually Hidden </a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<h2>Design Tokens</h2>
|
||
<ul>
|
||
<li><a href="/tokens/typography">Typography</a></li>
|
||
<li><a href="/tokens/color">Color</a></li>
|
||
<li><a href="/tokens/spacing">Spacing</a></li>
|
||
<li><a href="/tokens/elevation">Elevation</a></li>
|
||
<li><a href="/tokens/border-radius">Border Radius</a></li>
|
||
<li><a href="/tokens/transition">Transition</a></li>
|
||
<li><a href="/tokens/z-index">Z-index</a></li>
|
||
<li><a href="/tokens/more">More Tokens</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<h2>Tutorials</h2>
|
||
<ul>
|
||
<li><a href="/tutorials/integrating-with-astro">Integrating with Astro</a></li>
|
||
<li><a href="/tutorials/integrating-with-laravel">Integrating with Laravel</a></li>
|
||
<li><a href="/tutorials/integrating-with-nextjs">Integrating with NextJS</a></li>
|
||
<li><a href="/tutorials/integrating-with-rails">Integrating with Rails</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</aside>
|
||
|
||
<main>
|
||
<a id="main-content"></a>
|
||
<article id="content" class="content content--with-toc">
|
||
<div class="content__toc">
|
||
<ul>
|
||
<li class="top"><a href="#">Progress Bar</a></li>
|
||
<li data-level="2"><a href="#examples">Examples</a></li>
|
||
<li data-level="3"><a href="#labels">Labels</a></li>
|
||
<li data-level="3"><a href="#custom-height">Custom Height</a></li>
|
||
<li data-level="3"><a href="#showing-values">Showing Values</a></li>
|
||
<li data-level="3"><a href="#indeterminate">Indeterminate</a></li>
|
||
<li data-level="2"><a href="#importing">Importing</a></li>
|
||
<li data-level="2"><a href="#slots">Slots</a></li>
|
||
<li data-level="2"><a href="#properties">Properties</a></li>
|
||
<li data-level="2"><a href="#custom-properties">Custom Properties</a></li>
|
||
<li data-level="2"><a href="#parts">Parts</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="content__body">
|
||
<header class="component-header">
|
||
<h1>Progress Bar</h1>
|
||
|
||
<div class="component-header__tag">
|
||
<code><sl-progress-bar> | SlProgressBar</code>
|
||
</div>
|
||
|
||
<div class="component-header__info">
|
||
<sl-badge variant="neutral" pill=""> Since 2.0 </sl-badge>
|
||
<sl-badge variant="primary" pill="" style="text-transform: capitalize"> stable </sl-badge>
|
||
</div>
|
||
</header>
|
||
|
||
<p class="component-summary">Progress bars are used to show the status of an ongoing operation.</p>
|
||
|
||
<div class="code-preview">
|
||
<div class="code-preview__preview">
|
||
<sl-progress-bar value="50"></sl-progress-bar>
|
||
|
||
<div class="code-preview__resizer">
|
||
<sl-icon name="grip-vertical"></sl-icon>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__source-group" id="code-preview-source-group-212">
|
||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||
<pre><code class="language-html" id="code-block-689"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-progress-bar</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-progress-bar</span><span class="token punctuation">></span></span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-689"></sl-copy-button></pre>
|
||
</div>
|
||
|
||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||
<pre><code class="language-jsx" id="code-block-690"><span class="token keyword">import</span> SlProgressBar <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-bar'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlProgressBar</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">50</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-690"></sl-copy-button></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__buttons">
|
||
<button
|
||
type="button"
|
||
class="code-preview__button code-preview__toggle"
|
||
aria-expanded="false"
|
||
aria-controls="code-preview-source-group-212"
|
||
>
|
||
Source
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<polyline points="6 9 12 15 18 9"></polyline>
|
||
</svg>
|
||
</button>
|
||
|
||
<button type="button" title="Show HTML code" class="code-preview__button code-preview__button--html">
|
||
HTML
|
||
</button>
|
||
|
||
<button type="button" title="Show React code" class="code-preview__button code-preview__button--react">
|
||
React
|
||
</button>
|
||
|
||
<button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
|
||
<svg
|
||
width="138"
|
||
height="26"
|
||
viewBox="0 0 138 26"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.3"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<path
|
||
d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"
|
||
></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<h2 id="examples" class="anchor-heading">
|
||
Examples<a href="#examples" aria-label='Direct link to "Examples"'></a>
|
||
</h2>
|
||
<h3 id="labels" class="anchor-heading">Labels<a href="#labels" aria-label='Direct link to "Labels"'></a></h3>
|
||
<p>
|
||
Use the <code>label</code> attribute to label the progress bar and tell assistive devices how to announce
|
||
it.
|
||
</p>
|
||
|
||
<div class="code-preview">
|
||
<div class="code-preview__preview">
|
||
<sl-progress-bar value="50" label="Upload progress"></sl-progress-bar>
|
||
|
||
<div class="code-preview__resizer">
|
||
<sl-icon name="grip-vertical"></sl-icon>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__source-group" id="code-preview-source-group-213">
|
||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||
<pre><code class="language-html" id="code-block-691"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-progress-bar</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Upload progress<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-progress-bar</span><span class="token punctuation">></span></span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-691"></sl-copy-button></pre>
|
||
</div>
|
||
|
||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||
<pre><code class="language-jsx" id="code-block-692"><span class="token keyword">import</span> SlProgressBar <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-bar'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlProgressBar</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Upload progress<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-692"></sl-copy-button></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__buttons">
|
||
<button
|
||
type="button"
|
||
class="code-preview__button code-preview__toggle"
|
||
aria-expanded="false"
|
||
aria-controls="code-preview-source-group-213"
|
||
>
|
||
Source
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<polyline points="6 9 12 15 18 9"></polyline>
|
||
</svg>
|
||
</button>
|
||
|
||
<button type="button" title="Show HTML code" class="code-preview__button code-preview__button--html">
|
||
HTML
|
||
</button>
|
||
|
||
<button type="button" title="Show React code" class="code-preview__button code-preview__button--react">
|
||
React
|
||
</button>
|
||
|
||
<button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
|
||
<svg
|
||
width="138"
|
||
height="26"
|
||
viewBox="0 0 138 26"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.3"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<path
|
||
d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"
|
||
></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 id="custom-height" class="anchor-heading">
|
||
Custom Height<a href="#custom-height" aria-label='Direct link to "Custom Height"'></a>
|
||
</h3>
|
||
<p>Use the <code>--height</code> custom property to set the progress bar’s height.</p>
|
||
|
||
<div class="code-preview">
|
||
<div class="code-preview__preview">
|
||
<sl-progress-bar value="50" style="--height: 6px"></sl-progress-bar>
|
||
|
||
<div class="code-preview__resizer">
|
||
<sl-icon name="grip-vertical"></sl-icon>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__source-group" id="code-preview-source-group-214">
|
||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||
<pre><code class="language-html" id="code-block-693"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-progress-bar</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--height</span><span class="token punctuation">:</span> 6px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-progress-bar</span><span class="token punctuation">></span></span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-693"></sl-copy-button></pre>
|
||
</div>
|
||
|
||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||
<pre><code class="language-jsx" id="code-block-694"><span class="token keyword">import</span> SlProgressBar <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-bar'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlProgressBar</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">50</span><span class="token punctuation">}</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token string-property property">'--height'</span><span class="token operator">:</span> <span class="token string">'6px'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-694"></sl-copy-button></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__buttons">
|
||
<button
|
||
type="button"
|
||
class="code-preview__button code-preview__toggle"
|
||
aria-expanded="false"
|
||
aria-controls="code-preview-source-group-214"
|
||
>
|
||
Source
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<polyline points="6 9 12 15 18 9"></polyline>
|
||
</svg>
|
||
</button>
|
||
|
||
<button type="button" title="Show HTML code" class="code-preview__button code-preview__button--html">
|
||
HTML
|
||
</button>
|
||
|
||
<button type="button" title="Show React code" class="code-preview__button code-preview__button--react">
|
||
React
|
||
</button>
|
||
|
||
<button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
|
||
<svg
|
||
width="138"
|
||
height="26"
|
||
viewBox="0 0 138 26"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.3"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<path
|
||
d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"
|
||
></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 id="showing-values" class="anchor-heading">
|
||
Showing Values<a href="#showing-values" aria-label='Direct link to "Showing Values"'></a>
|
||
</h3>
|
||
<p>Use the default slot to show a value.</p>
|
||
|
||
<div class="code-preview">
|
||
<div class="code-preview__preview">
|
||
<sl-progress-bar value="50" class="progress-bar-values">50%</sl-progress-bar>
|
||
|
||
<br />
|
||
|
||
<sl-button circle=""><sl-icon name="dash" label="Decrease"></sl-icon></sl-button>
|
||
<sl-button circle=""><sl-icon name="plus" label="Increase"></sl-icon></sl-button>
|
||
|
||
<script>
|
||
(() => {
|
||
const progressBar = document.querySelector('.progress-bar-values');
|
||
const subtractButton = progressBar.nextElementSibling.nextElementSibling;
|
||
const addButton = subtractButton.nextElementSibling;
|
||
|
||
addButton.addEventListener('click', () => {
|
||
const value = Math.min(100, progressBar.value + 10);
|
||
progressBar.value = value;
|
||
progressBar.textContent = `${value}%`;
|
||
});
|
||
|
||
subtractButton.addEventListener('click', () => {
|
||
const value = Math.max(0, progressBar.value - 10);
|
||
progressBar.value = value;
|
||
progressBar.textContent = `${value}%`;
|
||
});
|
||
})();
|
||
</script>
|
||
|
||
<div class="code-preview__resizer">
|
||
<sl-icon name="grip-vertical"></sl-icon>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__source-group" id="code-preview-source-group-215">
|
||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||
<pre><code class="language-html" id="code-block-695"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-progress-bar</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>progress-bar-values<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>50%<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-progress-bar</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">circle</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dash<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Decrease<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">circle</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>plus<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Increase<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
<span class="token keyword">const</span> progressBar <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.progress-bar-values'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> subtractButton <span class="token operator">=</span> progressBar<span class="token punctuation">.</span>nextElementSibling<span class="token punctuation">.</span>nextElementSibling<span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> addButton <span class="token operator">=</span> subtractButton<span class="token punctuation">.</span>nextElementSibling<span class="token punctuation">;</span>
|
||
|
||
addButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> value <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">min</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">,</span> progressBar<span class="token punctuation">.</span>value <span class="token operator">+</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
progressBar<span class="token punctuation">.</span>value <span class="token operator">=</span> value<span class="token punctuation">;</span>
|
||
progressBar<span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">%</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
subtractButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> value <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> progressBar<span class="token punctuation">.</span>value <span class="token operator">-</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
progressBar<span class="token punctuation">.</span>value <span class="token operator">=</span> value<span class="token punctuation">;</span>
|
||
progressBar<span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">%</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-695"></sl-copy-button></pre>
|
||
</div>
|
||
|
||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||
<pre><code class="language-jsx" id="code-block-696"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlProgressBar <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-bar'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> <span class="token punctuation">[</span>value<span class="token punctuation">,</span> setValue<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token number">50</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">function</span> <span class="token function">adjustValue</span><span class="token punctuation">(</span><span class="token parameter">amount</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">let</span> newValue <span class="token operator">=</span> value <span class="token operator">+</span> amount<span class="token punctuation">;</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>newValue <span class="token operator"><</span> <span class="token number">0</span><span class="token punctuation">)</span> newValue <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>newValue <span class="token operator">></span> <span class="token number">100</span><span class="token punctuation">)</span> newValue <span class="token operator">=</span> <span class="token number">100</span><span class="token punctuation">;</span>
|
||
<span class="token function">setValue</span><span class="token punctuation">(</span>newValue<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlProgressBar</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>value<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>value<span class="token punctuation">}</span><span class="token plain-text">%</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlProgressBar</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlButton</span></span> <span class="token attr-name">circle</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">adjustValue</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlIcon</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dash<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Decrease<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlButton</span></span> <span class="token attr-name">circle</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">adjustValue</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlIcon</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>plus<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Increase<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-696"></sl-copy-button></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__buttons">
|
||
<button
|
||
type="button"
|
||
class="code-preview__button code-preview__toggle"
|
||
aria-expanded="false"
|
||
aria-controls="code-preview-source-group-215"
|
||
>
|
||
Source
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<polyline points="6 9 12 15 18 9"></polyline>
|
||
</svg>
|
||
</button>
|
||
|
||
<button type="button" title="Show HTML code" class="code-preview__button code-preview__button--html">
|
||
HTML
|
||
</button>
|
||
|
||
<button type="button" title="Show React code" class="code-preview__button code-preview__button--react">
|
||
React
|
||
</button>
|
||
|
||
<button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
|
||
<svg
|
||
width="138"
|
||
height="26"
|
||
viewBox="0 0 138 26"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.3"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<path
|
||
d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"
|
||
></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 id="indeterminate" class="anchor-heading">
|
||
Indeterminate<a href="#indeterminate" aria-label='Direct link to "Indeterminate"'></a>
|
||
</h3>
|
||
<p>
|
||
The <code>indeterminate</code> attribute can be used to inform the user that the operation is pending, but
|
||
its status cannot currently be determined. In this state, <code>value</code> is ignored and the label, if
|
||
present, will not be shown.
|
||
</p>
|
||
|
||
<div class="code-preview">
|
||
<div class="code-preview__preview">
|
||
<sl-progress-bar indeterminate=""></sl-progress-bar>
|
||
|
||
<div class="code-preview__resizer">
|
||
<sl-icon name="grip-vertical"></sl-icon>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__source-group" id="code-preview-source-group-216">
|
||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||
<pre><code class="language-html" id="code-block-697"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-progress-bar</span> <span class="token attr-name">indeterminate</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-progress-bar</span><span class="token punctuation">></span></span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-697"></sl-copy-button></pre>
|
||
</div>
|
||
|
||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||
<pre><code class="language-jsx" id="code-block-698"><span class="token keyword">import</span> SlProgressBar <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-bar'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlProgressBar</span></span> <span class="token attr-name">indeterminate</span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-698"></sl-copy-button></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__buttons">
|
||
<button
|
||
type="button"
|
||
class="code-preview__button code-preview__toggle"
|
||
aria-expanded="false"
|
||
aria-controls="code-preview-source-group-216"
|
||
>
|
||
Source
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<polyline points="6 9 12 15 18 9"></polyline>
|
||
</svg>
|
||
</button>
|
||
|
||
<button type="button" title="Show HTML code" class="code-preview__button code-preview__button--html">
|
||
HTML
|
||
</button>
|
||
|
||
<button type="button" title="Show React code" class="code-preview__button code-preview__button--react">
|
||
React
|
||
</button>
|
||
|
||
<button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
|
||
<svg
|
||
width="138"
|
||
height="26"
|
||
viewBox="0 0 138 26"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.3"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<path
|
||
d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"
|
||
></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<h2 id="importing" class="anchor-heading">
|
||
Importing<a href="#importing" aria-label='Direct link to "Importing"'></a>
|
||
</h2>
|
||
<p>
|
||
If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free
|
||
to use any of the following snippets to
|
||
<a href="/getting-started/installation#cherry-picking">cherry pick</a> this component.
|
||
</p>
|
||
|
||
<sl-tab-group>
|
||
<sl-tab slot="nav" panel="script">Script</sl-tab>
|
||
<sl-tab slot="nav" panel="import">Import</sl-tab>
|
||
<sl-tab slot="nav" panel="bundler">Bundler</sl-tab>
|
||
<sl-tab slot="nav" panel="react">React</sl-tab>
|
||
|
||
<sl-tab-panel name="script">
|
||
<p>
|
||
To import this component from
|
||
<a
|
||
href="https://www.jsdelivr.com/package/npm/@onsonr/nebula"
|
||
class="external-link"
|
||
rel="noopener noreferrer"
|
||
target="_blank"
|
||
>the CDN</a
|
||
>
|
||
using a script tag:
|
||
</p>
|
||
<pre><code class="language-html" id="code-block-699"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/progress-bar/progress-bar.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-699"></sl-copy-button></pre>
|
||
</sl-tab-panel>
|
||
|
||
<sl-tab-panel name="import">
|
||
<p>
|
||
To import this component from
|
||
<a
|
||
href="https://www.jsdelivr.com/package/npm/@onsonr/nebula"
|
||
class="external-link"
|
||
rel="noopener noreferrer"
|
||
target="_blank"
|
||
>the CDN</a
|
||
>
|
||
using a JavaScript import:
|
||
</p>
|
||
<pre><code class="language-js" id="code-block-700"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/progress-bar/progress-bar.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-700"></sl-copy-button></pre>
|
||
</sl-tab-panel>
|
||
|
||
<sl-tab-panel name="bundler">
|
||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||
<pre><code class="language-js" id="code-block-701"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/progress-bar/progress-bar.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-701"></sl-copy-button></pre>
|
||
</sl-tab-panel>
|
||
|
||
<sl-tab-panel name="react">
|
||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||
<pre><code class="language-js" id="code-block-702"><span class="token keyword">import</span> SlProgressBar <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-bar'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-702"></sl-copy-button></pre>
|
||
</sl-tab-panel>
|
||
</sl-tab-group>
|
||
|
||
<h2 id="slots" class="anchor-heading">Slots<a href="#slots" aria-label='Direct link to "Slots"'></a></h2>
|
||
|
||
<div class="table-scroll">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th class="table-name">Name</th>
|
||
<th class="table-description">Description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="nowrap">(default)</td>
|
||
<td>A label to show inside the progress indicator.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<p>
|
||
<em>Learn more about <a href="/getting-started/usage#slots">using slots</a>.</em>
|
||
</p>
|
||
|
||
<h2 id="properties" class="anchor-heading">
|
||
Properties<a href="#properties" aria-label='Direct link to "Properties"'></a>
|
||
</h2>
|
||
|
||
<div class="table-scroll">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th class="table-name">Name</th>
|
||
<th class="table-description">Description</th>
|
||
<th class="table-reflects">Reflects</th>
|
||
<th class="table-type">Type</th>
|
||
<th class="table-default">Default</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>
|
||
<code class="nowrap">value</code>
|
||
</td>
|
||
<td>The current progress as a percentage, 0 to 100.</td>
|
||
<td style="text-align: center">
|
||
<sl-icon label="yes" name="check-lg"></sl-icon>
|
||
</td>
|
||
<td>
|
||
<code>number</code>
|
||
</td>
|
||
<td>
|
||
<code>0</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code class="nowrap">indeterminate</code>
|
||
</td>
|
||
<td>
|
||
When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an
|
||
indeterminate state.
|
||
</td>
|
||
<td style="text-align: center">
|
||
<sl-icon label="yes" name="check-lg"></sl-icon>
|
||
</td>
|
||
<td>
|
||
<code>boolean</code>
|
||
</td>
|
||
<td>
|
||
<code>false</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code class="nowrap">label</code>
|
||
</td>
|
||
<td>A custom label for assistive devices.</td>
|
||
<td style="text-align: center"></td>
|
||
<td>
|
||
<code>string</code>
|
||
</td>
|
||
<td>
|
||
<code>''</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="nowrap"><code>updateComplete</code></td>
|
||
<td>
|
||
A read-only promise that resolves when the component has
|
||
<a href="/getting-started/usage?#component-rendering-and-updating">finished updating</a>.
|
||
</td>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<p>
|
||
<em
|
||
>Learn more about
|
||
<a href="/getting-started/usage#attributes-and-properties">attributes and properties</a>.</em
|
||
>
|
||
</p>
|
||
|
||
<h2 id="custom-properties" class="anchor-heading">
|
||
Custom Properties<a href="#custom-properties" aria-label='Direct link to "Custom Properties"'></a>
|
||
</h2>
|
||
|
||
<div class="table-scroll">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th class="table-name">Name</th>
|
||
<th class="table-description">Description</th>
|
||
<th class="table-default">Default</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="nowrap"><code>--height</code></td>
|
||
<td>The progress bar’s height.</td>
|
||
<td></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="nowrap"><code>--track-color</code></td>
|
||
<td>The color of the track.</td>
|
||
<td></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="nowrap"><code>--indicator-color</code></td>
|
||
<td>The color of the indicator.</td>
|
||
<td></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="nowrap"><code>--label-color</code></td>
|
||
<td>The color of the label.</td>
|
||
<td></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<p>
|
||
<em
|
||
>Learn more about
|
||
<a href="/getting-started/usage#custom-properties">customizing CSS custom properties</a>.</em
|
||
>
|
||
</p>
|
||
|
||
<h2 id="parts" class="anchor-heading">Parts<a href="#parts" aria-label='Direct link to "Parts"'></a></h2>
|
||
|
||
<div class="table-scroll">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th class="table-name">Name</th>
|
||
<th class="table-description">Description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="nowrap"><code>base</code></td>
|
||
<td>The component’s base wrapper.</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="nowrap"><code>indicator</code></td>
|
||
<td>The progress bar’s indicator.</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="nowrap"><code>label</code></td>
|
||
<td>The progress bar’s label.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<p>
|
||
<em>Learn more about <a href="/getting-started/customizing/#css-parts">customizing CSS parts</a>.</em>
|
||
</p>
|
||
</div>
|
||
</article>
|
||
</main>
|
||
</body>
|
||
</html>
|