DashRecon Brand Motion

dash

Route changes and full-page loads. The speed lines fire through the mark, the arrow answers.

gif 143 KBwebp 137 KBapng 228 KBvector 1.2 KB

shimmer

Skeleton placeholder while a page, table or dashboard is still fetching.

gif 449 KBwebp 698 KBapng 1293 KBvector 1.2 KB

scan

Long jobs with real progress: file imports, recon runs, report builds.

gif 140 KBwebp 132 KBapng 204 KBvector 1.2 KB

orbit

A straight swap for a generic spinner. Reads as a spinner at any size.

gif 284 KBwebp 458 KBapng 811 KBvector 1.2 KB

pulse

Tight spaces — buttons, table cells, toolbars. Still legible at 24px.

gif 148 KBwebp 183 KBapng 308 KBvector 1.2 KB

Putting it in the app

React — DashReconLoader.jsx

// no dependencies, inherits color from the parent
import DashReconLoader from './DashReconLoader';

<DashReconLoader variant="dash" size={96} />
<DashReconLoader variant="pulse" size={24} />
<DashReconLoader variant="shimmer" size={72} duration="2s" />

// inside a MUI Backdrop
<Backdrop open={loading} sx={{ bgcolor: 'rgba(255,255,255,.92)' }}>
  <DashReconLoader variant="scan" size={140} />
</Backdrop>

Plain HTML & flat image

<!-- vector: link the stylesheet once -->
<link rel="stylesheet" href="dash-recon-loader.css">
<div class="drl drl-orbit" style="width:72px;height:72px">
  <!-- paste the <svg> from dash-recon-loader.html -->
</div>

<!-- flat image: webp first, gif for old clients -->
<picture>
  <source srcset="webp/dash.webp" type="image/webp">
  <img src="gif/dash.gif" width="96" alt="Loading">
</picture>

dash-recon-loaders/ ├── index.html this page ├── code/ │ ├── DashReconLoader.jsx React component, all five variants │ ├── dash-recon-loader.css keyframes only, 2.8 KB │ └── dash-recon-loader.html copy-paste markup for each variant ├── logo/ traced vector source, mark + full lockup ├── webp/ animated WebP — transparent, best quality ├── gif/ animated GIF — white background, universal └── apng/ animated PNG — transparent, no colour banding