loading

Skeletons and spinners, for content that is on its way.

Both animate, gently, and slow down or stop for people who ask their system for reduced motion.

Values

pub fn classes() -> List(css.Class)

Every class this module uses, for howdy/ui/export.

</>

pub fn rules() -> List(#(String, String))

The CSS this module registers with style.rule, for howdy/ui/export.

</>

pub fn skeleton(
  attributes: List(attribute.Attribute(msg)),
) -> element.Element(msg)

A placeholder in the shape of content that has not arrived. Size it with a style or a class of your own:

loading.skeleton([attribute.style("height", "1rem"), attribute.style("width", "12rem")])

</>

pub fn skeleton_class() -> css.Class

</>

pub fn spinner(
  label: String,
  attributes: List(attribute.Attribute(msg)),
) -> element.Element(msg)

A spinning circle in the current text colour, sized to the text. Screen readers announce label, such as “Loading” or “Saving”.

</>

pub fn spinner_class() -> css.Class