Loading

import { AXLoadingModule } from '@acorex/components/loading';

Loading component is an essential tool for providing users with visual feedback during time-consuming operations. It offers the flexibility to display a spinner or loading container, customize spinner properties, and define the display region and location. This allows developers to create seamless loading indicators that improve user experience while maintaining a consistent and engaging design across Angular applications.

Overview

In this section, you can test different options of this component and see the output in real time

Timeout

Region

Container

Usage

A simple example of using loading.

Preview

Code

Region

Loading offers the flexibility to show the loading indicator on the entire screen, within a designated container, or associated with a specific HTML element. This enables developers to tailor the loading experience to the needs of their application and user interface.

Preview

Code

Loading spinner

Loading provides the flexibility to either show a standalone spinner or embed a spinner within a loading container. Developers can choose the appropriate method based on the specific use case and design preferences.

Preview

Code

Spinner size

You can pass size property for spinner size.

Preview

Code

Spinner stroke size

You can pass size property for spinner stroke size.

Preview

Code

Spinner color

Spinner can get color like Primary,Warning,Error, ...

Preview

Code

Design Tokens

Design tokens are variables that define the visual style of ACoreX components. You can use them to change colors, typography, spacing, and other visual aspects.

Default component colors use system surface colors.

--ax-comp-loading-padding-x	0.25rem	Horizontal padding of the loading indicator.
--ax-comp-loading-inner-scale	0	Initial scale of the inner elements of the loading indicator.
--ax-comp-loading-pulse-scale	1.05	Scale factor for the pulse animation.
--ax-comp-loading-animation-duration	2s	Duration of the pulse animation.
--ax-comp-loading-spinner-gap	0.75rem	Gap between elements within the loading spinner.
--ax-comp-loading-overlay-opacity	0.85	Opacity of the loading overlay backdrop.
--ax-comp-loading-overlay-bg-color	var(--ax-sys-color-surface)	Background color of the loading overlay backdrop. Defaults to the system's surface background color.
--ax-comp-loading-pane-outline-width	2px	Outline width of the loading pane when focused.
--ax-comp-loading-pane-outline-offset	2px	Outline offset of the loading pane when focused.
--ax-comp-loading-spinner-loader-height	3rem	Height of the loading spinner loader.
--ax-comp-loading-spinner-loader-width	3rem	Width of the loading spinner loader.
--ax-comp-loading-spinner-loader-border-width	6px	Border width of the loading spinner loader.
--ax-comp-loading-spinner-loader-border-color	var(--ax-sys-color-#{$name}-surface)	Border color of the loading spinner loader. Defaults to the ghost foreground color.