A simple yet very customizable set of loading animations for Flutter projects.
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';
Choose a loading animation from the list:
LoadingFlipping.circle()
LoadingFlipping.square()
LoadingRotating.square()
LoadingDoubleFlipping.circle()
LoadingDoubleFlipping.square()
LoadingBouncingGrid.circle()
LoadingBouncingGrid.square()
LoadingFilling.square()
LoadingFadingLine.circle()
LoadingFadingLine.square()
LoadingBouncingLine.circle()
LoadingBouncingLine.square()
LoadingJumpingLine.circle()
LoadingJumpingLine.square()
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.
Note: the following gifs are not yet updated to reflect version 2.1.0
For a more true experience of the animations and its variations, download the example project and run using flutter run --profile
.
LoadingFlipCircle() | LoadingRotatingSquare() |
![]() |
![]() |
LoadingFlipBox() | LoadingBouncingGrid() |
![]() |
![]() |
Please feel free to:
- ask questions
- report issues and bugs
- suggest code improvements
- request new features
Create an issue or a pull request and I will be more than happy to review it and add to the project.
This project was heavily based on cssfx
If you like this package, don't forget to hit the βοΈ button!
Thanks and happy coding π»