The agnostic-astro package utilizes XElement under-the-hood in order to provide build-time Astro components. These build-time components will help your project get closer to realizing a mostly no client-side runtime…if you do it right, this should mean an all-green 100% Lighthouse performance score! Leverage the benefits of Islands architecture by sending mostly server built agnostic-astro components. Then, sprinkle client-hydrated ones only as needed.

AgnosticUI requires the import of the common.min.css from your Astro base layout:

import 'agnostic-css/public/css-dist/common.min.css';

Then you can import Astro Loader component:

import AgLoader from 'agnostic-astro/Loader.astro';

Here's the agnostic-astro Loader component in use:

...
<AgLoader class="mbs40" size="small" />
<AgLoader class="mbs40" label="My screenreader only label for accessibility" />
<AgLoader class="mbs40" size="large" />
<div class="h4 mbs24">In 5 seconds a customized Loader will be shown below…</div>
<AgLoader class="manuallyShow mbs40" showOnMount={false} size="xlarge" style="--agnostic-loading-color: salmon;" />
<div class="h4 mbs24 mbe24">Center via flex container</div>
<div class="flex justify-center">
  <AgLoader class="mbs40" size="large" />
</div>
...and so on
<script>
  setTimeout(() => {
    document.querySelector('.manuallyShow').setAttribute('aria-busy', 'true');
  }, 5000);
</script>