MARKETPLACE
PLUGINS
PROGRESS BAR BUBBLE MOBILE
Progress Bar Bubble Mobile logo

Progress Bar Bubble Mobile

Published September 2026
   •    Updated this week

Plugin details

Beautiful linear and circular progress bars for Bubble native mobile apps./b] One element, two layouts. Give it a percentage and it animates there — with a soft gradient, a gentle glow and rounded ends already built in. Pick your colour and you are done. ──────────────────────────────── 🎬 DEMO ──────────────────────────────── Mobile demo: https://plugins-testing-46093.bubbleapps.io/version-test/api/1.1/mobile/preview?debug_mode=true&preview_view=progress_bar Editor: https://bubble.io/page?id=plugins-testing-46093&test_plugin=1789687625646x145110746221772800_current&tab=Design&name=progress_bar&type=page&elements=bTLjU1 ──────────────────────────────── 📊 TWO LAYOUTS ────────────────────────────────
  • Bar — a full-width track that fills from left to right.
  • Circle — a ring that fills clockwise from the top, with the percentage in the middle and an optional caption under it.
──────────────────────────────── 🎨 HOW IT LOOKS ────────────────────────────────
  • One colour, and everything follows. The gradient and the track are built from it.
  • A soft glow that makes it look lit rather than printed — one checkbox turns it off.
  • Smooth animation on page load and every time the value changes.
  • Light and dark mode handled on its own, following the phone.
──────────────────────────────── ⚡ SIMPLE BY DESIGN ────────────────────────────────
  • No actions to call. Bind the value to a state or a database field and it moves by itself.
  • 13 fields, almost all optional.
  • 2 states — progress percent and is complete.
  • 1 event — completed, fired once when it reaches 100%.
──────────────────────────────── Questions? Get in touch — info@technocode.agency

Free

For everyone

5.0 stars   •   1 ratings
2 installs  
This plugin does not collect or track your personal data.

Other actions

Platform

Native mobile

Contributor details

Technocode logo
Technocode
Joined 2020   •   22 Plugins
View contributor profile

Instructions

1. Drop it on the page Drag Progress Bar onto a mobile page. For a bar, give it a height of at least the thickness (10 by default). For a circle, make it as tall and wide as circle_size (160 by default).

2. Choose the layout
Set layout to bar or circle, and pick your color.

3. Feed it a value
Put a number from 0 to 100 in progress — a custom state, a database field, anything. When it changes, the indicator animates there.

Tips
  • The text fields (caption, label_format, font_size, font_family, text_color) apply to the circle only. For a bar, use a regular Bubble text.

Types

This plugin can be found under the following types:
Element   •   Event

Categories

This plugin can be found under the following categories:
Productivity   •   Visual Elements

Resources

Support contact
Documentation
Tutorial

Rating and reviews

Average rating (5.0)

Good overall
September 21st, 2026
Good plugin, it fits a basic need and it's free. Would be even better if the circular progress bar was responsive or allowed us to define a width or height. Right now, it's a fixed width and height. Thank you so much!
Hi! Thank you for your feedback! We’ve added this functionality, so you can now adjust the width and height of the circular progress bar. Thanks again for taking the time to share your feedback! Best, Support Team (plugin author)
September 22nd, 2026
  •  
Technocode
Bubble logo
Product
AI
Mobile
Design
Data
Logic
Collaboration
Security
Status
Release notes
Bubble for
Founders
Developers
Agencies
Enterprise
Discover
How Bubble works
Examples
Bubble is Global
Pricing
Learn
Academy
Technical guides
Blog
How to build
Coaching
Resources
Connect to AI
Marketplace
Templates
Plugins
Experts
Bootcamps
Certification
Partnerships
Affiliates
Figma to Bubble
Community
Bubble community
Forum
Newsletter
Podcast
Ideaboard
Early access
Company
About
Careers
Brand guidelines
Support
Contact us
Legal
Terms
Privacy
©  2026, Bubble Group, Inc. All rights reserved.
Bubble
Pricing
Enterprise
Contact sales