@abcnews/components-builder 0.0.9 → 0.0.11

package/README.md

@@ -196,6 +196,15 @@ As a prerequisite your builder must store its state in window.location.hash. E.g
 
 Prefixes correlate to the different marker types that have been implemented in the app. Users can choose which type of marker they want to copy. This is the same object as the `ScreenshotTool` component.
 
+## Loader
+
+A fairly straightforward spinner with the text "Loading" underneath. Use it when the user needs to wait for a process to complete. You can adjust the size or text:
+
+```svelte
+<Loader width="32px" />
+<Loader>Reticulating splines</Loader>
+```
+
 ## Developing
 
 Once you've nstalled dependencies with `npm install`, start a development storybook:

package/dist/Loader/Loader.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  /**
+   * @file
+   * A loading spinner
+   */
+  let { width = "32px", children = null } = $props();
+</script>
+
+<div class="loader" style:--width={width}>
+  <div class="loader__widget"></div>
+  <div class="loader__text">{@render children?.()}</div>
+</div>
+
+<style>
+  .loader {
+    font-family: "abcsans", sans-serif;
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.75rem;
+    animation: fadeIn 1s;
+  }
+  .loader__widget,
+  .loader__widget::after {
+    display: block;
+    position: relative;
+    width: var(--width);
+    height: var(--width);
+    border: 2px solid currentcolor;
+    border-radius: 100%;
+    box-sizing: border-box;
+  }
+  .loader__widget::after {
+    content: "";
+    display: block;
+    border-color: white;
+    position: absolute;
+    left: -2px;
+    top: -2px;
+    clip-path: polygon(0 0%, 50% 0, 50% 50%, 0% 50%);
+    animation: spin 1.5s linear infinite;
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(45deg);
+    }
+    to {
+      transform: rotate(405deg);
+    }
+  }
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+</style>

package/dist/Loader/Loader.svelte.d.ts

@@ -0,0 +1,6 @@
+declare const Loader: import("svelte").Component<{
+    width?: string;
+    children?: any;
+}, {}, "">;
+type Loader = ReturnType<typeof Loader>;
+export default Loader;

package/dist/index.d.ts

@@ -7,3 +7,4 @@ export { default as ScreenshotTool } from "./ScreenshotTool/ScreenshotTool.svelt
 export { default as Typeahead } from "./Typeahead/Typeahead.svelte";
 export { default as UpdateChecker } from "./UpdateChecker/UpdateChecker.svelte";
 export { default as MarkerAdmin } from "./MarkerAdmin/MarkerAdmin.svelte";
+export { default as Loader } from "./Loader/Loader.svelte";

package/dist/index.js

@@ -8,3 +8,4 @@ export { default as ScreenshotTool } from "./ScreenshotTool/ScreenshotTool.svelt
 export { default as Typeahead } from "./Typeahead/Typeahead.svelte";
 export { default as UpdateChecker } from "./UpdateChecker/UpdateChecker.svelte";
 export { default as MarkerAdmin } from "./MarkerAdmin/MarkerAdmin.svelte";
+export { default as Loader } from "./Loader/Loader.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abcnews/components-builder",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run prepack",