Loaders | Crossroads Digital Design Kit

UI Components / Loaders

During the initial load of your application, you may want to display a loading indicator to convey to the user that something is happening. To do so, you can add the following code directly to your app's index.html file.

<div class="loader-example">
  <svg viewBox="0 0 102 101">
    <g fill="none" fill-rule="evenodd">
      <g stroke-width="2" transform="translate(1 1)">
        <ellipse cx="50" cy="49.421" rx="50" ry="49.421" stroke="#eee"></ellipse>
        <path d="M50 98.842c27.614 0 50-22.127 50-49.42C100 22.125 77.614 0 50 0" stroke="#3B6E8F" stroke-opacity=".631"></path>
      </g>
    </g>
  </svg>
</div>