Agnostic

Loader

The Loader component is used to assure a user that content is being loaded — typically, when wait times are unknown due to an asynchronous data fetch or render cycle.

Examples

Loaders

Custom aria
Custom aria
Custom aria

Custom color via --agnostic-loading-color:

Custom aria

Usage

astro logo

React, Vue, and Svelte examples on a single playground page 🚀 💥

codesandbox logo View in CodeSandbox Stackblitz logo View in Stackblitz

react logoReact

View source
import "agnostic-react/dist/common.min.css";
import "agnostic-react/dist/esm/index.css";
import { Loader } from "agnostic-react";
export const YourComponent = () => (
  <div>
    <Loader />
    <Loader size="small" />
    <Loader size="large" />
    <Loader size="xlarge" />
  </div>
)

React: component source, storybook tests

Vue 3 logoVue 3

View source
<script setup>
import "agnostic-vue/dist/common.min.css";
import "agnostic-vue/dist/index.css";
import { Loader } from "agnostic-vue";
</script>
<template>
  <h3>Default close</h3>
  <Loader />
  <h3>Sizes</h3>
  <Loader />
  <Loader size="small" />
  <Loader size="large" />
  <Loader size="xlarge" />
</template>

Vue 3: component source, storybook tests

Svelte logoSvelte

View source
<script>
  import 'agnostic-svelte/css/common.min.css';
  import { Loader } from "agnostic-svelte";
</script>
<div>
  <Loader />
  <Loader size="small">
  <Loader size="large">
  <Loader size="xlarge">
</div>

Svelte: component source, storybook tests

Angular logoAngular (Experimental)

View source

In your Angular configuration (likely angular.json) ensure you're including the common AgnosticUI styles:

"styles": ["agnostic-angular/common.min.css"],

Add AgnosticUI's AgModule module:



 





 





import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AgModule } from 'agnostic-angular';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AgModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Now you can use in your components:

import { Component } from '@angular/core';

@Component({
  selector: 'your-component',
  template: `<div>
    <ag-loading></ag-loading>
    <ag-loading size="small"></ag-loading>
    <ag-loading size="large"></ag-loading>
    <ag-loading size="xlarge"></ag-loading>
  </div>`
})
export class YourComponent {}

Angular: component source, storybook tests

Storybook

You can run the framework Storybooks and see live examples for React, Vue 3, Svelte, Astro, and Angular (experimental). The following will set up Storybook and run locally:

How to run Storybook
git clone git@github.com:AgnosticUI/agnosticui.git
cd agnosticui/<PACKAGE_NAME> && npm i # e.g. cd agnosticui/agnostic-react && npm i
npm run storybook

See Running Storybook.