Create loading spinner

CesiumJS
1

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

2

@fation

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?

-Sam

3

Hi @fation,

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

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

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);
  spinner.style.display = "none";
});

viewer.dataSources.add(dataSource);

Hope this helps!

Best regards,
Janine

1 Like
4

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

1 Like