---
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 · #7853

## Details

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

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step