Data Display

AttemptsIndicator

Segmented bar with one segment per allowed attempt, filled for the attempts made, that reads as an image named "2 of 5 attempts".

import { AttemptsIndicator } from '@lostgradient/cinder';
attemptsprogresssegments
01

Overview

Reference usage

AttemptsIndicator draws one segment per allowed attempt and fills the segments for the attempts made: 2 of 5 draws two filled segments out of five, 5 of 5 all five, 1 of 1 one. The whole bar is a single image named "2 of 5 attempts".

It is neutral by default, because the status word beside it carries the outcome (Done, Gave up and Stopped all draw the same bar). On a goal's list row it sits on line two beside its count. Pass tone="accent" and layout="block" for a bar that is a progress cue in its own right, such as the reconnecting dialog's "Attempt 3 of 8".

Usage

svelte 
<script lang="ts">
  import { AttemptsIndicator } from '@lostgradient/cinder';
</script>

<span>
  <AttemptsIndicator made={2} allowed={5} /> 2 of 5
</span>
Live preview

Attempts on a list row

Tool runner · 2 of 5 Assistant · 5 of 5 Assistant · 1 of 1

02

When to use

Use when
  • Showing how many of a fixed number of attempts a goal, retry or reconnection has used, beside its count.
  • Drawing a neutral attempts bar on a list row's second line, where the word beside it carries the outcome.
Avoid when
  • Showing continuous progress toward a value — use progress or meter.
  • Drawing a trend over time — use sparkbar.
03

Examples

Attempts on a list row

One segment per allowed attempt, filled for the attempts made, neutral in every state. It sits beside its count on a row's second line; the whole bar is one image named "2 of 5 attempts".

Accent bar that fills its container

With tone accent and layout block the bar is a progress cue in its own right, as in the reconnecting dialog's "Attempt 3 of 8". Name it with label so the count is spoken.

04

Props

Props for attempts-indicator
Name
Type
Default
Description
made required number Attempts made so far. Filled segments are counted from the start; the value is clamped to allowed.
allowed required number Attempts allowed, which is the number of segments: one per allowed attempt. Above 100 the bar still draws 100 segments and fills them in proportion.
tone 'neutral' | 'accent' 'neutral' Colour of the filled segments. neutral is the default, because the word beside the bar carries the outcome; accent suits a bar that is a progress cue in its own right, such as reconnection attempts.
layout 'inline' | 'block' 'inline' Width of the bar. Default inline.
label text Accessible name. Defaults to ${made} of ${allowed} attempts.