Still have questions?
Contact support
You are looking at an outdated 7.12.0 version of this document. Switch to the 7.14.0 version to see the up to date information.

Preloader

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.

Prerequisites

Chart editor works only if anychart.css and anychart-ui.min.css are referenced in the page, you can find latest and versioned options at AnyChart CDN:

<link rel="stylesheet" href="https://cdn.anychart.com/css/latest/anychart-ui.min.css">
<link rel="stylesheet" href="https://cdn.anychart.com/fonts/2.0.0/anychart.css">

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:

JsFiddle Playground