Spinner
Indicate a busy state with a rotating arc.
use herogpui::components::spinner::Spinner;Spinner on docs.rsSource at v0.14.0
Usage
Showing Usage, live: HeroGPUI compiled to WebAssembly. The canvas has no accessibility tree; each example's description and code below carry the same information.
The indicator keeps its diameter in flex layouts. Turn Motion off to stop rotation. An element expression with window: &mut Window and cx: &mut App in scope.
use herogpui::prelude::Spinner;
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;
gpui::div()
.flex()
.flex_wrap()
.items_center()
.justify_center()
.gap(px(12.))
.children(vec![Spinner::new("spinner").into_any_element()])An element expression with window: &mut Window and cx: &mut App in scope.
use herogpui::prelude::Spinner;
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;
gpui::div()
.flex()
.flex_wrap()
.items_center()
.justify_center()
.gap(px(12.))
.children(vec![
Spinner::new("spinner-slow").duration_ms(1500)
.into_any_element(),
Spinner::new("spinner-default")
.into_any_element(),
Spinner::new("spinner-fast").duration_ms(500)
.into_any_element(),
])An element expression with window: &mut Window and cx: &mut App in scope.
use herogpui::prelude::{Color, Spinner};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;
gpui::div()
.flex()
.flex_wrap()
.items_center()
.justify_center()
.gap(px(12.))
.children(Color::ALL
.iter()
.map(|c| {
{
let key = format!("spinner-color-{c:?}");
Spinner::new(format!("spinner-{c:?}")).color(*c)
.into_any_element()
}
}))An element expression with window: &mut Window and cx: &mut App in scope.
use herogpui::prelude::{Spinner, SpinnerSize};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;
gpui::div()
.flex()
.flex_wrap()
.items_center()
.justify_center()
.gap(px(12.))
.children(SpinnerSize::ALL
.iter()
.map(|s| {
{
let key = format!("spinner-size-{s:?}");
Spinner::new(format!("spinner-sz-{s:?}")).size(*s)
.into_any_element()
}
}))For the in-between diameters the size steps do not cover. An element expression with window: &mut Window and cx: &mut App in scope.
use herogpui::prelude::Spinner;
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;
gpui::div()
.flex()
.flex_wrap()
.items_center()
.justify_center()
.gap(px(12.))
.children(vec![
Spinner::new("spinner-px-12").size_px(px(12.))
.into_any_element(),
Spinner::new("spinner-px-14").size_px(px(14.))
.into_any_element(),
Spinner::new("spinner-px-20").size_px(px(20.))
.into_any_element(),
])A caller element replaces the arc; the spinner keeps the box, the resolved color, the rotation and the loading status. An element expression with window: &mut Window and cx: &mut App in scope.
use herogpui::prelude::{Spinner, SpinnerSize, icons};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;
gpui::div()
.flex()
.flex_wrap()
.items_center()
.justify_center()
.gap(px(12.))
.children(vec![
Spinner::new("spinner-glyph-loader")
.size_px(px(20.))
.glyph(gpui::svg().size(px(16.)).path(icons::LOADER_2))
.into_any_element(),
Spinner::new("spinner-glyph-lg")
.size(SpinnerSize::Lg)
.glyph(gpui::svg().size(px(24.)).path(icons::LOADER_2))
.into_any_element(),
])Anatomy
Rust types
Spinner is assembled from these builders. The API reference lists each one.
Customization
Shared appearance belongs on ThemeBuilder::components and .recipe("name"). Typed builders change how Spinner looks at one call site. Every builder also carries sx for placement, width and flex: it takes GPUI's own styling methods and refines them over the component's root after the theme, so an instance override wins. Behaviour builders live in the API reference below.
Styling
| Method | Values | Description |
|---|---|---|
size(SpinnerSize) | SpinnerSize::Sm | SpinnerSize::Md | SpinnerSize::Lg | SpinnerSize::Xl | Selects the 16, 24, 32 or 40px indicator size. |
color(Color) / current_color(Hsla)Partial | Color::Current | Color::Accent | Color::Success | Color::Warning | Color::Danger | Selects a semantic color or a caller-resolved current text color. |
// The one slot for caller-owned low-level styling: GPUI's
// styling methods, refined over the root element last.
.sx(|el| {
el.bg(gpui::rgba(0xffa500ff)) // background
.text_color(gpui::rgba(0x000000ff)) // text
.w(gpui::px(13.)) // size
.h(gpui::px(12.))
})API reference
Against HeroUI v3.2.6: 3 entries ported, 1 partial, 1 not ported. Partial rows are marked in the tables; entries not ported are listed under each table with the reason.
Builders
| Builder | Values | Default | Description |
|---|---|---|---|
size( | SpinnerSize:: | SpinnerSize:: | Selects the 16, 24, 32 or 40px indicator size. |
color(Partial | Color:: | Color:: | Selects a semantic color or a caller-resolved current text color. |
Not ported1 HeroUI entry not ported
| HeroUI v3 | Why it is not ported |
|---|---|
Spinner.className | Browser styles and animation utilities are unavailable; the size-utility, glyph and speed customizations read through `size_px`, `glyph` and `duration_ms` instead. |
Parts
| Part | Description |
|---|---|
Spinner | Rotating indicator (the arc or a caller glyph) with semantic color and fixed size. |
States
| State | Builder | Description |
|---|---|---|
Spinning | Animation::repeat | The arc rotates continuously at the configured duration. |