Pro

Bootstrap Loaders

Indicate loaded data amount with circle loaders.

Torus Kit new features for Loaders
Loader Progress track Status text Styling

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: {integer} for visual style and --status: {percents} 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="sr-only">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 o-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="o-20" />
  </svg>
  <span class="sr-only">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 text-small"></span>
  <svg viewBox="0 0 40 40"><circle cx="20" cy="20" r="15"/></svg>
  <span class="sr-only">Loading...</span>
</div>

Styling

Colors

To set the loader color, use .text-* Text color utility or custom color with data-text-color="{color}" attribute.

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="sr-only">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="sr-only">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="sr-only">Loading...</span>
</div>

<div class="loader" role="status" style="--loaded: 65" data-text-color="#7616ef">
  <svg viewBox="0 0 40 40"><circle cx="20" cy="20" r="15"/></svg>
  <span class="sr-only">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="sr-only">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="sr-only">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="sr-only">Loading...</span>
</div>

Buttons

It’s easy to use the loader within button. Just use p-* Spacing utility to prevent from breaking the .btn size and .btn-icon class to add space between a loader and a text.

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