loading_animations 2.1.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 88

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:

  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:

  color: Colors.blue,

Or you can customize it a bit:

  borderColor: Colors.cyan,
  size: 30.0,

Or customize it even more!

  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.

Examples #

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()

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.1.0] - New Animations

Animations #

Added 4 more animations:

  • Bouncing Line
    • LoadingBouncingLine.circle()
    • LoadingBouncingLine.square()
  • Bumping Line
    • LoadingBumpingLine.circle()
    • LoadingBumpingLine.square()
  • Fading Line
    • LoadingFadingLine.circle()
    • LoadingFadingLine.square()
  • Jumping Line
    • LoadingJumpingLine.circle()
    • LoadingJumpingLine.circle()

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 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 #

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:

  loading_animations: ^2.1.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';
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]
Learn more about scoring.

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.

Health suggestions

Fix lib/src/bumping_line.dart. (-0.50 points)

Analysis of lib/src/bumping_line.dart reported 1 hint:

line 1 col 8: Unused import: 'dart:math'.

Format lib/loading_animations.dart.

Run flutter format to format lib/loading_animations.dart.


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 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies