Create loading spinner

I am adding a czml file to the viewer. How to create a loading sippner until the data is fully loaded?


Thank you for your post! I looked through our community forum and our sandcastle gallery. I did not find an easy way to add a loading spinner while the CZML data is loading in. Do other community members have suggestions?


Hi @fation,

You can add a HTML element to your code, like follows:

<div id = "spinner">
  <img src="spinner url here" />

Then, in your script, include something similar to below.

var czml = "......"; // put your CZML here
var viewer = new Cesium.Viewer("cesiumContainer");
var spinner = document.getElementById("spinner");
var dataSource = new Cesium.CzmlDataSource();
var dataSourcePromise = dataSource.load(czml).then(function() {
  viewer.zoomTo(dataSource); = "none";


Hope this helps!

Best regards,

1 Like

Thank you @janine .
I already have implemented the same way :smiley:

1 Like