PDJ Brandbox

Preloader 

<div class="preloader__wrapper">
    <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 100 100">
        <rect width="5" height="20" x="47.5" y="10" rx="3" ry="3" transform="rotate(0 50 50)" fill="currentColor">
            <animate attributeName="opacity" begin="-0.92s" dur="1s" repeatCount="indefinite" keyTimes="0;1" values="1;0" />
        </rect>
        <rect width="5" height="20" x="47.5" y="10" rx="3" ry="3" transform="rotate(30 50 50)" fill="currentColor">
            <animate attributeName="opacity" begin="-0.83s" dur="1s" repeatCount="indefinite" keyTimes="0;1" values="1;0" />
        </rect>
        <rect width="5" height="20" x="47.5" y="10" rx="3" ry="3" transform="rotate(60 50 50)" fill="currentColor">
            <animate attributeName="opacity" begin="-0.75s" dur="1s" repeatCount="indefinite" keyTimes="0;1" values="1;0" />
        </rect>
        <rect width="5" height="20" x="47.5" y="10" rx="3" ry="3" transform="rotate(90 50 50)" fill="currentColor">
            <animate attributeName="opacity" begin="-0.67s" dur="1s" repeatCount="indefinite" keyTimes="0;1" values="1;0" />
        </rect>
        <rect width="5" height="20" x="47.5" y="10" rx="3" ry="3" transform="rotate(120 50 50)" fill="currentColor">
            <animate attributeName="opacity" begin="-0.59s" dur="1s" repeatCount="indefinite" keyTimes="0;1" values="1;0" />
        </rect>
        <rect width="5" height="20" x="47.5" y="10" rx="3" ry="3" transform="rotate(150 50 50)" fill="currentColor">
            <animate attributeName="opacity" begin="-0.5s" dur="1s" repeatCount="indefinite" keyTimes="0;1" values="1;0" />
        </rect>
        <rect width="5" height="20" x="47.5" y="10" rx="3" ry="3" transform="rotate(180 50 50)" fill="currentColor">
            <animate attributeName="opacity" begin="-0.42s" dur="1s" repeatCount="indefinite" keyTimes="0;1" values="1;0" />
        </rect>
        <rect width="5" height="20" x="47.5" y="10" rx="3" ry="3" transform="rotate(210 50 50)" fill="currentColor">
            <animate attributeName="opacity" begin="-0.33s" dur="1s" repeatCount="indefinite" keyTimes="0;1" values="1;0" />
        </rect>
        <rect width="5" height="20" x="47.5" y="10" rx="3" ry="3" transform="rotate(240 50 50)" fill="currentColor">
            <animate attributeName="opacity" begin="-0.25s" dur="1s" repeatCount="indefinite" keyTimes="0;1" values="1;0" />
        </rect>
        <rect width="5" height="20" x="47.5" y="10" rx="3" ry="3" transform="rotate(270 50 50)" fill="currentColor">
            <animate attributeName="opacity" begin="-0.17s" dur="1s" repeatCount="indefinite" keyTimes="0;1" values="1;0" />
        </rect>
        <rect width="5" height="20" x="47.5" y="10" rx="3" ry="3" transform="rotate(300 50 50)" fill="currentColor">
            <animate attributeName="opacity" begin="-0.08s" dur="1s" repeatCount="indefinite" keyTimes="0;1" values="1;0" />
        </rect>
        <rect width="5" height="20" x="47.5" y="10" rx="3" ry="3" transform="rotate(330 50 50)" fill="currentColor">
            <animate attributeName="opacity" begin="0s" dur="1s" repeatCount="indefinite" keyTimes="0;1" values="1;0" />
        </rect>
    </svg>
</div>
 
<div class="preloader__wrapper">
  <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 100 100">
    <rect width="5" height="20" x="47.5" y="10" rx="3" ry="3" transform="rotate(0 50 50)" fill="currentColor">
      <animate attributeName="opacity" begin="-0.92s" dur="1s" repeatCount="indefinite" keyTimes="0;1" values="1;0" />
    </rect>
    <rect width="5" height="20" x="47.5" y="10" rx="3" ry="3" transform="rotate(30 50 50)" fill="currentColor">
      <animate attributeName="opacity" begin="-0.83s" dur="1s" repeatCount="indefinite" keyTimes="0;1" values="1;0" />
    </rect>
    <rect width="5" height="20" x="47.5" y="10" rx="3" ry="3" transform="rotate(60 50 50)" fill="currentColor">
      <animate attributeName="opacity" begin="-0.75s" dur="1s" repeatCount="indefinite" keyTimes="0;1" values="1;0" />
    </rect>
    <rect width="5" height="20" x="47.5" y="10" rx="3" ry="3" transform="rotate(90 50 50)" fill="currentColor">
      <animate attributeName="opacity" begin="-0.67s" dur="1s" repeatCount="indefinite" keyTimes="0;1" values="1;0" />
    </rect>
    <rect width="5" height="20" x="47.5" y="10" rx="3" ry="3" transform="rotate(120 50 50)" fill="currentColor">
      <animate attributeName="opacity" begin="-0.59s" dur="1s" repeatCount="indefinite" keyTimes="0;1" values="1;0" />
    </rect>
    <rect width="5" height="20" x="47.5" y="10" rx="3" ry="3" transform="rotate(150 50 50)" fill="currentColor">
      <animate attributeName="opacity" begin="-0.5s" dur="1s" repeatCount="indefinite" keyTimes="0;1" values="1;0" />
    </rect>
    <rect width="5" height="20" x="47.5" y="10" rx="3" ry="3" transform="rotate(180 50 50)" fill="currentColor">
      <animate attributeName="opacity" begin="-0.42s" dur="1s" repeatCount="indefinite" keyTimes="0;1" values="1;0" />
    </rect>
    <rect width="5" height="20" x="47.5" y="10" rx="3" ry="3" transform="rotate(210 50 50)" fill="currentColor">
      <animate attributeName="opacity" begin="-0.33s" dur="1s" repeatCount="indefinite" keyTimes="0;1" values="1;0" />
    </rect>
    <rect width="5" height="20" x="47.5" y="10" rx="3" ry="3" transform="rotate(240 50 50)" fill="currentColor">
      <animate attributeName="opacity" begin="-0.25s" dur="1s" repeatCount="indefinite" keyTimes="0;1" values="1;0" />
    </rect>
    <rect width="5" height="20" x="47.5" y="10" rx="3" ry="3" transform="rotate(270 50 50)" fill="currentColor">
      <animate attributeName="opacity" begin="-0.17s" dur="1s" repeatCount="indefinite" keyTimes="0;1" values="1;0" />
    </rect>
    <rect width="5" height="20" x="47.5" y="10" rx="3" ry="3" transform="rotate(300 50 50)" fill="currentColor">
      <animate attributeName="opacity" begin="-0.08s" dur="1s" repeatCount="indefinite" keyTimes="0;1" values="1;0" />
    </rect>
    <rect width="5" height="20" x="47.5" y="10" rx="3" ry="3" transform="rotate(330 50 50)" fill="currentColor">
      <animate attributeName="opacity" begin="0s" dur="1s" repeatCount="indefinite" keyTimes="0;1" values="1;0" />
    </rect>
  </svg>
</div>
 
/* No context defined. */
  • Content: 
    $loaderMinimumHeight: 200px;

.preloader__parent {
  position: relative;
  min-height: $loaderMinimumHeight;
}

.preloader__wrapper {
  $size: 35px;

  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  background: var(--color--neutrals-0);
  opacity: .99;

  svg {
    position: absolute;
    top: $loaderMinimumHeight / 2;
    left: 50%;
    z-index: 1;

    display: block;
    width: $size;
    height: $size;

    transform: translate(-50%, -50%);
  }
}
  • URL: /components/raw/preloader/preloader.scss
  • Filesystem Path: ../src/02_atoms/preloader/preloader.scss
  • Size: 490 Bytes

No notes defined.