1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | <ul data-progress data-progress-current class="bx--progress bx--progress--vertical">
|
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>
|