loading_animations 2.0.0

Flutter Loading Animations Pub

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.0.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:

LoadingFlipping #

  • LoadingFlipping.circle()
  • LoadingFlipping.square()

LoadingRotating #

  • LoadingRotating.square()

LoadingDoubleFlipping #

  • LoadingDoubleFlipping.circle()
  • LoadingDoubleFlipping.square()

LoadingBouncingGrid #

  • LoadingBouncingGrid.circle()
  • LoadingBouncingGrid.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 animaton 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.

Examples #

Note: the following gifs are not yet updated to reflect verison 2.0.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()

Contribution #

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.

Thanks #

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.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 shape parameter: LoadingFlipCircle(shape: BoxShape.rectangle).

But since it makes more sense to focus on the animation itself, the shape is now embedded on a named constructor.

Before v2.0.0:

  • circle - LoadingFlipCircle()
  • square - LoadingFlipCircle(shape: BoxShape.rectangle)

After v2.0.0:

  • circle - LoadingFlipping.circle()
  • square - LoadingFlipping.square()

List of animation changes:

  • LoadingFlipCircle() -> LoadingFlipping.circle() or .square()
  • LoadingRotatingSquare() -> LoadingRotating.square()
  • LoadingFlipBox() -> LoadingDoubleFlipping.circle() or .square()
  • LoadingBouncingGrid() -> LoadingBouncingGrid.circle() or .square()

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

Fix: #

  • Fixing version on pubspec.yaml
  • Added full path to example images

[1.0.0] - First release.

Additions: #

First version released with 4 animations:

  • FlipCircle
  • RotatingSquare
  • FlipBox
  • BouncingGrid

example/README.md

example #

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.0.0

2. Install it

You can install packages from the command line:

with Flutter:


$ 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:


import 'package:loading_animations/loading_animations.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
32
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
66
Learn more about scoring.

We analyzed this package on Sep 15, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.5.0
  • pana: 0.12.21
  • Flutter: 1.9.1+hotfix.2

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test