Royal Canin Logo

Working together for the ultimate brand experience

Royal Canin Design Language

Progress

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

Progress bar

<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" data-js-labels="{"0":"0", "50":"50", "100":"100"}">
  <input type="text" id="slider-result" />
</div>
<div class="rc-padding-top--sm">
  <button class="rc-btn rc-btn--two" id="animate-progress">Animate again</button>
</div>

Copied!

Progress with tooltip

<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="15" data-js-step="1" data-js-tooltip="true" data-js-labels="{"0":"0", "50":"50", "100":"100"}">
  <input type="text" id="slider-result" />
</div>

Copied!

Progress with indicators

Alerts by default appear in page but can also appear and disappear on a page with a specific timeout function.

<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="70" data-js-step="1" data-js-labels="{"0":"0", "50":"50", "100":"100"}" data-js-type="progress-labels">
  <input type="text" id="slider-result" />
</div>

Copied!

Progress with indicators and tooltip

<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="80" data-js-step="1" 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>

Copied!

Progress with indicators and custom tooltip labels

<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="0" data-js-step="1" data-js-labels="{"0":{"label": "Chapter 1"}, "50":{"label": "Chapter 2"}, "100":{"label": "Epilogue"}}" data-js-type="progress-labels" data-js-tooltip="true">
  <input type="text" id="slider-result" />
</div>

Copied!

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.

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

Copied!

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.

Animate again 
<div class="rc-loader rc-margin-bottom--sm" data-js-loader="">
  <object id="" class="rc-loader__logo logo-svg logo--crown" data="https://dl.royalcanin.com/8-6-5/logo--crown.svg" type="image/svg+xml">
    <img src="https://dl.royalcanin.com/8-6-5/1x1.gif" style="background-image: url(https://dl.royalcanin.com/8-6-5/logo--crown.png)" 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>
<a class="rc-btn rc-btn--two" id="animate-loader">Animate again</a>

Copied!

Infinite loader

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

Copied!

Progress

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% 
<div class="rc-progress rc-progress-demo" data-value="20">
  <progress class="rc-progress__progressElem" max="100" value="20" id="update-progress-demo">
    <div class="rc-progress--fallback__bar">
      <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" data-js-demo="update-progress-demo">Click me to update progress</button>

Copied!

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 
<div class="rc-progress-stepped" data-value="">
  <ol class="rc-list">
    <li class="rc-list__item rc-progress-stepped__item rc-complete">
      <a href="#" class="rc-progress-stepped__link">1</a>
    </li>
    <li class="rc-list__item rc-progress-stepped__item rc-complete">
      <a href="#" class="rc-progress-stepped__link">2</a>
    </li>
    <li class="rc-list__item rc-progress-stepped__item rc-current">
      <a href="#" class="rc-progress-stepped__link">3</a>
    </li>
    <li class="rc-list__item rc-progress-stepped__item">
      <a href="#" class="rc-progress-stepped__link">4</a>
    </li>
    <li class="rc-list__item rc-progress-stepped__item">
      <a href="#" class="rc-progress-stepped__link">5</a>
    </li>
    <li class="rc-list__item rc-progress-stepped__item">
      <a href="#" class="rc-progress-stepped__link">6</a>
    </li>
  </ol>
  <ol> </ol>
</div>

Copied!