Loading Animation Widget

YouTube Badge Twitter Badge Patreon Badge pub package WateryDesert


How to use

Installation

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

 dependencies:
  loading_animation_widget:

Import

Add this line to import the package.

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

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.

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
Water Drop Nav Bar
Swipeable Tile
Loading Animation Widget