Custom loading indicator

This tutorial will show how we can build a custom loading indicator that can be toggled on and off as needed.

The final loading indicator will contain following elements:

• Main container / curtain.
• Label
• Icon

Let's walk through all of them step-by-step.

Main container / curtain

We will use Container object, placed over chart to add all other elements to.

We will also use its semi-transparent background to as a "curtain" to dim out underlying chart.

let indicator = root.container.children.push(am5.Container.new(root, {
  width: am5.p100,
  height: am5.p100,
  layer: 1000,
  background: am5.Rectangle.new(root, {
    fill: am5.color(0xffffff),
    fillOpacity: 0.7
  })
}));

var indicator = root.container.children.push(am5.Container.new(root, {
  width: am5.p100,
  height: am5.p100,
  layer: 1000,
  background: am5.Rectangle.new(root, {
    fill: am5.color(0xffffff),
    fillOpacity: 0.7
  })
}));

Note, how we are placing the container directly into root element so that we cover all of its area.

The layer: 1000 ensures that indicator is placed into a separate layer, well above any other elements in the chart.

Label

Now, let's add a Label as a child to the main container:

indicator.children.push(am5.Label.new(root, {
  text: "Loading...",
  fontSize: 25,
  x: am5.p50,
  y: am5.p50,
  centerX: am5.p50,
  centerY: am5.p50
}));

indicator.children.push(am5.Label.new(root, {
  text: "Loading...",
  fontSize: 25,
  x: am5.p50,
  y: am5.p50,
  centerX: am5.p50,
  centerY: am5.p50
}));

The x, y, centerX, and centerY settings ensure that our label is centered within container vertically and horizontally.

Icon

We will use an element Graphics for the icon.

It's easy to use, since we can use its setting svgPath to add actual icon shape:

let hourglass = indicator.children.push(am5.Graphics.new(root, {
  width: 32,
  height: 32,
  fill: am5.color(0x000000),
  x: am5.p50,
  y: am5.p50,
  centerX: am5.p50,
  centerY: am5.p50,
  dy: -45,
  svgPath: "M12 5v10l9 9-9 9v10h24V33l-9-9 9-9V5H12zm20 29v5H16v-5l8-8 8 8zm-8-12-8-8V9h16v5l-8 8z"
}));

var hourglass = indicator.children.push(am5.Graphics.new(root, {
  width: 32,
  height: 32,
  fill: am5.color(0x000000),
  x: am5.p50,
  y: am5.p50,
  centerX: am5.p50,
  centerY: am5.p50,
  dy: -45,
  svgPath: "M12 5v10l9 9-9 9v10h24V33l-9-9 9-9V5H12zm20 29v5H16v-5l8-8 8 8zm-8-12-8-8V9h16v5l-8 8z"
}));

NOTEIf we wanted to use an external image - say a PNG - we could use element of type Picture (more about using images).

As a final touch, let's also add an animation, which rotates the icon:

var hourglassanimation = hourglass.animate({
  key: "rotation",
  to: 180,
  loops: Infinity,
  duration: 2000,
  easing: am5.ease.inOut(am5.ease.cubic)
});

var hourglassanimation = hourglass.animate({
  key: "rotation",
  to: 180,
  loops: Infinity,
  duration: 2000,
  easing: am5.ease.inOut(am5.ease.cubic)
});

NOTEFor more information about animations, refer to "Animations" tutorial.

Toggling on/off

Now that we have our indicator ready, we can turn it off by calling its hide() method.

Similarly, we can reveal it using show().

Let's build a function that toggles the indicator:

function toggleIndicator() {
  if (indicator.isHidden()) {
    hourglassanimation.play();
    indicator.show();
  }
  else {
    hourglassanimation.pause();
    indicator.hide();
  }
}

function toggleIndicator() {
  if (indicator.isHidden()) {
    hourglassanimation.play();
    indicator.show();
  }
  else {
    hourglassanimation.pause();
    indicator.hide();
  }
}

Please note that we also pause the animation when indicator is hidden. No point in wasting resources on animation that is not visible.

Working demo

See the Pen amCharts 5: Loading indicator by amCharts team (@amcharts) on CodePen.