https://github.com/watery-desert/loading_animation_widget

Flutter loading animation widget.
https://github.com/watery-desert/loading_animation_widget

animation flutter flutter-package

Last synced: over 1 year ago
JSON representation

Flutter loading animation widget.

• Host: GitHub
• URL: https://github.com/watery-desert/loading_animation_widget
• Owner: watery-desert
• License: bsd-3-clause
• Created: 2021-11-03T13:19:57.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2024-10-02T14:06:30.000Z (almost 2 years ago)
• Last Synced: 2025-04-01T12:08:25.874Z (over 1 year ago)
• Topics: animation, flutter, flutter-package
• Language: Dart
• Homepage:
• Size: 354 KB
• Stars: 181
• Watchers: 2
• Forks: 45
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

          




   





[![YouTube Badge](https://img.shields.io/badge/-YouTube-EA3223?style=for-the-badge&logo=youtube&logoColor=white)](https://www.youtube.com/waterydesert)

[![Twitter Badge](https://img.shields.io/badge/-Twitter-198CD8?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/watery_desert)

[![Patreon Badge](https://img.shields.io/badge/-Patreon-FF424D?style=for-the-badge&logo=patreon&logoColor=white)](https://www.patreon.com/watery_desert)

[![pub package](https://img.shields.io/pub/v/loading_animation_widget.svg?style=for-the-badge)](https://pub.dev/packages/loading_animation_widget)

[![WateryDesert](https://img.shields.io/badge/WateryDesert-Website-F8D977?style=for-the-badge)](https://waterydesert.com)





## How to use

#### Installation

Add `loading_animation_widget:` to your `pubspec.yaml` dependencies then run `flutter pub get`

```yaml

 dependencies:

  loading_animation_widget:

```

#### Import

Add this line to import the package.

```dart 

import 'package:loading_animation_widget/loading_animation_widget.dart';

```

\

All loading animation APIs are same straight forward. There is a static method for each animation inside `LoadingAnimationWidget` class, which returns the Object of that animation. Both `size` and `color` are required some animations need more than one color.

Loading animation with one `color`

```dart

Scaffold(

    body: Center(

      child: LoadingAnimationWidget.staggeredDotsWave(

        color: Colors.white,

        size: 200,

      ),

    ),

```              

Loading animation with more than one color. You have to provide both required colors.

```dart

Scaffold(

    body: Center(

        child: LoadingAnimationWidget.twistingDots(

          leftDotColor: const Color(0xFF1A1A3F),

          rightDotColor: const Color(0xFFEA3799),

          size: 200,

        ),

      ),

```       

## Screen recordings with design credits

   

      

         
waveDots

         

      

      

         
inkDrop

         

      

      

         
twistingDots

         

      

      

         
threeRotatingDots

         

      

   

   

      
staggeredDotsWave

      

   

   

      
fourRotatingDots

      

   

   

      
fallingDot

      

   

   

      
progressiveDots

      

   

   

   

      
discreteCircular

      

   

   

      
threeArchedCircle

      

   

   

      
bouncingBall

      

   

   

      
flickr

      

   

   

   

      
hexagonDots

      

   

   

      
beat

      

   

   

      
twoRotatingArc

      

   

   

      
horizontalRotatingDots

      

   

   

   

      
newtonCradle

      

   

   

      
stretchedDots

      

   

   

      
halfTriangleDot

      

   

   

      
dotsTriangle

      

   

   





   All flutter packages

   


   ● [Sliding Clipped Nav Bar](https://github.com/watery-desert/sliding_clipped_nav_bar)\

   ● [Water Drop Nav Bar](https://github.com/watery-desert/water_drop_nav_bar)\

   ● [Swipeable Tile](https://github.com/watery-desert/swipeable_tile)\

   ➜ [Loading Animation Widget](https://github.com/watery-desert/loading_animation_widget)