In progress indicator (indeterminate)

[benwakefield]

In progress indicator (indeterminate)

Non-repudiation (Internal Service)

Overview

Provide feedback to the user that a process is actively in progress and should be concluded in a relatively short time.

<div class="info">
 <p class="event-record lede">Retrieval may take up to 5 minutes</p>
 <div class="busy" aria-hidden="true"><span>.</span><span>.</span><span>.</span></div>
</div>

.info {
  display:block;
  .event-record.lede {
    display:inline
  }
}

.busy {
  display:inline;
  span {
    font-weight:bold;
    margin-right:0.125em;
    animation-name: processing;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
  }
  span:nth-child(2) {
    animation-delay: .2s;
  }
  span:nth-child(3) {
    animation-delay: .4s;
  }
}

Is it useful and unique?

• There are no patterns for in progress indicators
• Indicates that a process is actively in progress and should be finished in a relatively short time

GOV.UK Design System criteria

• Simple solution
• Tested positively with users that something was actively happening
• Testing demonstrated that our internal users expect more feedback when delays are encountered
• There are no patterns for this feedback function
• A progress bar indicator which is currently being tested (Beta) is used for dynamic, determinate progress situations, we cannot provide determined (dynamic) progress for technical reasons.
• Ellipsis natively implies that something is unfinished / incomplete
• Animation created with CSS which degrades gracefully
• Can be marked up semantically
• Complies with WCAG guidelines
• Can be given context and styled easily with preceding inline message
• Is not bitmap based

Other components or patterns you've tried

To follow

Explain why existing components or patterns do not meet your user need. Provide examples of others you’ve tried and screenshots that demonstrate why they did not work (if you have them).

Research on this pattern

To follow

Summarise and link to any documentation of research relating to this pattern and describe any gaps or questions you still need to answer.