Image
COUNTER

Great as a counter!

Use DeDial wherever you need an animated radial counter. With no depencides on any other software, like jQuery, it's easy to install. Better still, becuase it uses the latest Web Components technology you wont need to write any code.

VFX

For some visual impact!

Sometimes you just need a simple dial, or two, to use as part of your animtaions. DeDial is also perfect for that. Because it's implemented using SVG and emits events when needed, animation options are endless.

VERSATILE

The sky's the limit!

But that's not all. When you're ready for something more advanced, DeDial comes complete with a Javascript interface and methods that make automation a breeze.

PREVImage
NEXTImage

What is DeDial?

DeDial is a simple User Interface component whose primary porpuse is to draw a circular but digital dial. It's "digital" because individual "ticks" are drawn for each possible dial position, rather than a continuous circle.

These types of dials can be used to represent circular gauges, or the ticks on a clock dial, or segments of a targeting sight. The uses are ultimately infinite and are only limited by the developer's imagination.

Image CUSTOMIZABLE

DeDial is endlessly customizable through HTML, CSS, or JavaScript. However, being based on SVG means that you'll hardly ever need to resort to JavaScript to style this component.

Image EASY TO USE

DeDial has been implemented with the latest HTML and Web Components standars which means that most functionality can be accessed through HTML and CSS alone.

Image EASY INSTALLATION

DeDial is a self-contained component with no external dependencies, not even jQuery. This makes it incredibly easy to install. A single file link in the relevant page is all that's needed to get it going. An optional stylesheet is also provided if you don't want to build your own.

Image DOCS AND SAMPLES

DeDial comes with reference documentation of course, but we have also included a couple of sample HTML pages and a tutorial to help you get started.

Image COUNTER

DeDial can also be used as a single value counter and comes with the necessary attributes & methods to support this.

Image COMPATABILITY

Naturally, DeDial has been tested with Chrome, Firefox, and Safari. Desktop and mobile. IOS and Android. Will it run Doom? No.

Image
Image
Image
SAMPLES INCLUDED

Get inspired...

Included in each purchase are HTML pages that will give you an idea of DeDial's versatility. These demonstrate DeDial as a counter, as part of marketing animations, as an animated clock, as gauges, and as a load spinner.

CHECK OUT THE SAMPLES