Preloader

• Overview
• Modules
• Sample

Overview

Chart Preloader is a small animated object used when you want to show that some process is in progress and an end user needs to wait.

Modules

The preloader requires the Common UI module:

<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-ui.min.js"></script>  

Also, you should reference the anychart-ui.min.css file:

<link rel="stylesheet" type="text/css" href="https://cdn.anychart.com/releases/8.13.0/css/anychart-ui.min.css"/>

Learn more: Modules.

Sample

Preloader is a very simple element that is created using preloader() method which returns an instance of anychart.ui.Preloader class.

You can create preloader when needed, render it to DOM and the turn it on and off simply by toggling visibility.

// create a preloader
preloader = anychart.ui.preloader();
// render preloader to the DOM
preloader.render();

// Optional: 
// preloader.render(document.getElementById("container")); renders
// preloader in the given element
// Optional: decide what element becomes a preloader
// preloader.decorate(document.getElementById("preloader_container"));

// show preloader
preloader.visible(true);

// do something

// hide preloader
preloader.visible(true);

Here is a basic sample with chart hidden by preloader for some time, see the code to learn more: