Utilities

Spinner

Loading spinner indicator for async operations.

Props

Prop	Type	Default	Description
`size`	`number`	`24`	Spinner size in pixels
`color`	`string`	`'currentColor'`	Spinner color

Import

import { Spinner } from '@the-vcsi/scrolly-kit';

Usage

<script>
  import { Spinner } from '@the-vcsi/scrolly-kit';
</script>

{#if loading}
  <Spinner size={32} />
{/if}

Full Source

💡 Components rely on --vcsi-* tokens from tokens.css. You'd need to either need to @import '@the-vcsi/scrolly-kit/styles/tokens.css'; to access the CSS variables or define equivalent variables in your app.css. We also are using types here to provide hints when users are using the components in their project.

<script>
  let { text = "Loading..." } = $props();
</script>

<div class="loading-container">
  <div class="spinner"></div>
  <span class="loading-text">{text}</span>
</div>

<style>
  .loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: var(--vcsi-space-md);
  }

  .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--vcsi-color-accent, #007acc);
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  .loading-text {
    font-family: var(--vcsi-font-serif);
    font-size: 1.1rem;
    color: var(--vcsi-gray-600);
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>