How do I embed a circular timer on my website?

Set the duration, customize the appearance, copy the generated iframe code, and paste it into your website HTML.

Does the circle show the remaining time?

Yes. The circular progress ring begins full and gradually empties as the timer counts down.

Can visitors pause, resume, or reset the timer?

Yes. The timer provides play and pause controls, a reset button, and duration adjustment buttons.

Can I change the ring colors and thickness?

Yes. Choose the progress color, track color, thickness, typography, and button colors in the widget builder.

Will the circular timer work on mobile?

Yes. The widget has a responsive SVG ring and fits inside an iframe on mobile and desktop browsers.

Back to Widgets

Circular Progress Timer Widget

Free Website Widget. Create a customizable Circular Countdown Timer with an animated progress ring. Embed it on your website using the generated iframe code.

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/circular-timer?title=&hours=0&minutes=1&seconds=0&minuteStep=1&showHours=false&playSound=true&language=en&background=%23ffffffff&trackColor=%23e5e7eb&progressColor=%23c74785&textColor=%23513947&controlBackground=%23f3f4f6&controlTextColor=%23513947&startButtonColor=%23826978&resetButtonColor=%23f3f4f6&resetIconColor=%23826978&font=system-ui&fontSize=66&progressWidth=7&borderRadius=20&shadow=none&width=360&height=360"
  width="360"
  height="360"
  loading="lazy"
  style="border:0;overflow:hidden;"
  title="SmartClockTools Widget"
></iframe>

Customize

Presets

Title (optional)HoursMinutesSecondsPlus / minus step (minutes)Background

Ring track color

Ring progress color

Time color

Plus / minus background

Plus / minus text

Play button color

Reset button color

Reset icon color

FontTime font size: 66Ring thickness: 7LanguageBorder radius: 20ShadowWidth (px)Height (px)

How to embed the circular timer

Set a countdown duration, select colors and a visual preset, then copy the iframe embed code generated by SmartClockTools.

Animated countdown progress ring

The SVG ring visually tracks the proportion of time left. Visitors can start, pause, reset, and adjust the timer directly in the embedded widget.

Where to use a circular countdown timer

Circular timers are useful for study sessions, workouts, classroom activities, meetings, presentations, productivity routines, and short exercises.

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.