request-stripe 🌈

The tiny library for rendering a progress bar on top your screen.

Features

📦 Zero dependencies
🕯 Framework agnostic, using vanila API
🔨 Tiny API
⚙️ Customize render and styles
🧲 Autocombine requests

Getting Started

npm install request-stripe

import { requestStripe } from 'request-stripe';

const done = requestStripe();
fetch().finally(done);

Customization

Styles

.request-stripe-custom {
  color: #e11d48;
  animation-name: custom-process, custom-finish;
  animation-...
}

.request-stripe-custom[data-state='process'] {
  animation-play-state: running, paused;
}

.request-stripe-custom[data-state='finish'] {
  animation-play-state: paused, running;
}

@keyframes custom-process {
  ...
}

@keyframes custom-finish {
  ...
}

Render

import { Render, requestStripe } from 'request-stripe';

// Write a render function
const customRender: Render = (onComplete) => {
  const customElement = document.createElement('div');
  document.body.appendChild(customElement);

  setTimeout(() => {
    onComplete();
    throw new Error('Timeout Exception');
  }, 9999);

  return () => {
    onComplete();
    document.body.removeChild(stripeElement);
  };
};

// Pass the function
const done = requestStripe(customRender);