Canvas Docs

Preloader

An animated CSS loading indicator in any of the design system’s loader styles. It is shown in the block inserter as Canvas Preloader and registered as canvas-core/preloader.

Select the block on a page and its own settings open in the sidebar, in the panels below:

The Preloader settings in the block editor sidebar

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Content

  • Loader StyleDefault1 - Bouncing Dots

    Which spinning or pulsing animation is shown while the page or panel is still loading.

    Choices1 - Bouncing Dots2 - Flipper3 - Double Bounce4 - Wave Bars5 - Wandering Cubes6 - Pulse7 - Grid Pulse8 - Clip Rotate9 - Ball Rotate10 - Zig Zag11 - Triangle Path12 - Ball Scaleand 2 more

  • Screen Reader TextDefaultEmpty

    Announced by assistive technology while the loader is visible. Leave blank for a purely decorative loader (hidden from screen readers).

Style

  • ColourDefaultEmpty

    Colour the loader is drawn in. Leave it blank to take the colour the theme already uses.

  • SizeDefaultEmpty

    How large the loader is drawn. Leave it blank for the standard size.

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Content: Background Video / Audio, Cascading Images, Charts, Circle Stack, Clients, Data Tables.

Was this page helpful?