Package detailsv2.2.0

loading_animations

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

AndroidiOSWebmacOSWindowsLinux

pub.dev API documentation Source code

30-day downloads: 6.7K
Likes: 272
Pub points: 160

Install package

flutter pub add loading_animations

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A Flutter package offering a collection of simple, highly customizable loading animations for use in apps. Designed to enhance user experience during waiting states, it provides smooth and visually appealing indicators that can be easily integrated into various UI components. The animations are lightweight and support multiple platforms, ensuring consistent performance across Android, iOS, Web, macOS, Windows, and Linux. Customization options include color, size, speed, and animation style, making it adaptable to different design needs.

Use cases

Loading indicators in forms
Splash screens
Data fetching states
Page transitions
Background task progress
Custom spinner designs

Key features

Highly customizable animations
Supports all major platforms
Lightweight and performant
Easy integration with Flutter widgets
Multiple animation styles
Configurable colors and speeds

Suitable for

Developers seeking quick loading indicators
Apps requiring consistent UI feedback
Designers wanting flexible animation options
Projects targeting multiple platforms
Prototyping and rapid development

Considerations

Limited to basic animation types
May require additional styling for complex UIs
Not optimized for very high-frequency updates
Best suited for simple loading scenarios
No built-in localization or accessibility features

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

Flutter Loading Animations

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:

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:

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.

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 cssfx

If you like this package, don't forget to hit the ⭐️ button!

Thanks and happy coding 👻

Source repository

cytryn/loading-animations