Flutter animation example
Flutter Loading Animation: Bouncing Bars Loader
CircularProgressIndicator is fine, but a loader is often the first motion a user sees in your app. These bars bounce in a travelling wave, squash slightly when they land and stretch when they leave the floor, the classic squash-and-stretch principle in five rectangles. A status line under them cycles through your own messages.
- 4.1 KB file
- 6 live inputs
- Flutter runtime
How this bouncing bars loader works
- Each bar runs the same bounce curve with a phase offset, so the wave travels left to right.
- Width grows as height shrinks near the floor, which keeps the bar's area roughly constant: squash and stretch.
- Messages are a "|" separated input and rotate every two seconds.
Add it to your Flutter app
Install exodeui_flutter, download the file below, and paste this. The code updates as you customize. Other runtimes are in the other tabs.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:exodeui_flutter/exodeui_flutter.dart';
// Add assets/flutter-loader.exode to pubspec.yaml (download it below).
class FlutterLoader extends StatefulWidget {
const FlutterLoader({super.key});
@override
State<FlutterLoader> createState() => _FlutterLoaderState();
}
class _FlutterLoaderState extends State<FlutterLoader> {
final _canvas = GlobalKey<ExodeUICanvasState>();
late final Future<String> _json = rootBundle.loadString('assets/flutter-loader.exode');
@override
Widget build(BuildContext context) {
return FutureBuilder<String>(
future: _json,
builder: (context, snap) => snap.hasData
? ExodeUICanvas(
key: _canvas,
artboardJson: snap.data!,
fit: 'Layout',
onReady: () { },
)
: const SizedBox.shrink(),
);
}
}Inputs
| Input | Type | Default | Range |
|---|---|---|---|
bars | Number | 5 | 3 – 9 |
messages | Text | Fetching your feed|Warming up the cache|Almost there | — |
speed | Number | 1 | 0.3 – 3 |
accent | Text | #38bdf8 | hex colour |
accent2 | Text | #818cf8 | hex colour |
bg | Text | #0a0d14 | hex colour |
More Flutter animations
Speed Dial FABA floating action button that rotates to close while three labelled actions spring out in sequence.Hero Product TransitionA list item whose image arcs into the detail header while a circular reveal uncovers the page.3D Drawer MenuA side menu revealed by the page swinging back in 3D; open by tapping or dragging from the edge.Wavy TypewriterA typewriter whose letters drop in with a bounce; words type, hold, delete and cycle.Parallax Scroll ListA scrolling list of cards whose images shift at a slower rate, with momentum and edge bounce.Onboarding PagerThree swipeable intro pages with morphing illustrations, a stretching dot indicator and a finishing button.
The same idea in other frameworks: React orbit loader · SwiftUI activity rings loader · JavaScript segmented ring spinner