Progress Toast

Components

Progress Toast

feedback

interactive

<arc-progress-toast>

Overview

Guidelines

When to use

Use progress-toast for operations that take more than 2-3 seconds
Update progress frequently enough that the bar moves visibly (every 5-10%)
Provide a cancel button for operations that can be aborted
Call complete() to trigger the success state and auto-dismiss animation
Place a single <arc-progress-toast> at the root of your layout for all pages

When not to use

Use progress-toast for operations that complete instantly — use regular toast instead
Fire more than 3-4 concurrent progress toasts — it overwhelms the UI
Update progress on every byte — batch updates to avoid performance issues
Forget to handle errors — call complete() or remove the toast on failure
Use progress-toast for indeterminate loading — use loading-overlay or spinner instead

Features

Imperative show() API — returns an ID for tracking each operation
Embedded progress bar with smooth fill animation
updateToast(id, { progress, message? }) method for incremental progress updates
complete(id) method to signal completion and trigger auto-dismiss
Cancel button on each toast fires arc-cancel with operation ID
Persists until complete — no auto-dismiss timeout
Vertical stacking for multiple concurrent operations
Same positioning options as toast: top-right, bottom-right
Smooth enter/exit animations matching toast
arc-complete and arc-cancel events with operation ID in detail

Preview

Simulate Upload

Usage

This component requires JavaScript. No pure HTML/CSS version is available — use the Web Component directly or a framework wrapper.

<script type="module" src="@arclux/arc-ui"></script>

<arc-progress-toast id="progress" position="bottom-right"></arc-progress-toast>

<arc-button variant="primary" onclick="startUpload()">Upload File</arc-button>

<script>
  function startUpload() {
    const pt = document.getElementById('progress');
    const id = pt.show({ message: 'Uploading report.pdf...' });

    let progress = 0;
    const interval = setInterval(() => {
      progress += 10;
      if (progress >= 100) {
        clearInterval(interval);
        pt.complete(id);
      } else {
        pt.updateToast(id, { progress });
      }
    }, 500);
  }
</script>

import { ProgressToast, Button } from '@arclux/arc-ui-react';
import { useRef } from 'react';

export function UploadDemo() {
  const ptRef = useRef<HTMLElement>(null);

  const startUpload = () => {
    const pt = ptRef.current as any;
    if (!pt) return;
    const id = pt.show({ message: 'Uploading report.pdf...' });

    let progress = 0;
    const interval = setInterval(() => {
      progress += 10;
      if (progress >= 100) {
        clearInterval(interval);
        pt.complete(id);
      } else {
        pt.updateToast(id, { progress });
      }
    }, 500);
  };

  return (
    <>
      <ProgressToast ref={ptRef} position="bottom-right" />
      <Button variant="primary" onClick={startUpload}>Upload File</Button>
    </>
  );
}

<script setup>
import { ref } from 'vue';
import { Button, ProgressToast } from '@arclux/arc-ui-vue';

const pt = ref(null);
const startUpload = () => {
  const el = pt.value;
  if (!el) return;
  const id = el.show({ message: 'Uploading report.pdf...' });

  let progress = 0;
  const interval = setInterval(() => {
    progress += 10;
    if (progress >= 100) {
      clearInterval(interval);
      el.complete(id);
    } else {
      el.updateToast(id, { progress });
    }
  }, 500);
};
</script>

<template>
  <ProgressToast ref="pt" position="bottom-right" />
  <Button variant="primary" @click="startUpload">Upload File</Button>
</template>

<script>
  import { Button, ProgressToast } from '@arclux/arc-ui-svelte';

  let pt;
  const startUpload = () => {
    if (!pt) return;
    const id = pt.show({ message: 'Uploading report.pdf...' });

    let progress = 0;
    const interval = setInterval(() => {
      progress += 10;
      if (progress >= 100) {
        clearInterval(interval);
        pt.complete(id);
      } else {
        pt.updateToast(id, { progress });
      }
    }, 500);
  };
</script>

<ProgressToast bind:this={pt} position="bottom-right" />
<Button variant="primary" on:click={startUpload}>Upload File</Button>

import { Component, ViewChild, ElementRef } from '@angular/core';
import { Button, ProgressToast } from '@arclux/arc-ui-angular';

@Component({
  imports: [Button, ProgressToast],
  template: `
    <ProgressToast #pt position="bottom-right"></ProgressToast>
    <Button variant="primary" (click)="startUpload()">Upload File</Button>
  `,
})
export class UploadDemoComponent {
  @ViewChild('pt') pt!: ElementRef;

  startUpload() {
    const el = this.pt.nativeElement;
    const id = el.show({ message: 'Uploading report.pdf...' });

    let progress = 0;
    const interval = setInterval(() => {
      progress += 10;
      if (progress >= 100) {
        clearInterval(interval);
        el.complete(id);
      } else {
        el.updateToast(id, { progress });
      }
    }, 500);
  }
}

import { Button, ProgressToast } from '@arclux/arc-ui-solid';

export function UploadDemo() {
  let pt: HTMLElement | undefined;

  const startUpload = () => {
    const el = pt as any;
    if (!el) return;
    const id = el.show({ message: 'Uploading report.pdf...' });

    let progress = 0;
    const interval = setInterval(() => {
      progress += 10;
      if (progress >= 100) {
        clearInterval(interval);
        el.complete(id);
      } else {
        el.updateToast(id, { progress });
      }
    }, 500);
  };

  return (
    <>
      <ProgressToast ref={pt} position="bottom-right" />
      <Button variant="primary" onClick={startUpload}>Upload File</Button>
    </>
  );
}

import { Button, ProgressToast } from '@arclux/arc-ui-preact';
import { useRef } from 'preact/hooks';

export function UploadDemo() {
  const ptRef = useRef<HTMLElement>(null);

  const startUpload = () => {
    const pt = ptRef.current as any;
    if (!pt) return;
    const id = pt.show({ message: 'Uploading report.pdf...' });

    let progress = 0;
    const interval = setInterval(() => {
      progress += 10;
      if (progress >= 100) {
        clearInterval(interval);
        pt.complete(id);
      } else {
        pt.updateToast(id, { progress });
      }
    }, 500);
  };

  return (
    <>
      <ProgressToast ref={ptRef} position="bottom-right" />
      <Button variant="primary" onClick={startUpload}>Upload File</Button>
    </>
  );
}

API

Prop	Type	Default	Description
`position`	`'top-right' \| 'bottom-right'`	`'bottom-right'`	Anchors the progress toast stack to a fixed corner of the viewport.

Events

Event	Description
`arc-complete`	Fired when a progress toast operation reaches 100%. Detail contains { id } with the operation identifier.
`arc-cancel`	Fired when the user clicks the cancel button on a progress toast. Detail contains { id } with the operation identifier.