feat: initial commit

src/components/Loading/Loading.Story.svelte

@@ -0,0 +1,8 @@
+<script>
+  import Layout from '../../internal/ui/Layout.svelte';
+  import Loading from './Loading.svelte';
+</script>
+
+<Layout>
+  <Loading {...$$props} />
+</Layout>

src/components/Loading/Loading.stories.js

@@ -0,0 +1,14 @@
+import { withKnobs, boolean, text } from '@storybook/addon-knobs';
+import Component from './Loading.Story.svelte';
+
+export default { title: 'Loading', decorators: [withKnobs] };
+
+export const Default = () => ({
+  Component,
+  props: {
+    active: boolean('Active (active)', true),
+    withOverlay: boolean('With overlay (withOverlay)', false),
+    small: boolean('Small (small)', false),
+    description: text('Description (description)', 'Active loading indicator')
+  }
+});

src/components/Loading/Loading.svelte

@@ -0,0 +1,57 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let active = true;
+  export let withOverlay = true;
+  export let small = false;
+  export let description = 'Active loading indicator';
+  export let props = {};
+
+  import { cx } from '../../lib';
+
+  const loadingId = `loading-id-${Math.random()}`;
+  const spinnerRadius = small ? '26.8125' : '37.5';
+  const _class = cx(
+    '--loading',
+    small && '--loading--small',
+    !active && '--loading--stop',
+    className
+  );
+  const _overlayClass = cx('--loading-overlay', !active && '--loading-overlay--stop');
+</script>
+
+{#if withOverlay}
+  <div class={_overlayClass}>
+    <div
+      {...props}
+      aria-atomic="true"
+      aria-labelledby={loadingId}
+      aria-live={active ? 'assertive' : 'off'}
+      class={_class}>
+      <label id={loadingId} class={cx('--visually-hidden')}>{description}</label>
+      <svg class={cx('--loading__svg')} viewBox="-75 -75 150 150">
+        <title>{description}</title>
+        {#if small}
+          <circle class={cx('--loading__background')} cx="0" cy="0" r={spinnerRadius} />
+        {/if}
+        <circle class={cx('--loading__stroke')} cx="0" cy="0" r={spinnerRadius} />
+      </svg>
+    </div>
+  </div>
+{:else}
+  <div
+    {...props}
+    aria-atomic="true"
+    aria-labelledby={loadingId}
+    aria-live={active ? 'assertive' : 'off'}
+    class={_class}>
+    <label id={loadingId} class={cx('--visually-hidden')}>{description}</label>
+    <svg class={cx('--loading__svg')} viewBox="-75 -75 150 150">
+      <title>{description}</title>
+      {#if small}
+        <circle class={cx('--loading__background')} cx="0" cy="0" r={spinnerRadius} />
+      {/if}
+      <circle class={cx('--loading__stroke')} cx="0" cy="0" r={spinnerRadius} />
+    </svg>
+  </div>
+{/if}

src/components/Loading/index.js

@@ -0,0 +1,3 @@
+import Loading from './Loading.svelte';
+
+export default Loading;