Today we are sharing a flutter package for showing some awesome loading effects without putting any extra effort.
You can use this package for implementing progress animations or use combine with Future class. There are lot of animations are available on this package .
A simple yet very customizable set of loading animations for Flutter projects.
Installation
Add the following to your pubspec.yaml
file:
... dependencies: ... loading_animations: "^2.1.0" ...
Then import the file to your project:
import 'package:loading_animations/loading_animations.dart';
How to use
Choose a loading animation from the list:
Flipping
LoadingFlipping.circle()
LoadingFlipping.square()
Rotating
LoadingRotating.square()
Double Flipping
LoadingDoubleFlipping.circle()
LoadingDoubleFlipping.square()
Bouncing Grid
LoadingBouncingGrid.circle()
LoadingBouncingGrid.square()
Filling
LoadingFilling.square()
Fading Line
LoadingFadingLine.circle()
LoadingFadingLine.square()
Bouncing Line
LoadingBouncingLine.circle()
LoadingBouncingLine.square()
Jumping Line
LoadingJumpingLine.circle()
LoadingJumpingLine.square()
Bumping Line
LoadingBumpingLine.circle()
LoadingBumpingLine.square()
Then add the following code:
LoadingFlipping.circle( color: Colors.blue, );
Or you can customize it a bit:
LoadingFlipping.square( borderColor: Colors.cyan, size: 30.0, );
Or customize it even more!
LoadingFlipping.circle( borderColor: Colors.cyan, borderSize: 3.0, size: 30.0, backgroundColor: Colors.cyanAccent, duration: Duration(milliseconds: 500), );
For more customization, please look inside the loading animation files.
Note: all the animations come ready to go just by calling LoadingDoubleFlipping.square()
, for example.
Many basic animations contain .circle()
and .square()
variations by default.
Demo
LoadingFlipCircle() | LoadingRotatingSquare() |
![]() |
![]() |
LoadingFlipBox() | LoadingBouncingGrid() |
![]() |
![]() |