Progress circle

Progress circles are used to show that the system is working when this isn't otherwise obvious. Typical examples are when the system is Ready, Loading, Waiting, Working, Processing, Saving, Printing etc. Progress circles are then used to describe the current status of the application. Read more about progress circles in the UX Guidelines.

Use when

There are two types of work indicators, determinate and indeterminate.

  • Use the determinate work indicator (progress bar or circle) when there's either a clear endpoint for the process or some other way to track progress.
  • Use an indeterminate work indicator (spinner) when there's no clear end point or when it can't be known when the process will be finished. A typical case is waiting for a server response.

Basic design

circle progress with 0% circle progress with 0% 0%
circle progress with 25% circle progress with 25% 25%
circle progress with 50% circle progress with 50% 50%
circle progress with 75% circle progress with 75% 75%
circle progress with 100% circle progress with 100% 100%

Size options

Extra-thin progress circle .progress-circle.progress-circle-xs

circle progress with 0% circle progress with 0% 0%
circle progress with 25% circle progress with 25% 25%
circle progress with 50% circle progress with 50% 50%
circle progress with 75% circle progress with 75% 75%
circle progress with 100% circle progress with 100% 100% 
				
// Basic progress circle
<div class="progress-circle" data-value="25">
   <svg class="progress_svg" role="img" aria-labelledby="ID-for-title ID-for-description">
      <title id="ID-for-title">Title for your progress circle</title>
      <desc id="ID-for-description">Description for your progress circle</desc>
      <circle cx="30" cy="30" r="30" class="full-circle"></circle>
      <circle cx="30" cy="30" r="30" class="progress-bar"></circle>
   </svg>
   <span class="percentage">25%</span>
</div>


// Thin progress circle
<div class="progress-circle progress-circle-xs" data-value="25">
   ...
</div>