Loader

Experimental Alpha

This library is a work-in-progress. We are releasing it early to gather feedback, but it is not ready for production.

Brief description of what the component does and when to use it.

Examples

Vue

Lit

React

Live Preview

Default

Sizes

CSS Shadow Parts Customization

Use CSS Shadow Parts to customize the loader's appearance.

View Vue Code

<template>
  <section>
    <div class="mbe4">
      <h2>Default</h2>
      <VueLoader />
    </div>
    <div class="mbe4">
      <h2>Sizes</h2>
      <div
        class="flex flex-col items-center"
        style="gap: 24px"
      >
        <VueLoader size="small" />
        <VueLoader />
        <VueLoader size="large" />
      </div>
    </div>
    <div class="mbe4">
      <h2>CSS Shadow Parts Customization</h2>
      <p class="mbs2 mbe3">
        Use CSS Shadow Parts to customize the loader's appearance.
      </p>
      <VueLoader class="custom-loader" />
    </div>
  </section>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { VueLoader } from "agnosticui-core/loader/vue";

export default defineComponent({
  name: "LoaderExamples",
  components: {
    VueLoader,
  },
});
</script>

<style>
.custom-loader::part(ag-loader) {
  --loading-color: var(--ag-primary);
}
</style>

Live Preview

View Lit / Web Component Code

import { LitElement, html } from 'lit';
import 'agnosticui-core/loader';

export class LoaderLitExamples extends LitElement {
  createRenderRoot() {
    return this;
  }

  render() {
    return html`
      <section>
        <div class="mbe4">
          <h2>Default</h2>
          <ag-loader></ag-loader>
        </div>
        <div class="mbe4">
          <h2>Sizes</h2>
          <div class="flex flex-col items-center" style="gap: 24px">
            <ag-loader size="small"></ag-loader>
            <ag-loader></ag-loader>
            <ag-loader size="large"></ag-loader>
          </div>
        </div>
        <div class="mbe4">
          <h2>CSS Shadow Parts Customization</h2>
          <p class="mbs2 mbe3">
            Use CSS Shadow Parts to customize the loader's appearance.
          </p>
          <ag-loader class="custom-loader"></ag-loader>
        </div>
      </section>
    `;
  }
}

// Register the custom element
customElements.define('loader-lit-examples', LoaderLitExamples);

Interactive Preview: Click the "Open in StackBlitz" button below to see this example running live in an interactive playground.

View React Code

import { ReactLoader } from "agnosticui-core/loader/react";

export default function LoaderReactExamples() {
  return (
    <section>
      <div className="mbe4">
        <h2>Default</h2>
        <ReactLoader />
      </div>
      <div className="mbe4">
        <h2>Sizes</h2>
        <div className="flex flex-col items-center" style={{ gap: "24px" }}>
          <ReactLoader size="small" />
          <ReactLoader />
          <ReactLoader size="large" />
        </div>
      </div>
      <div className="mbe4">
        <h2>CSS Shadow Parts Customization</h2>
        <p className="mbs2 mbe3">
          Use CSS Shadow Parts to customize the loader's appearance.
        </p>
        <ReactLoader className="custom-loader" />
      </div>
    </section>
  );
}

Open in StackBlitz

Usage

TIP

The framework examples below import AgnosticUI as an npm package. Alternatively, you can use the CLI for complete control, AI/LLM visibility, and full code ownership:

npx ag init --framework FRAMEWORK # react, vue, lit, svelte, etc.
npx ag add Loader

The CLI copies source code directly into your project, giving you full visibility and control. After running npx ag add, you'll receive exact import instructions.

Vue

<template>
  <VueLoader />
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { VueLoader } from 'agnosticui-core/loader/vue';
export default defineComponent({
  components: { VueLoader }
});
</script>

React

import { ReactLoader } from 'agnosticui-core/loader/react';
export default function Example() {
  return <ReactLoader />;
}

Lit (Web Components)

<script type="module">
  import 'agnosticui-core/loader';
</script>
<ag-loader></ag-loader>

Props

Prop	Type	Default	Description
size	small | default | large	default	Sets the loader size.
ariaLabel	string	Loading...	The ARIA label for accessibility.

Variants

The loader component has size variants that include: small, default, and large.

CSS Shadow Parts

Part	Description
ag-loader	The main loader container element.
ag-loader-label	The screen reader text element.

Events

Event	Payload	Description

Accessibility

This section can be filled out by the LLM agent based on the SpecSheet.md.