Need help with loading-animations?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

cytryn
167 Stars 22 Forks MIT License 46 Commits 2 Opened issues

Description

A Flutter package with a selection of simple yet very customizable set of loading animations.

Services available

!
?

Need anything else?

Contributors list

# 246,706
Dart
C++
flutter...
Flutter
34 commits

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.1.0"
...

Then import the file to your project:

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

dart
LoadingFlipping.circle(
  color: Colors.blue,
);
Or you can customize it a bit:
dart
LoadingFlipping.square(
  borderColor: Colors.cyan,
  size: 30.0,
);
Or customize it even more!
dart
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.

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 👻

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.