Skip to main content

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
Live, try it

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

InputTypeDefaultRange
barsNumber53 – 9
messagesTextFetching your feed|Warming up the cache|Almost there—
speedNumber10.3 – 3
accentText#38bdf8hex colour
accent2Text#818cf8hex colour
bgText#0a0d14hex colour

More Flutter animations

The same idea in other frameworks: React orbit loader · SwiftUI activity rings loader · JavaScript segmented ring spinner