UNPKG

carbon-components/html/progress-indicator/progress-indicator.html

Version:

1<!--
Copyright IBM Corp. 2016, 2018
3
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
6-->
7
8<ul data-progress data-progress-current class="bx--progress ">
  <li class="bx--progress-step bx--progress-step--complete "  >
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 13c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"></path><path d="M7 10.8L4.5 8.3l.8-.8L7 9.2l3.7-3.7.8.8z"></path></svg>
    <p tabindex="0" class="bx--progress-label" >
        First step
    </p>
    <span class="bx--progress-line"></span>
  </li>
  <li class="bx--progress-step bx--progress-step--current "  >
      <svg>
          <circle cx="12" cy="12" r="12"></circle>
          <circle cx="12" cy="12" r="6"></circle>
      </svg>
    <p tabindex="0" class="bx--progress-label" >
        Second Step
    </p>
    <span class="bx--progress-line"></span>
  </li>
  <li class="bx--progress-step bx--progress-step--incomplete "  >
        <svg>
          <circle cx="12" cy="12" r="12"></circle>
        </svg>
    <p tabindex="0" class="bx--progress-label" >
        Third Step
    </p>
    <span class="bx--progress-line"></span>
  </li>
  <li class="bx--progress-step bx--progress-step--incomplete "  data-invalid  >
        <svg>
          <circle cx="12" cy="12" r="12"></circle>
        </svg>
    <p tabindex="0" class="bx--progress-label" >
        Fourth step
    </p>
    <span class="bx--progress-line"></span>
  </li>
  <li class="bx--progress-step bx--progress-step--incomplete  bx--progress-step--disabled "   aria-disabled="true" >
        <svg>
          <circle cx="12" cy="12" r="12"></circle>
        </svg>
    <p tabindex="0" class="bx--progress-label" >
        Fifth step
    </p>
    <span class="bx--progress-line"></span>
  </li>
53</ul>

1	`<!--`
2	`Copyright IBM Corp. 2016, 2018`
3
4	`This source code is licensed under the Apache-2.0 license found in the`
5	`LICENSE file in the root directory of this source tree.`
6	`-->`
7
8	`<ul data-progress data-progress-current class="bx--progress ">`
9	`<li class="bx--progress-step bx--progress-step--complete " >`
10	`<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 13c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"></path><path d="M7 10.8L4.5 8.3l.8-.8L7 9.2l3.7-3.7.8.8z"></path></svg>`
11	`<p tabindex="0" class="bx--progress-label" >`
12	`First step`
13	`</p>`
14	`<span class="bx--progress-line"></span>`
15	`</li>`
16	`<li class="bx--progress-step bx--progress-step--current " >`
17	`<svg>`
18	`<circle cx="12" cy="12" r="12"></circle>`
19	`<circle cx="12" cy="12" r="6"></circle>`
20	`</svg>`
21	`<p tabindex="0" class="bx--progress-label" >`
22	`Second Step`
23	`</p>`
24	`<span class="bx--progress-line"></span>`
25	`</li>`
26	`<li class="bx--progress-step bx--progress-step--incomplete " >`
27	`<svg>`
28	`<circle cx="12" cy="12" r="12"></circle>`
29	`</svg>`
30	`<p tabindex="0" class="bx--progress-label" >`
31	`Third Step`
32	`</p>`
33	`<span class="bx--progress-line"></span>`
34	`</li>`
35	`<li class="bx--progress-step bx--progress-step--incomplete " data-invalid >`
36	`<svg>`
37	`<circle cx="12" cy="12" r="12"></circle>`
38	`</svg>`
39	`<p tabindex="0" class="bx--progress-label" >`
40	`Fourth step`
41	`</p>`
42	`<span class="bx--progress-line"></span>`
43	`</li>`
44	`<li class="bx--progress-step bx--progress-step--incomplete bx--progress-step--disabled " aria-disabled="true" >`
45	`<svg>`
46	`<circle cx="12" cy="12" r="12"></circle>`
47	`</svg>`
48	`<p tabindex="0" class="bx--progress-label" >`
49	`Fifth step`
50	`</p>`
51	`<span class="bx--progress-line"></span>`
52	`</li>`
53	`</ul>`