How can I add this timer to my website?

Set the countdown duration and appearance in the builder, copy the iframe embed code, and paste it into your website.

Can website visitors change the timer duration?

No. Only the website owner sets the duration in the widget builder. Visitors can start, pause, resume, and restart the timer.

What does the progress bar show?

The progress bar fills as time elapses and reaches 100% when the countdown finishes.

Does the timer support sound?

Yes. You can enable an optional notification sound when the countdown finishes. Browser audio settings may affect playback.

Does this timer work on mobile?

Yes. The interface scales to the available iframe size.

Back to Widgets

Progress Bar Timer Widget

Free Website Widget. Create a customizable countdown Timer with a Horizontal progress bar. Visitors can pause, resume, and restart the countdown.

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/linear-timer?title=Remaining+time&hours=0&minutes=25&seconds=0&showHours=false&playSound=true&language=en&background=%23402735&gradientColor=%23c83c80&textColor=%23ffffff&trackColor=%23d1a2bd&progressColor=%23ffffff&buttonBackground=%23a7879c&buttonTextColor=%23ffffff&font=system-ui&fontSize=94&progressHeight=10&borderRadius=30&shadow=none&width=300&height=300"
  width="300"
  height="300"
  loading="lazy"
  style="border:0;overflow:hidden;"
  title="SmartClockTools Widget"
></iframe>

Customize

Presets

TitleHoursMinutesSecondsBackground color

Gradient accent

Text color

Progress track

Progress fill

Button background

Button text

FontTime font size: 94Progress bar thickness: 10LanguageBorder radius: 30ShadowWidth (px)Height (px)

How to embed a progress bar timer

Choose the duration, customize the title, colors, typography, and button appearance. Copy the generated iframe embed code and add it to your page.

A simple countdown with visual progress

The horizontal progress bar fills smoothly as the countdown runs. Visitors can pause and resume the countdown without changing the configured duration.

Where to use this timer

Ideal for focus sessions, classroom exercises, meeting breaks, workouts, and presentations.

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.