@chameleon-ds/progress-bar

Chameleon progress bar

Usage no npm install needed!

<script type="module">
  import chameleonDsProgressBar from 'https://cdn.skypack.dev/@chameleon-ds/progress-bar';
</script>

README

Chameleon Progress Bar

import { html } from "@open-wc/demoing-storybook";
import { withKnobs, number, text } from "@open-wc/demoing-storybook";
import "./chameleon-progress-bar.js";

export default {
  title: "Components|Status/Progress Bar",
  component: "chameleon-progress-bar",
  decorators: [withKnobs],
  options: { selectedPanel: "storybookjs/docs/panel" },
};

Properties

Property Name Type(s) Default Value Description
percent Number undefined The total number of items in all pages
total Number 0 The amount of pages of items
completed Number 0 The multiselect's current page
label String "" The max length of visible pages

Examples

Default

export const Default = () => {
  const percent = number("Percent", 75);
  const label = text("Label", "Processing...");

  return html`
    <chameleon-progress-bar percent="${percent}" label="${label}">
    </chameleon-progress-bar>
  `;
};