`<ModelLoader />`

Loading screen for the model download phase. Spinner ring around a brain → logo cross-fade keyed off percent: brain occupies 0–50%, logo fades in from 50–100%. Dendrite's onProgress callback drives the values; this demo cycles through fake progress to show the animation.

Vanilla setups can replicate the visual via the BEM classes — animate the clip-path / opacity inline styles based on your own loading state.

42%

Downloading params_shard_2…

<script setup lang="ts">
import { useNeuron, ModelLoader } from '@agent-layer-zero/dendrite-vue'

const { isLoading, loadPercent, loadText } = useNeuron({
  modelId: 'gemma-2-2b-it-q4f16_1-MLC',
})
</script>

<template>
  <ModelLoader
    v-if="isLoading"
    :percent="loadPercent"
    :text="loadText"
    logo-src="/your-logo.png"
    brain-src="/brain.svg"
  />
</template>

import { useNeuron, ModelLoader } from '@agent-layer-zero/dendrite-react'

export function App() {
  const { isLoading, loadPercent, loadText } = useNeuron({
    modelId: 'gemma-2-2b-it-q4f16_1-MLC',
  })

  if (!isLoading) return null
  return (
    <ModelLoader
      percent={loadPercent}
      text={loadText}
      logoSrc="/your-logo.png"
      brainSrc="/brain.svg"
    />
  )
}

<div class="alz-loader">
  <div class="alz-loader__ring">
    <div class="alz-loader__spinner"></div>
    <div class="alz-loader__icon">
      <div class="alz-loader__percent-ring">42%</div>
    </div>
  </div>
  <div class="alz-loader__text">
    <p class="alz-loader__percent">42%</p>
    <p class="alz-loader__status">Downloading params_shard_2…</p>
  </div>
</div>