MARKETPLACE
PLUGINS
M3 LOADING INDICATOR
M3 Loading Indicator logo

M3 Loading Indicator

Published June 2026
   •    Updated this week

Plugin details

M3 Loading Indicator gives your Bubble app a premium Material Design 3-compliant loading animation experience — fully responsive, completely customizable, and lightweight. Replace boring spinners with beautiful, interactive Circular and Linear loading indicators featuring native SVG scaling and fluid indeterminate-to-determinate transitions.
───────────────────
✨ KEY FEATURES
───────────────────

🎨 Material Design 3 Compliant
 • Native Circular and Linear indicator designs matching official Google M3 specs
 • Indeterminate animated states with fluid, organic pacing
 • Determinate progress modes for precise loading feedback from 0% to 100%

⚙️ Infinite Customization
 • Fully dynamic sizing and line thickness via standard element properties
 • Independent color configuration for both active indicators and track backgrounds
 • Custom speed multipliers to adjust animation pacing globally

⚡ Lightweight & High Performance
 • Rendered using optimized SVG paths and hardware-accelerated CSS animations
 • Zero external runtime dependencies or CDNs for maximum security and privacy
 • Native auto-resize behavior mapping element boundaries perfectly

📐 Responsive Layout integration
 • Seamlessly adapts inside Bubble flex containers and nested groups
 • Viewport-accurate thickness rendering that scales beautifully on high-DPI screens


🔗 [View demo page](https://plugins-demo-70356.bubbleapps.io/version-test/m3_loading_indicator)
🔗 [View demo in editor](https://bubble.io/page?id=plugins-demo-70356&tab=Design&name=m3_loading_indicator&type=page)

$36

One time  •  Or  $3/mo

stars   •   0 ratings
0 installs  
This plugin does not collect or track your personal data.

Platform

Web & Native mobile

Contributor details

Acampamento no-code logo
Acampamento no-code
Joined 2021   •   46 Plugins
View contributor profile

Instructions

Setup instructions: 1. Place the "M3 Loading Indicator" element anywhere on your page or within a container group.
2. Select your loader type: "circular" or "linear" via the Properties panel.
3. Keep the "Progress Value" empty to run the indeterminate looping animation, or pass a dynamic number (0-100) to render a precise progress state.
4. Customize Colors (Indicator & Track), Size (circular radius), Thickness, and Animation Speed.

Properties:
• Indicator Type: circular or linear
• Progress Value: number (0 to 100) or blank for indeterminate loop
• Indicator Color: hex or rgba color
• Track Color: hex or rgba color
• Size: circular dimensions in pixels
• Thickness: line stroke width in pixels
• Animation Speed: duration multiplier

Types

This plugin can be found under the following types:

Categories

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

Resources

Support contact
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble