Zeba Academy Loading Kit #

Advanced Flutter loading UI kit with skeleton loaders, shimmer effects, and animated indicators.

zeba_academy_loading_kit helps Flutter developers easily implement modern loading UIs such as shimmer placeholders, skeleton loaders, and animated indicators.

✨ Features #

• Skeleton loaders for lists and UI placeholders
• Shimmer loading animations
• Animated loading indicators
• Easy integration API
• Customizable loading widgets
• Lightweight and performant
• Production-ready for Flutter apps

📸 Screenshots #

Skeleton Loading List #

[Skeleton List]

Shimmer Animation #

[Shimmer Loader]

Loading State #

[Loading State]

Loaded UI #

[Loaded State]

🚀 Installation #

Add this to your pubspec.yaml:

dependencies:
  zeba_academy_loading_kit: ^1.0.0

Then run:

flutter pub get

📦 Import #

import 'package:zeba_academy_loading_kit/zeba_academy_loading_kit.dart';

Basic Usage #

LoadingContainer #

A simple wrapper that automatically shows a loading skeleton while data loads.

LoadingContainer(
  isLoading: true,
  child: Text("Content Loaded"),
)

Skeleton Box #

Used for creating simple skeleton placeholders.

SkeletonBox(
  width: 120,
  height: 20,
)

Skeleton List #

Perfect for loading list UIs.

SkeletonList(
  itemCount: 6,
)

Shimmer Loader #

Wrap any widget with shimmer animation.

ZebaShimmer(
  child: Container(
    width: 200,
    height: 20,
  ),
)

Loading Indicator #

Animated circular loader.

ZebaLoadingIndicator(
  size: 40,
  color: Colors.blue,
)

Example #

class LoadingExample extends StatefulWidget {
  const LoadingExample({super.key});

  @override
  State<LoadingExample> createState() => _LoadingExampleState();
}

class _LoadingExampleState extends State<LoadingExample> {

  bool loading = true;

  @override
  void initState() {
    super.initState();

    Future.delayed(const Duration(seconds: 3), () {
      setState(() {
        loading = false;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return LoadingContainer(
      isLoading: loading,
      child: const Center(
        child: Text("Data Loaded Successfully"),
      ),
    );
  }
}

Folder Structure #

zeba_academy_loading_kit
│
├── lib
│   ├── src
│   │   ├── shimmer_loader.dart
│   │   ├── skeleton_box.dart
│   │   ├── skeleton_list.dart
│   │   ├── animated_loader.dart
│   │   └── loading_container.dart
│   │
│   └── zeba_academy_loading_kit.dart
│
├── example
├── screenshots
├── test
└── pubspec.yaml

Use Cases #

• Loading UI for API data
• Skeleton placeholders for lists
• Shimmer loading for cards
• Placeholder UI for dashboards
• Modern mobile app loading states

Contributing #

Contributions are welcome!

If you'd like to improve the package:

1. Fork the repository
2. Create a new feature branch
3. Submit a pull request

License #

This project is licensed under the GPL License.

Author #

Developed by Zeba Academy

Website https://zeba.academy/flutter/

⭐ If you find this package useful, please consider giving it a star on GitHub!