Flutter Loading Indicators

A Flutter package with a selection of simple yet very customizable set of loading indicators.

Installation

Add the following to your pubspec.yaml file:

...
dependencies:
  ...
  loading_indicator: "^1.0.0"
...

Then import the file to your project:

import 'package:loading_indicator/loading_indicator.dart';

How to use

Choose a loading indicator from the list:

  • FlipCircle
  • RotatingSquare
  • FlipBox
  • BouncingGrid

Then add the following code:

LoadingFlipCircle(
  color: Colors.blue,
);

Or you can customize it a bit:

LoadingFlipCircle(
  borderColor: Colors.cyan,
  size: 30.0,
);

Or customize it even more!

LoadingFlipCircle(
  borderColor: Colors.cyan,
  borderSize: 3.0,
  size: 30.0,
  backgroundColor: Colors.cyanAccent,
  duration: Duration(milliseconds: 500),
);

For more customization, please look inside the loading indicator files.

Note: all the indicators come ready to go just by calling LoadingFlipBox(), for example.

Examples

For a more true experience of the animations and variations,
download the example project and run using flutter run --profile.

LoadingFlipCircle
LoadingFlipCircle()
LoadingRotatingSquare

LoadingRotatingSquare()
LoadingFlipBox

LoadingFlipBox()
LoadingBouncingGrid

LoadingBouncingGrid()

GitHub

https://github.com/cytryn/loading-indicator