Wake Creators LogoCSS - Components Squid Style
Getting Started
Content
Layout
Forms
Components
Accordion CollapseAlertBadgeBoxBreadcrumbButtonCardDropdownLoaderDefault | SpinnerProgress BarModalPaginationProgress BarStepsTabsTagToastToolip
Utilities
Styleguide

Loader

Indicate the loading state of a component or page, built entirely with HTML and CSS.

To see all the colors and their variations go to the Styleguide page

Default | Spinner

To change color just change the border classes and to change size use small, big or bigger. Without size classes the size is default 2rem.

<div class="loader small" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="loader" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="loader big border-lilac" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="loader bigger border-lilac" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Progress Bar

To make the correct animation of the progress bar the ideal is to use some Javascript for progress control. Here we are using an animate-bar class just for demonstration

<div class="progress">
  <div
    class="progress-bar background-dashed animate-bar"
    role="progressbar"
    aria-valuemin="0"
    aria-valuemax="100"
  ></div>
</div>