DeDial

SVG Web Component to render and animate clock dials. Includes counter functionality and a JS API.

🚀 Do you need to export any Shopify store in minutes to a CSV file?
You can open it in Excel or Google Sheets for analysis, or import it into another Shopify store.
Tested with time, robust, and reliable. Install the Shopify Spy browser extension now.

Benefits of DeDial

Render varied circular dials for static or animated displays, and clock faces.
Animated forward and reverse counter with optional JavaScript interface.
Smooth SVG scaling and CSS support from the theme editor.

About DeDial

DeDial is a set of Web Components whose primary purpose is to draw circular dials, counters, and timers. Dials can be used to represent animated gauges, or the ticks on a clock dial, or segments of a targeting sight. Additionally, animated countdowns can be initiated to add a more dynamic feel to any store. These components are intended for use by Theme designers, or advanced users familiar with CSS, that are looking to compose custom animations within the Theme Editor.

Feature overview with sample dials

Feature overview with sample dials

Various static dials

Various static dials

Sample clock, timers, and counters

Sample clock, timers, and counters