Flex Loader

Default

Flex Loaders can be used to show a spinning loader icon behind lazy-loaded content. The flex ratio, background color and text color can all be modified using component modifiers and utility classes.

<div class="FlexEmbed u-bgBlack u-textSilver">
  <div class="FlexEmbed-ratio "></div>

  <div class="FlexEmbed-content ">
    <svg width="28" height="28" viewBox="0 0 28 28" aria-hidden="true" class="u-spin FlexEmbed-icon">
      <path d="M27.5 14c0 7.453-6.047 13.5-13.5 13.5s-13.5-6.047-13.5-13.5c0-6.781 5-12.391 11.5-13.359v3.563c-4.562 0.922-8 4.969-8 9.797 0 5.516 4.484 10 10 10s10-4.484 10-10c0-4.828-3.437-8.875-8-9.797v-3.563c6.5 0.969 11.5 6.578 11.5 13.359z" />
    </svg>

  </div>
</div>

Inner

The inner FlexEmbed-content of a loader can also be embedded into other FlexEmbeds to build more complex experiences.