Progress

Progress bar

Progress bars have the following attributes that can be set or updated to interact with the progress element:

  • data-js-min Set the minimum value the progress bar can be set to
  • data-js-max Set the maximum value the progress bar can be set to
  • data-js-value Set the current value for the the progress bar
  • data-js-step Set the step value for the the progress bar

html
            <div class="rc-progress rc-progress--a" data-js-progress="" data-js-min="0" data-js-max="100" data-js-value="10" data-js-step="1">
    <input type="text" id="slider-result" />
</div>
        

Progress bar - with tooltip

html
            <div class="rc-progress rc-progress--a" data-js-progress="" data-js-min="0" data-js-max="100" data-js-value="15" data-js-step="1" data-js-tooltip="true">
    <input type="text" id="slider-result" />
</div>
        

Progress bar with indicators

html
            <div class="rc-progress rc-progress--a" data-js-progress="" data-js-min="0" data-js-max="100" data-js-value="70" data-js-labels='{"0":"0", "50":"50", "100":"100"}' data-js-type="progress-labels">
    <input type="text" id="slider-result" />
</div>
        

Progress bar with indicators

html
            <div class="rc-progress rc-progress--a" data-js-progress="" data-js-min="0" data-js-max="100" data-js-value="80" data-js-labels='{"0":"0", "50":"50", "100":"100"}' data-js-type="progress-labels" data-js-tooltip="true">
    <input type="text" id="slider-result" />
</div>
        

Progress scroll

Articles that are classed as long-read articles or case studies can also have a progress bar attached to them which simply gives a visual indication of how far through an article a user has scrolled.

This progress bar is only ever attached to the bottom of the Header component and on vertical scroll of the article page the progress bar is increased.

html
            <div class="rc-progress rc-progress--a rc-progress--scroll" data-js-progress="" data-js--progress-scroll="">
    <input type="text" id="slider-result" />
</div>
        

Loader

An animated loader is a visual indicator for when certain content needs to be loaded into a web page or app, such as search results. Its use should be restricted where possible as all projects should aim for a load time that is quick enough to not have to display a loader. However, it should be used in cases where large amounts of data are requested and may need a longer loading process than is normally expected.

html
            <div class="rc-loader" data-js-loader="">
    <object class="rc-loader__logo" data="https://d3moonnr9fkxfg.cloudfront.net/logo--crown.svg?v=8-5-6" type="image/svg+xml" class="logo-svg logo--crown">
         <img src="https://d3moonnr9fkxfg.cloudfront.net/1x1.gif?v=8-5-6" style="background-image: url(https://d3moonnr9fkxfg.cloudfront.net/logo--crown.png?v=8-5-6)" width="150" height="100" alt="Royal Caninn logo" />
    </object>
    <canvas class="rc-loader__canvas" width="96" height="96" data-js-percentage="100"></canvas>
    <div class="rc-loader__background"></div>
</div>
        

Infinite loader

html
            <div class="rc-loader-infinite" data-js-progress="">
    <object class="rc-loader__logo" data="https://d3moonnr9fkxfg.cloudfront.net/logo--crown.svg?v=8-5-6" type="image/svg+xml" class="logo-svg logo--crown">
        <img src="https://d3moonnr9fkxfg.cloudfront.net/1x1.gif?v=8-5-6" style="background-image: url(https://d3moonnr9fkxfg.cloudfront.net/logo--crown.png?v=8-5-6)" width="150" height="100" alt="Royal Caninn logo" />
    </object>
    <div class="rc-loader__spinner"></div>
    <div class="rc-loader__background"></div>
</div>
        

Progress Bar

A progress bar should be used to display progress through a specified set of tasks. If the browser does not support the <progress> element (IE9), then the fallback div will be shown instead. This component relies on accompanying Javascript in order to display the current value between the min and max values, as well as the ability to update that value.

Progress: 20%

html
            <div class="rc-progress rc-progress-demo" data-value="20">
  <progress max="100" value="20" class="rc-progress__progressElem" id="update-progress-demo">
      <div class="rc-progress--fallback">
          <span class="rc-progress--fallback__bar"></span>
          <span class="rc-progress--fallback__value" style="width: 20%;">Progress: 20%</span>
      </div>
  </progress>
</div>

<button class="rc-btn rc-btn--one rc-btn--sm" data-js-demo="update-progress-demo">Click me to update progress</button>
        

Stepped Progress

The Progress element is used to display a known percentage between two values. This component relies on accompanying Javascript in order to display the current value between the min and max values, as well as the ability to update that value.

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
html
            <div class="rc-progress-stepped" data-value="">
    <ol>
        <li class="rc-progress-stepped__item rc-complete"><a class="rc-progress-stepped__link">1</a></li>
        <li class="rc-progress-stepped__item rc-complete"><a class="rc-progress-stepped__link">2</a></li>
        <li class="rc-progress-stepped__item"><a class="rc-progress-stepped__link">3</a></li>
        <li class="rc-progress-stepped__item" disabled=""><a class="rc-progress-stepped__link">4</a></li>
        <li class="rc-progress-stepped__item" disabled=""><a class="rc-progress-stepped__link">5</a></li>
        <li class="rc-progress-stepped__item" disabled=""><a class="rc-progress-stepped__link">6</a></li>
    </ol>
</div>
        

Issues

If you are having problems implementing this code, please submit an issue on our Github page.

Github Octocat

Feedback

If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

Slack logo

Changelog

  • 6th April 2018 [ui_assets/elements/progress.yml]
    Updated spacer classes across all templates
  • 8th March 2018 [ui_assets/elements/progress.yml]
    Ordered elements alpabetically
  • 19th February 2018 [ui_assets/elements/progress.yml]
    Convert all multi line text to use
  • 1st February 2018 [ui_assets/elements/progress.yml]
    Updated button classes
  • 1st February 2018 [ui_assets/elements/progress.yml]
    Updated icon classes
  • 29th January 2018 [ui_assets/elements/progress.yml]
    Update button classnames
  • 12th December 2017 [ui_assets/elements/progress.yml]
    Update colour classnames in code snippets (yml)
  • 1st December 2017 [ui_assets/elements/progress.yml]
    Reorganised elements navigation