mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-16 10:51:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(component): add ProgressIndicator

Browse source 
Closes #24
This commit is contained in:
Eric Liu 2019-12-21 11:03:50 -08:00
commit a0c4d347d5
8 changed files with 244 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/components/ProgressIndicator/ProgressIndicator.Skeleton.svelte Normal file
View file

@ -0,0 +1,24 @@
<script>
let className = undefined;
export { className as class };
export let vertical = false;
export let style = undefined;
import { cx } from '../../lib';
const _class = cx('--progress', vertical && '--progress--vertical', '--skeleton', className);
</script>
<ul on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
{#each [0, 1, 2, 3] as item, i (item)}
<li class={cx('--progress-step', '--progress-step--incomplete')}>
<div class={cx('--progress-step-button', '--progress-step-button--unclickable')}>
<svg>
<path d="M 7, 7 m -7, 0 a 7,7 0 1,0 14,0 a 7,7 0 1,0 -14,0" />
</svg>
<p class={cx('--progress-label')} />
<span class={cx('--progress-line')} />
</div>
</li>
{/each}
</ul>