How to use your logo as an animated website loading screen

Option 1: Tie the animation to real loading progress (Vue or React, Pro)

The Vue and React components have a progress prop from 0 to 100. When it is set, the particles only move as far as that value, so the logo completes exactly when loading completes (at 100).

import { PixelLogoLoader } from './components/PixelLogoLoader';

// progress: 0 to 100, from your own loading steps
<PixelLogoLoader progress={progress} height={360} />

The full code with loading steps and state is in the guides: Use it as a loading screen in the Vue 3 guide and in the React guide.

Option 2: Overlay the free HTML export until the page is ready

The HTML export loops on its own and has no progress prop, so cover the page with it and remove it once the page has loaded. Upload index.html to your site (for example as /particle-logo/index.html) and put this at the start of <body>:

<div id="logo-loader" style="position:fixed;inset:0;z-index:9999;background:#000;display:grid;place-items:center">
  <iframe src="/particle-logo/index.html" title="Loading" width="480" height="520" style="border:0;max-width:100%"></iframe>
</div>
<script>
  const loader = document.getElementById('logo-loader');
  const shownAt = performance.now();
  const MIN_MS = 1500; // show the animation for at least 1.5 seconds
  function hide() {
    setTimeout(() => loader.remove(), Math.max(0, MIN_MS - (performance.now() - shownAt)));
  }
  if (document.readyState === 'complete') hide();
  else window.addEventListener('load', hide);
</script>

The overlay covers the whole window and is removed after the page's load event. MIN_MS keeps the animation on screen for at least 1.5 seconds so it does not flash; change the number to taste.

Respect the reduced-motion setting

Neither the exported components nor the HTML file check the system's reduced-motion setting. With the Vue and React components you can pass a fixed progress of 100 when the user asks for reduced motion, so the logo appears fully formed. With the overlay, you can skip showing it in that case.

How big is the file visitors download?

These are the export sizes we measured on November 3, 2026 (default sampling step 4; gzip size in brackets). The file already contains the logo's points and all the code, and makes no network requests when it runs:

Size depends mostly on the number of points and on color: when every point carries its own RGB color the file grows noticeably. Code exports keep at most 1,600 points.

Common questions

Does the loading animation need a network connection?

No. The exported HTML file and the components contain their own points and code, and make no network requests when they run.

Which plan do I need?

The HTML export is in the free plan and is enough for the overlay. The Vue and React components with the progress prop require Pro; see pricing.

Where do I go next?

See all integration guides, or read how a particle animation works.