mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 03:26: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 */
export let id = "ccs-" + Math.random().toString(36);
$: spinnerRadius = small ? "26.8125" : "37.5";
$: spinnerRadius = small ? "42" : "44";
</script>
{#if withOverlay}
@ -33,20 +33,20 @@
>
<!-- svelte-ignore a11y-label-has-associated-control -->
<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>
{#if small}
<circle
class:bx--loading__background="{true}"
cx="0"
cy="0"
cx="50%"
cy="50%"
r="{spinnerRadius}"
></circle>
{/if}
<circle
class:bx--loading__stroke="{true}"
cx="0"
cy="0"
cx="50%"
cy="50%"
r="{spinnerRadius}"
></circle>
</svg>
@ -64,20 +64,20 @@
>
<!-- svelte-ignore a11y-label-has-associated-control -->
<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>
{#if small}
<circle
class:bx--loading__background="{true}"
cx="0"
cy="0"
cx="50%"
cy="50%"
r="{spinnerRadius}"
></circle>
{/if}
<circle
class:bx--loading__stroke="{true}"
cx="0"
cy="0"
cx="50%"
cy="50%"
r="{spinnerRadius}"
></circle>
</svg>