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

fix(loading): adjust spinner styles

Browse source
This commit is contained in:
Eric Liu 2021-01-22 12:44:30 -08:00
commit 0c8393637a
1 changed files with 11 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/Loading/Loading.svelte
View file

@ -14,7 +14,7 @@
/** Set an id for the label element */ /** Set an id for the label element */
export let id = "ccs-" + Math.random().toString(36); export let id = "ccs-" + Math.random().toString(36);
$: spinnerRadius = small ? "26.8125" : "37.5"; $: spinnerRadius = small ? "42" : "44";
</script> </script>
{#if withOverlay} {#if withOverlay}
@ -33,20 +33,20 @@
> >
<!-- svelte-ignore a11y-label-has-associated-control --> <!-- svelte-ignore a11y-label-has-associated-control -->
<label class:bx--visually-hidden="{true}" id="{id}">{description}</label> <label class:bx--visually-hidden="{true}" id="{id}">{description}</label>
<svg class:bx--loading__svg="{true}" viewBox="-75 -75 150 150"> <svg class:bx--loading__svg="{true}" viewBox="0 0 100 100">
<title>{description}</title> <title>{description}</title>
{#if small} {#if small}
<circle <circle
class:bx--loading__background="{true}" class:bx--loading__background="{true}"
cx="0" cx="50%"
cy="0" cy="50%"
r="{spinnerRadius}" r="{spinnerRadius}"
></circle> ></circle>
{/if} {/if}
<circle <circle
class:bx--loading__stroke="{true}" class:bx--loading__stroke="{true}"
cx="0" cx="50%"
cy="0" cy="50%"
r="{spinnerRadius}" r="{spinnerRadius}"
></circle> ></circle>
</svg> </svg>
@ -64,20 +64,20 @@
> >
<!-- svelte-ignore a11y-label-has-associated-control --> <!-- svelte-ignore a11y-label-has-associated-control -->
<label class:bx--visually-hidden="{true}" id="{id}">{description}</label> <label class:bx--visually-hidden="{true}" id="{id}">{description}</label>
<svg class:bx--loading__svg="{true}" viewBox="-75 -75 150 150"> <svg class:bx--loading__svg="{true}" viewBox="0 0 100 100">
<title>{description}</title> <title>{description}</title>
{#if small} {#if small}
<circle <circle
class:bx--loading__background="{true}" class:bx--loading__background="{true}"
cx="0" cx="50%"
cy="0" cy="50%"
r="{spinnerRadius}" r="{spinnerRadius}"
></circle> ></circle>
{/if} {/if}
<circle <circle
class:bx--loading__stroke="{true}" class:bx--loading__stroke="{true}"
cx="0" cx="50%"
cy="0" cy="50%"
r="{spinnerRadius}" r="{spinnerRadius}"
></circle> ></circle>
</svg> </svg>