LoadingIndicator

A collection of out of the box loading animations written in pure dart, no extra dependency, inspired by loaders.css and NVActivityIndicatorView.

Demo

Now, you can click this site to preview.3D effect will be invalid in web.

Animation types

Type	Type	Type	Type
1. ballPulse	2. ballGridPulse	3. ballClipRotate	4. squareSpin
5. ballClipRotatePulse	6. ballClipRotateMultiple	7. ballPulseRise	8. ballRotate
9. cubeTransition	10. ballZigZag	11. ballZigZagDeflect	12. ballTrianglePath
13. ballTrianglePathColored	14.ballTrianglePathColoredFilled	15. ballScale	16. lineScale
17. lineScaleParty	18. ballScaleMultiple	19. ballPulseSync	20. ballBeat
21. lineScalePulseOut	22. lineScalePulseOutRapid	23. ballScaleRipple	24. ballScaleRippleMultiple
25. ballSpinFadeLoader	26. lineSpinFadeLoader	27. triangleSkewSpin	28. pacman
29. ballGridBeat	30. semiCircleSpin	31. ballRotateChase	32. orbit
33. audioEqualizer	34. circleStrokeSpin

Installing

Install the latest version from pub

Usage

Simple but powerful parameters

LoadingIndicator(
  indicatorType: Indicator.ballPulse, // Required: animation type
  colors: const [Colors.white],        // Optional: color collection
  strokeWidth: 2,                      // Optional: stroke and line width
  backgroundColor: Colors.black,       // Optional: widget background
  pathBackgroundColor: Colors.black,   // Optional: stroke background
)

strokeWidth controls the bar width of lineScale, lineScaleParty, lineScalePulseOut, lineScalePulseOutRapid, and lineSpinFadeLoader. When omitted, these indicators keep their original size-derived bar width.

Without a controller, every indicator plays continuously. To control playback, create and dispose a LoadingIndicatorController with your widget:

late final LoadingIndicatorController _controller;

@override
void initState() {
  super.initState();
  _controller = LoadingIndicatorController();
}

@override
void dispose() {
  _controller.dispose();
  super.dispose();
}

@override
Widget build(BuildContext context) {
  return LoadingIndicator(
    indicatorType: Indicator.ballScaleMultiple,
    controller: _controller,
  );
}

The controller works with all 34 animation types:

_controller.pause(); // Freeze the current frame immediately.

await _controller.pauseAt(0.5); // Pause the next time progress reaches 50%.

await _controller.pauseAt(
  1.0,
  behavior: LoadingIndicatorPauseBehavior.jumpToTarget,
); // Advance the complete animation group to the target and pause now.

_controller.resume();

progress is the normalized position (0.0 to 1.0) of an indicator's reference animation track: 0.0 is the start of a loop and 1.0 is its final frame before reset. pauseAt completes only after the indicator has paused. Replacing a pending command or disposing the controller completes that Future with LoadingIndicatorCommandCanceled. One controller can be attached to only one LoadingIndicator at a time; the last command sent while detached is applied on the next attachment.

Migrating from 3.x

Version 4.0 removes the pause widget parameter. Replace it with a controller:

// 3.x
LoadingIndicator(indicatorType: Indicator.ballPulse, pause: isPaused);

// 4.0
LoadingIndicator(
  indicatorType: Indicator.ballPulse,
  controller: controller,
);

void setPaused(bool isPaused) {
  isPaused ? controller.pause() : controller.resume();
}

中文版

License

Copyright 2019 Tino Guo.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.