LoadingIndicator

LoadingIndicator is a pattern for displaying a loader text inside a parent container. It leverages LoadingSpinner under the hood.

Usage

The LoadingIndicator leverages position: absolute so you will need to have position: relative on a parent.

<template>
  <div class="demo-container">
    <ci-loading-indicator />
  </div>
</template>

<style>
.demo-container {
  position: relative;
  padding: 20px;
}
</style>

Text Prop

Use text to pass a string to your LoadingIndicator. If nothing is passed to this prop, no text will be displayed.

<template>
  <div class="demo-container">
    <ci-loading-indicator text="Now loading" />
  </div>
</template>

<style>
.demo-container {
  position: relative;
  padding: 20px;
}
</style>

Size Prop

Use size to change the size of your LoadingIndicator. size accepts xs, sm or md as a string.

<template>
  <div>
    <div class="demo-container">
      <ci-loading-indicator text="Default" />
    </div>
    <div class="demo-container">
      <ci-loading-indicator text="Small" size="sm" />
    </div>
      <div class="demo-container">
      <ci-loading-indicator text="Extra small" size="xs" />
    </div>
  </div>
</template>

<style>
.demo-container {
  position: relative;
  padding: 20px;
}
</style>

Color

The loading indicator uses currentColor for its coloring, so you can adjust it by changing the color of its container.

<template>
  <div class="loading-container">
    <ci-loading-indicator text="Custom color" />
  </div>
</template>

<style>
.loading-container {
  position: relative;
  padding: 20px;
  color: #3eaf7c;
}
</style>