How do I select the timer duration?

Drag the circular handle around the minute dial or click a position on the dial to choose the duration before starting.

Can I change the duration while the countdown is running?

Pause the timer first, then drag the handle to select a new duration.

Does this dial timer support mobile touch?

Yes. The dial supports pointer dragging with touch, mouse, and stylus input.

Can I embed the timer on my website?

Yes. Configure the widget, then copy the generated iframe embed code from SmartClockTools.

Can I change the dial's colors?

Yes. Customize the dial, sector, ticks, background, buttons, and text in the widget builder.

Back to Widgets

Draggable Dial Timer Widget

Free Website Widget. Create an interactive countdown Timer with a Draggable circular minute dial, visual progress, and an iframe embed for your website.

Live Preview

See exactly how your widget will look before copying the embed code

Embed Code

Open Preview

<iframe
  src="https://www.smartclocktools.com/embed/dial-timer?title=&minutes=20&maxMinutes=60&playSound=true&language=en&background=%23ffffff&dialBackground=%23efefff&progressColor=%236366f1&tickColor=%23111827&textColor=%23111827&buttonColor=%236366f1&resetColor=%23111827&font=system-ui&borderRadius=16&shadow=none&width=420&height=500"
  width="420"
  height="500"
  loading="lazy"
  style="border:0;overflow:hidden;"
  title="SmartClockTools Widget"
></iframe>

Customize

Presets

Title (optional)Initial duration (minutes)Maximum durationBackground

Dial background

Selected sector

Tick marks

Time and label color

Play button

Reset icon

FontLanguageBorder radius: 16ShadowWidth (px)Height (px)

Interactive draggable countdown dial

Select a duration by dragging around a circular minute scale, then start a visual countdown. The highlighted sector shrinks as time passes.

Embed a visual timer

Customize the design and preset, then copy the iframe code to embed your draggable dial timer in a webpage.

Timer controls

Start, pause, resume, and reset your timer. The dial remains adjustable before starting and while paused.

Frequently Asked Questions

Customize the widget using the settings above, preview the result, and copy the generated iframe code when you are ready. The embed code can be added to websites and website builders that support HTML or iframe embeds.