Progress

How far work has gone, as a bar or a ring, sliding or turning while the end is unknown.

shape

scheme

Uploading

Preparing

forSlots(ProgressSlots)(Recipes.Progress({}))

Usage

The function that drew the preview, over the theme module Create a theme writes. The preview passes it the style picked above instead of its default.

export const ProgressStyle = forSlots(ProgressSlots)(Recipes.Progress({}))

export const progress = <Message>(
  style: NamedStyle<typeof ProgressSlots>,
  h: HtmlBuilder<Message>,
): Html =>
  h.div(
    [h.Style({ display: 'flex', flexWrap: 'wrap', gap: '2rem', alignItems: 'end' })],
    [
      Progress.view(
        {
          id: 'preview-upload',
          label: 'Uploading',
          value: Option.some(120),
          max: 200,
          valueText: (value, max) => `${value} of ${max} MB`,
          style,
        },
        h,
      ),
      Progress.view({ id: 'preview-prepare', label: 'Preparing', value: Option.none(), style }, h),
    ],
  )

The recipe ↗This code ↗