---
title: "Animated Bar Clock — Free Framer component · Best of Framer"
description: "Free Framer component · by MediumUI · Interactive. About The component is an Animated Bar Clock with Hour, Minute & Second fill based on current time + user interaction to change timezone."
canonical: "https://framer.elliotli.dev/component/animated-bar-clock"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Animated Bar Clock

# Animated Bar Clock

[View on Framer](https://framer.com/marketplace/components/animated-bar-clock/?via=elliot-li)

![Animated Bar Clock preview image 1](https://framer.elliotli.dev/og/component/animated-bar-clock/1a4622d8564af0d8/1600x1200.jpg)

## Summary

About The component is an Animated Bar Clock with Hour, Minute & Second fill based on current time + user interaction to change timezone.

## Description

## About

The component is an Animated Bar Clock with Hour, Minute & Second fill based on current time + user interaction to change timezone. The clock time is based on the 24-hour system changing from AM to PM.

## Customisation

Every part of the component can be customised with regard to colour, font and element sizing.

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-mq4ugi82-FyRZe2ilAnyYrKJgUaTtNXG15taG8L)

## Instructions

1.  Add the component into the 'Primary' layer of your site page.
    
2.  Select then desired timezone.
    
3.  Customise appearance of font, colour and bar sizing.
    
4.  Preview or publish the site to test the functionality.
    

## Support

For support queries and assistance, get in touch at [hello@mediumui.com](mailto:help@framerlock.com)

## Rank history [How rankings work →](/terms#rankings)

-   All · #7901

## Details

- **Author**: MediumUI
- **Published**: 2026-01-07
- **Updated**: 2026-01-11
- **Added**: 2025-12-18
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase