Bootstrap Loaders

Indicate loaded data amount with circle loaders.

About

Torus Kit .loader component is visually similar to spinners, but represents amount of downloaded data. Usually in percentage from 0% to 100%. Loader component uses inline CSS custom properties named --loaded: <number> for visual style and --status: <string> for text status. Because the loader is dynamic component, you need to use some JavaScript to dynamically change --loaded and --status inline CSS properties.

Loader

Example

This example shows initial status of the .loader set to 5 using inline CSS style="--loaded: 5". Click the button to preview the loader.

Loading...

<div class="loader" role="status" style="--loaded: 5">
  <svg viewBox="0 0 40 40"><circle cx="20" cy="20" r="15"/></svg>
  <span class="visually-hidden">Loading...</span>
</div>

Progress track

To create a progress track of the .loader, just duplicate <circle cx="20" cy="20" r="15"/> and give it some opacity. In this case opacity-20.

Loading...

<div class="loader" role="status">
  <svg viewBox="0 0 40 40">
    <circle cx="20" cy="20" r="15"/>
    <circle cx="20" cy="20" r="15" class="opacity-20" />
  </svg>
  <span class="visually-hidden">Loading...</span>
</div>

Status text value

.loader component can include text status also. Using inline CSS style with custom properties --loaded: {integer} that represents visual status of the loader and a --status: '{percents}' property, that represents a text status. JavaScript is also need to dynamically set both of these properties.

Loading...

<div class="loader text-primary p-5" role="status" style="--loaded: 15; --status: '15%'">
  <span class="status small"></span>
  <svg viewBox="0 0 40 40"><circle cx="20" cy="20" r="15"/></svg>
  <span class="visually-hidden">Loading...</span>
</div>

Styling

Colors

To set the loader color, use .text-* Text color utility.

Loading...
Loading...
Loading...
Loading...

<div class="loader text-primary" role="status" style="--loaded: 65">
  <svg viewBox="0 0 40 40"><circle cx="20" cy="20" r="15"/></svg>
  <span class="visually-hidden">Loading...</span>
</div>

<div class="loader text-secondary" role="status" style="--loaded: 65">
  <svg viewBox="0 0 40 40"><circle cx="20" cy="20" r="15"/></svg>
  <span class="visually-hidden">Loading...</span>
</div>

<div class="loader text-danger" role="status" style="--loaded: 65">
  <svg viewBox="0 0 40 40"><circle cx="20" cy="20" r="15"/></svg>
  <span class="visually-hidden">Loading...</span>
</div>

<div class="loader" role="status" style="--loaded: 65" data-fx="text[#7616ef]">
  <svg viewBox="0 0 40 40"><circle cx="20" cy="20" r="15"/></svg>
  <span class="visually-hidden">Loading...</span>
</div>

Sizing

It’s easy to set different size of Torus Kit .loader component, because it uses padding for the sizing, so use ony of the p-* Spacing utilities.

Loading...
Loading...
Loading...

<div class="loader p-2" role="status" style="--loaded: 65">
  <svg viewBox="0 0 40 40"><circle cx="20" cy="20" r="15"/></svg>
  <span class="visually-hidden">Loading...</span>
</div>

<div class="loader p-3" role="status" style="--loaded: 65">
  <svg viewBox="0 0 40 40"><circle cx="20" cy="20" r="15"/></svg>
  <span class="visually-hidden">Loading...</span>
</div>

<div class="loader p-4" role="status" style="--loaded: 65">
  <svg viewBox="0 0 40 40"><circle cx="20" cy="20" r="15"/></svg>
  <span class="visually-hidden">Loading...</span>
</div>

Buttons

It’s easy to use the loader within a button. Just use p-* Spacing utility to size the .loader and .has-icon class on parent .btn to properly align the button content. Also make sure that .loader class is used on <i> HTML tag.

<button class="btn btn-primary has-icon">
  <span>Click to load</span>
  <i class="loader p-2" role="status">
    <svg viewBox="0 0 40 40"><circle cx="20" cy="20" r="15"/></svg>
  </i>
</button>