A simple yet very customizable set of loading animations for Flutter projects.
Add the following to your
... dependencies: ... loading_animations: "^2.1.0" ...
Then import the file to your project:
How to use #
Choose a loading animation from the list:
Double Flipping #
Bouncing Grid #
Fading Line #
Bouncing Line #
Jumping Line #
Bumping Line #
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
.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.
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 https://cssfx.dev/
If you like this package, dont forget to hit the ⭐️ button!
Thanks and happy coding 👻
[2.1.0] - New Animations
Added 4 more animations:
- Bouncing Line
- Bumping Line
- Fading Line
- Jumping Line
Example project #
Added all the new animations to the example project.
[2.0.0] - Renaming convention
Breaking changes: #
Naming convention #
Since we can have different shapes for the same animation in many case, I decided to change how we call the animations.
For example, the
LoadingFlipCircle() could be called passing a
BoxShape.rectangle as a
But since it makes more sense to focus on the animation itself, the shape is now embedded on a named constructor.
- circle -
- square -
- circle -
- square -
List of animation changes:
New animation! #
Added LoadingFilling.square() new animation. Please refer to the example project for more details.
Example project #
Files got separated from
main.dart in order to make the examples smaller and more readable.
[1.0.1] - Updating package details
- Fixing version on pubspec.yaml
- Added full path to example images
[1.0.0] - First release.
First version released with 4 animations:
A new Flutter project.
Getting Started #
This project is a starting point for a Flutter application.
A few resources to get you started if this is your first Flutter project:
For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.
Use this package as a library
1. Depend on it
Add this to your package's pubspec.yaml file:
dependencies: loading_animations: ^2.1.0
2. Install it
You can install packages from the command line:
$ flutter pub get
Alternatively, your editor might support
flutter pub get.
Check the docs for your editor to learn more.
3. Import it
Now in your Dart code, you can use:
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
We analyzed this package on Nov 15, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:
- Dart: 2.6.0
- pana: 0.12.21
- Flutter: 1.9.1+hotfix.6
Detected platforms: Flutter
References Flutter, and has no conflicting libraries.
lib/src/bumping_line.dart. (-0.50 points)
lib/src/bumping_line.dart reported 1 hint:
line 1 col 8: Unused import: 'dart:math'.
flutter format to format