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" id="animated-progress-bar" 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>
<div class="rc-padding-top--sm">
  <a class="rc-btn rc-btn--two" id="animate-progress" href="#/">Animate again</a>
</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-12" type="image/svg+xml" class="logo-svg logo--crown">
         <img src="https://d3moonnr9fkxfg.cloudfront.net/1x1.gif?v=8-5-12" style="background-image: url(https://d3moonnr9fkxfg.cloudfront.net/logo--crown.png?v=8-5-12)" width="150" height="100" alt="Royal Caninn logo" />
    </object>
    <canvas class="rc-loader__canvas" id="animated-loader" width="96" height="96" data-js-value="100"></canvas>
    <div class="rc-loader__background"></div>
</div>
<div class="rc-padding-top--sm">
  <a class="rc-btn rc-btn--two" id="animate-loader" href="#/">Animate again</a>
</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-12" type="image/svg+xml" class="logo-svg logo--crown">
        <img src="https://d3moonnr9fkxfg.cloudfront.net/1x1.gif?v=8-5-12" style="background-image: url(https://d3moonnr9fkxfg.cloudfront.net/logo--crown.png?v=8-5-12)" 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 rc-current"><a class="rc-progress-stepped__link">3</a></li>
        <li class="rc-progress-stepped__item"><a class="rc-progress-stepped__link">4</a></li>
        <li class="rc-progress-stepped__item"><a class="rc-progress-stepped__link">5</a></li>
        <li class="rc-progress-stepped__item"><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

  • 1st November 2018 [ui_assets/elements/progress.yml]
    Update link to progress bar page
  • 24th October 2018 [ui_assets/elements/progress.yml]
    Reintroduce git log into page info.
  • 24th October 2018 [ui_assets/elements/progress.yml]
    Update example for stepped progress.
  • 15th October 2018 [ui_assets/elements/progress.yml]
    Add buttons to trigger animation on progress bar and loader
  • 13th September 2018 [ui_assets/elements/progress.yml]
    Spelling/ grammar
  • 15th August 2018 [ui_assets/elements/progress.yml]
    add attribute check if component initialized
  • 26th July 2018 [ui_assets/elements/progress.yml]
    Added better progress documentation.
  • 26th July 2018 [ui_assets/elements/progress.yml]
    Add progress bar documentation.
  • 25th July 2018 [ui_assets/elements/progress.yml]
    prefix complete
  • 25th July 2018 [ui_assets/elements/progress.yml]
    prefix padding--sm
  • 25th July 2018 [ui_assets/elements/progress.yml]
    prefix btn--one
  • 25th July 2018 [ui_assets/elements/progress.yml]
    update classes
  • 20th July 2018 [ui_assets/elements/progress.yml]
    Add updated rc- classes for modal.
  • 12th July 2018 [ui_assets/elements/progress.yml]
    Remove vbtn typo.
  • 12th July 2018 [ui_assets/elements/progress.yml]
    update image src
  • 12th July 2018 [ui_assets/elements/progress.yml]
    update markup
  • 12th July 2018 [ui_assets/elements/progress.yml]
    Prefixed classes throughout the portal with rc-.
  • 11th July 2018 [ui_assets/elements/progress.yml]
    restructure docs
  • 10th July 2018 [ui_assets/elements/progress.yml]
    update loader markup. Add proper docs for page scroll component
  • 5th July 2018 [ui_assets/elements/progress.yml]
    update spinner markup
  • 4th July 2018 [ui_assets/elements/progress.yml]
    add infinate spinner
  • 3rd July 2018 [ui_assets/elements/progress.yml]
    aminated loader section
  • 2nd July 2018 [ui_assets/elements/progress.yml]
    remove unnecessary oce example
  • 29th June 2018 [ui_assets/elements/progress.yml]
    add depreciate alert
  • 29th June 2018 [ui_assets/elements/progress.yml]
    add article progress docs
  • 28th June 2018 [ui_assets/elements/progress.yml]
    Added test page for bootstrap clashes.
  • 27th June 2018 [ui_assets/elements/progress.yml]
    typo
  • 27th June 2018 [ui_assets/elements/progress.yml]
    update breadcrumb markup
  • 25th June 2018 [ui_assets/elements/progress.yml]
    add link to boilerplate for page progress example
  • 22nd June 2018 [ui_assets/elements/progress.yml]
    add breadcrumbs
  • 22nd June 2018 [ui_assets/elements/progress.yml]
    update markup
  • 21st June 2018 [ui_assets/elements/progress.yml]
    add examples. depreciate old
  • 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