i7m Templates

Component · Buttons

Cinch

A pay button that cinches into a progress ring and springs open with the result.

Open full preview

About Cinch

Cinch is an animated pay button for checkout pages. On press it tightens into a progress ring while the payment is in flight, then springs back open as a confirmation, or shakes its head when the card is declined. It never changes its layout box, so nothing around it moves. Drive it with one promise or step through the states by hand with a small JavaScript API and data attributes. Plain HTML, CSS and JavaScript with no dependencies.

  • Four states (idle, processing, success, error) readable as a data attribute and styleable from CSS.
  • Promise-driven. Pass run() any function that returns a promise and the button follows it.
  • Determinate or indeterminate ring. Call progress() when you know how far along the work is.
  • Spring motion on transforms and clip-path only, so the button never reflows the page.
  • Solid, outline and soft variants in three sizes, plus full-width. Recolour with one custom property.
  • Keyboard and screen-reader friendly, with reduced-motion and high-contrast fallbacks.

What's included

cinch-v1.0.0.zip14 KB zip · 35 KB unpacked
  • cinch.cssAll visuals and motion, themed with --cinch-* custom properties.11.4 KB
  • cinch.jsState controller and API. Classic script, also works with CommonJS.11.8 KB
  • example.htmlA working page with two common set-ups.2.5 KB
  • README.mdUsage, API reference, customisation and browser support.6.2 KB
  • LICENCE.txtThe licence in plain English.2.4 KB
Dependencies
None
Build step
None
Built with
HTML, CSS and a classic JavaScript file
Browsers
Current Chrome, Edge, Safari, Firefox

Version history

  1. v1.0.0First release.

Licence in short

You can

  • Use it in unlimited personal and commercial projects
  • Use it in unlimited projects for clients
  • Change the code however you like

You can't

  • Resell or share the source as a template, component or kit
  • Put it in a competing product or site builder

Read the full licence →

Good to know

What exactly do I get?

A zip file with the source: plain HTML, CSS and JavaScript, a README that explains setup and customisation, and the licence text. There is no build step and nothing to install — open the HTML file and it runs.

Can I use it in client work?

Yes. One purchase covers you (one person or one company seat) for unlimited personal, commercial and client projects. What you can't do is resell or share the source itself as a template, component or kit. The full wording is on the licence page.

How do I get the files after paying?

Payment happens on Stripe's hosted checkout. The moment it succeeds you land on a download page here. Bookmark that page — the link stays valid for 30 days and 10 downloads.

All questions and answers →

More from the catalogue