Loader Extension for Kodular / App Inventor (FREE)

Extensions
1

:rocket: Loader Extension for Kodular / App Inventor

The Loader Extension is a professional, highly customizable UI component designed to enhance user experience by providing various loading indicators. It allows you to display a modern, clean dialog that blocks interaction while background tasks are running.

:sparkles: Key Features

  • 4 Loading Styles: Spinner, Continuous Bar, Segmented Bar (with frame), and Independent Square Blocks.

  • Full Color Control: Customize the progress indicator color, track color, and dialog background color.

  • Dynamic Updates: Update progress in real-time without recreating the dialog.

  • Responsive: Works seamlessly on all Android versions supported by Kodular.

:puzzle_piece: Blocks Documentation

:hammer_and_wrench: Functions

Block Description
ShowLoader Displays the loading dialog on the screen. Call this to start the process.
HideLoader Dismisses and hides the loading dialog.
UpdateProgress (progress) Updates the current progress value. Accepts integers from 0 to 100.

:gear: Properties

Property Type Description
Message String The text displayed below or next to the indicator.
LoaderColor Color The color of the active progress (e.g., filled bars).
TrackColor Color The color of the inactive/empty track or blocks.
DialogBackgroundColor Color The background color of the dialog window.
UsePercentage Boolean Set True for a standard horizontal progress bar.
UseSegmentedStyle Boolean Set True for a frame-based segmented progress bar.
UseSquareBlocksStyle Boolean Set True for a modern row of square loading blocks.

:camera_with_flash: Example Usage

1. Simple Spinner Setup

Use this for non-specific tasks.

Blocks:

  • Call Loader1.ShowLoader

2. Percentage Progress Bar

Use this when you need to show the exact state of a file download or task.

Blocks:

  • Set Loader1.UsePercentage to TRUE

  • Call Loader1.ShowLoader

  • Inside a loop/timer: Call Loader1.UpdateProgress progress: [current_value]

3. Modern Segmented Loader (Stylized)

Matches the popular professional loading UI design.

Blocks:

  • Set Loader1.UseSegmentedStyle to TRUE

  • Set Loader1.LoaderColor to [Blue]

  • Set Loader1.TrackColor to [Light Gray]

  • Call Loader1.ShowLoader

:light_bulb: Pro Tip

  • Always call ShowLoader after setting your configuration (Colors/Styles).

  • Use a Clock component to call UpdateProgress to create a smooth loading animation!

blocks (9)
blocks (9)867×583 40.6 KB

2026-07-06_15-39-40
2026-07-06_15-39-40258×554 16.1 KB

photo_2026-07-06_15-34-45
photo_2026-07-06_15-34-451080×839 14.5 KB

photo_2026-07-06_15-34-51
photo_2026-07-06_15-34-511080×751 19 KB

2 Likes
2

Loader Update: New Animation and Improved Stability

We are pleased to announce that a new functional block has been added to the current version of the Loader extension, and the loading visualization capabilities have been expanded.

What's New:

  • Added GoogleDotsStyle mode: A new, stylish animation inspired by the classic Google design has been implemented. This mode features a group of dynamically rotating dots that move smoothly along a circular path.

  • 2026-07-06_16-45-27
    2026-07-06_16-45-27428×170 4.17 KB

Loader Extension v2.0 – Major Update

What's New:

  • New Size property – You can now freely adjust the size of all custom loaders directly in the designer or blocks (default 80dp).

  • Three New / Improved Premium Loaders:

    • Circular Dots – One bright dot smoothly runs around a circle of static dots.

    • Rotating Gears – Three mechanical gears of different sizes and colors rotating in different directions (replaces old DNA style).

    • Spinning Star – Elegant pulsing and rotating star with smooth animation.

    • Fidget Spinner (UseFidgetSpinnerStyle) Classic spinning fidget spinner with three colored balls. Smooth and satisfying rotation.

    • Hourglass (UseHourglassStyle) Elegant hourglass emoji with a rotating dashed circle around it. Clean and modern timer-style loader.

    • Loading Text (UseSimpleLoadingStyle) "LOADING" text with a typewriter effect — letters light up one by one from left to right.

  • Improved Segmented Bar – Now correctly displays as a proper segmented bar with border (no more squares).

All Available Modes:

  1. Default Spinner

  2. Percentage Bar

  3. Segmented Bar (with border)

  4. Square Blocks

  5. Google Dots

  6. Circular Dots (new)

  7. Rotating Gears (new)

  8. Spinning Star (new)

  9. Fidget Spinner (new)

  10. Hourglass (new)

  11. Loading Text (new)

Key Features:

  • Full size control for all animated loaders

  • Smooth 60 FPS animations

  • Custom colors and loading text

  • Progress support where applicable

This update significantly expands visual variety — perfect for modern, mechanical, or elegant app interfaces.

1 Like