Expressive Loading Indicator

Archival notice: Refer to the implementation at ksokolovskyi/material_loading_indicator.

Material 3 Expressive loading indicator ported to Flutter.

output.webm

Package

expressive_loading_indicator on pub.dev.

Usage

import 'package:expressive_loading_indicator/expressive_loading_indicator.dart';
import 'package:material_new_shapes/material_new_shapes.dart';

ExpressiveLoadingIndicator(
  // Custom color
  color: Colors.purple,

  // Custom size constraints
  constraints: BoxConstraints(
    minWidth: 64.0,
    minHeight: 64.0,
    maxWidth: 64.0,
    maxHeight: 64.0,
  ),

  // Custom polygon shapes
  polygons: [
    MaterialShapes.softBurst,
    MaterialShapes.pentagon,
    MaterialShapes.pill,
  ],

  // Accessibility
  semanticsLabel: 'Loading',
  semanticsValue: 'In progress',
)

TODO

• Add support for ContainedLoadingIndicator - A version that shows the loading indicator inside a container with a background
• Add support for DeterminateLoadingIndicator - A version that morphs depending on the progress value

Credits

• Kostia Sokolovskyi for their initial implementation of material_shapes.

External Links

• Loading Indicator on Material Design.
• Kotlin source implementation on Android Code Search.

License & Attribution

This package is available under the MIT License.

This package contains Dart ports of components from the Android Open Source Project (AOSP). The original Android components are licensed under the Apache License 2.0. See NOTICE for complete attribution and license details.

Contributing

Contributions are welcome! Please feel free to submit an Issue or Pull Request.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/amazing-feature)
3. Commit your Changes (git commit -m 'Add some amazing feature')
4. Push to the Branch (git push origin feature/amazing-feature)
5. Open a Pull Request