CBP UI Library

Loader 

<div class="loader"></div>
<link media="all" rel="stylesheet" href="/loader/loader.css" />
<script src="/loader/loader.js"></script>
 
<div class="loader"></div>
{% import "_macros.twig" as h %}
{{ h.componentAssets('loader') }}
 
/* No context defined. */
  • Content: 
    @mixin loaderPseudo() {
  content: "";
  grid-area: 1/1;
  border: inherit;
  border-radius: 50%;
  animation: s5 2s infinite;
}
.loader {
  --loaderSize: 65px;
  width: var(--loaderSize); /* the size */
  border: 4px solid #0000;
  border-right-color: var(--loaderColor, var(--blue));

  aspect-ratio: 1;
  display: grid;
  border-radius: 50%;
  animation: load 1s linear infinite;

  &:before {
    @include loaderPseudo();
    margin: 2px;
    animation: load 2s infinite;
  }
  &:after {
    @include loaderPseudo();
    margin: 8px;
    animation: load 3s infinite;
  }

  &.fade-move, /* apply transition to moving elements */
  &.fade-enter-active,
  &.fade-leave-active {
    transition: opacity 0.5s ease, width 0.5s ease;
  }

  &.fade-enter-from,
  &.fade-leave-to {
    opacity: 0;
    width: 0;
  }
}
@keyframes load {
  100% {
    transform: rotate(1turn);
  }
}
  • URL: /components/raw/loader/loader.scss
  • Filesystem Path: src/components/loader/loader.scss
  • Size: 877 Bytes

This is a single element loader. This makes it extremely easy to include in js or twig components as the only markup is <div class="loader"></div>. The CSS, which drives the animation and design can simply be imported into whatever stylesheet is being used.

Customize

Use CSS custom properties to customize the size and color:

.loader {
  --loaderSize: 50px;
  --loaderColor: #6667ab;
}

Vue Transitions

The stylesheet also includes some Vue-specific transition classes which lets the loader grow/fade in on enter and shrink/fade out on leave:

.loader {
  &.fade-move, /* apply transition to moving elements */
  &.fade-enter-active,
  &.fade-leave-active {
    transition: opacity 0.5s ease, width 0.5s ease;
  }

  &.fade-enter-from,
  &.fade-leave-to {
    opacity: 0;
    width: 0;
  }
}