request-stripe

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

Features

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

Getting Started

npm install request-stripe

import { requestStripe } from 'request-stripe';

fetch().finally(requestStripe());
// or
const done = requestStripe();
fetch().finally(() => {
  done();
});

Customization

Styles via .request-stripe-custom

.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 = () => {
  const customElement = document.createElement('div');
  document.body.appendChild(customElement);

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

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