zeba_academy_loading

pub package likes popularity License: GPL v3

A lightweight and customizable Flutter loading package with multiple animated loading indicators.

zeba_academy_loading provides a simple, dependency-free API for displaying beautiful loading animations in Flutter applications.

Features

  • πŸ”„ Spinner loader
  • πŸ’“ Pulse loader
  • πŸ”΅ Dots loader
  • 🌊 Wave loader
  • πŸ“Š Bar loader
  • 🎨 Custom colors
  • βš™οΈ Custom sizes
  • ⏱️ Custom animation durations
  • πŸ”’ Configurable dot and bar counts
  • 🧩 Individual loader widgets
  • 🎯 Unified ZebaLoading widget
  • 🚫 No external dependencies
  • πŸ“± Works with Flutter applications
  • πŸ§ͺ Tested with Flutter widget tests

Installation

Add the package to your pubspec.yaml:

dependencies:
  zeba_academy_loading: ^0.0.1

Then run:

flutter pub get

Import

import 'package:zeba_academy_loading/zeba_academy_loading.dart';

Quick Start

The easiest way to use the package is with the ZebaLoading widget:

const ZebaLoading()

By default, this displays a spinner loader.

Loading Types

The package provides five loading types:

enum ZebaLoadingType {
  spinner,
  pulse,
  dots,
  wave,
  bar,
}

Spinner Loader

A classic circular loading indicator:

const ZebaLoading(
  type: ZebaLoadingType.spinner,
)

Custom Spinner

const ZebaLoading(
  type: ZebaLoadingType.spinner,
  size: 40,
  strokeWidth: 4,
)

Pulse Loader

A smooth pulsing circle animation:

const ZebaLoading(
  type: ZebaLoadingType.pulse,
)

Custom Pulse

const ZebaLoading(
  type: ZebaLoadingType.pulse,
  size: 48,
  color: Colors.deepPurple,
)

Dots Loader

A bouncing dots animation:

const ZebaLoading(
  type: ZebaLoadingType.dots,
)

Custom Dots

const ZebaLoading(
  type: ZebaLoadingType.dots,
  count: 4,
  dotSize: 10,
  spacing: 8,
  color: Colors.blue,
)

Wave Loader

An animated wave made from vertical bars:

const ZebaLoading(
  type: ZebaLoadingType.wave,
)

Custom Wave

const ZebaLoading(
  type: ZebaLoadingType.wave,
  size: 44,
  count: 6,
  spacing: 5,
  color: Colors.green,
)

Bar Loader

A horizontal animated loading bar:

const ZebaLoading(
  type: ZebaLoadingType.bar,
  size: 120,
)

Custom Bar

const ZebaLoading(
  type: ZebaLoadingType.bar,
  size: 150,
  dotSize: 6,
  color: Colors.orange,
  backgroundColor: Colors.black12,
)

Custom Colors

All loaders support custom colors:

const ZebaLoading(
  type: ZebaLoadingType.spinner,
  color: Colors.deepPurple,
)

const ZebaLoading(
  type: ZebaLoadingType.pulse,
  color: Colors.red,
)

const ZebaLoading(
  type: ZebaLoadingType.dots,
  color: Colors.blue,
)

const ZebaLoading(
  type: ZebaLoadingType.wave,
  color: Colors.green,
)

Custom Animation Duration

Control the speed of the animations:

const ZebaLoading(
  type: ZebaLoadingType.spinner,
  duration: Duration(milliseconds: 700),
)

Slower animation:

const ZebaLoading(
  type: ZebaLoadingType.wave,
  duration: Duration(milliseconds: 1500),
)

Direct Loader Widgets

You can also use individual loader widgets directly.

Spinner

const ZebaSpinnerLoader(
  size: 40,
  strokeWidth: 4,
)

Pulse

const ZebaPulseLoader(
  size: 48,
)

Dots

const ZebaDotsLoader(
  count: 4,
  dotSize: 10,
  spacing: 8,
)

Wave

const ZebaWaveLoader(
  height: 40,
  count: 5,
)

Bar

const ZebaBarLoader(
  width: 160,
  height: 6,
)

Complete Example

import 'package:flutter/material.dart';
import 'package:zeba_academy_loading/zeba_academy_loading.dart';

void main() {
  runApp(const LoadingExampleApp());
}

class LoadingExampleApp extends StatelessWidget {
  const LoadingExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Zeba Academy Loading',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.deepPurple,
        ),
        useMaterial3: true,
      ),
      home: const LoadingExamplePage(),
    );
  }
}

class LoadingExamplePage extends StatelessWidget {
  const LoadingExamplePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Loading Examples'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const ZebaLoading(
              type: ZebaLoadingType.spinner,
            ),
            const SizedBox(height: 32),
            const ZebaLoading(
              type: ZebaLoadingType.pulse,
              color: Colors.deepPurple,
            ),
            const SizedBox(height: 32),
            const ZebaLoading(
              type: ZebaLoadingType.dots,
              color: Colors.blue,
            ),
            const SizedBox(height: 32),
            const ZebaLoading(
              type: ZebaLoadingType.wave,
              color: Colors.green,
            ),
            const SizedBox(height: 32),
            const ZebaLoading(
              type: ZebaLoadingType.bar,
              size: 120,
              color: Colors.orange,
            ),
          ],
        ),
      ),
    );
  }
}

API Overview

ZebaLoading

Property Type Default Description
type ZebaLoadingType spinner Loading animation type
color Color? Theme primary Loading color
size double 32 General loader size
strokeWidth double 3 Spinner stroke width
dotSize double 8 Dot or bar size
spacing double 6 Spacing between elements
count int 3 Number of dots or bars
duration Duration 1000ms Animation duration
backgroundColor Color? Theme surface Bar background color
borderRadius BorderRadius? Automatic Bar border radius

Available Widgets

ZebaLoading
ZebaSpinnerLoader
ZebaPulseLoader
ZebaDotsLoader
ZebaWaveLoader
ZebaBarLoader

Available Loading Types

ZebaLoadingType.spinner
ZebaLoadingType.pulse
ZebaLoadingType.dots
ZebaLoadingType.wave
ZebaLoadingType.bar

Why Use This Package?

Flutter applications frequently need loading indicators for:

  • API requests
  • Page transitions
  • Authentication
  • File uploads
  • Data fetching
  • Button loading states
  • Background operations
  • Empty states
  • Custom UI components

Instead of creating individual animations for every project, zeba_academy_loading provides a simple collection of reusable loading animations with a consistent API.

Performance

This package is designed to be lightweight:

  • No external dependencies
  • Uses Flutter's built-in animation APIs
  • Uses AnimationController efficiently
  • Properly disposes animation controllers
  • Supports const constructors where possible

Requirements

  • Flutter >=1.17.0
  • Dart ^3.12.0

License

This project is licensed under the GNU General Public License v3.0.

You are free to:

  • Use the software
  • Study the source code
  • Modify the source code
  • Share the software
  • Distribute modified versions

Under the terms of the GPL v3 license.

See the LICENSE file for the complete license text.

About Me

✨ I’m Sufyan bin Uzayr, an open-source developer passionate about building and sharing meaningful projects.

You can learn more about me and my work at sufyanism.com or connect with me on LinkedIn.

Your All-in-One Learning Hub

πŸš€ Explore courses and resources in coding, technology, and development at Zeba Academy.

Empower yourself with practical skills through curated tutorials, real-world projects, and hands-on experience. Level up your tech game today! πŸ’»βœ¨

Zeba Academy is a learning platform dedicated to coding, technology, and development.

➑ Visit our main site: zeba.academy

➑ Explore hands-on courses and resources at: code.zeba.academy

➑ Check out our YouTube for more tutorials: zeba.academy

➑ Follow us on Instagram: zeba.academy

Thank you for visiting! ✨

Made with ❀️ for the Flutter community by Zeba Academy.

Libraries

zeba_academy_loading