diff --git a/docs/_javascript/main.js b/docs/_javascript/main.js
index ebbe0d15..5ed8d227 100644
--- a/docs/_javascript/main.js
+++ b/docs/_javascript/main.js
@@ -20,6 +20,22 @@ var greyColor = "#999999";
var fontPath = "_data/fonts/DejaVuSansMonoBold_SeqLogo.ttf";
var fontObject;
+// loader settings
+var opts = {
+ lines: 13, // The number of lines to draw
+ length: 38, // The length of each line
+ width: 17, // The line thickness
+ top: '20%', // Top position relative to parent
+ radius: 45, // The radius of the inner circle
+ color: greyColor, // #rgb or #rrggbb or array of colors
+ corners: 1, // Corner roundness (0..1)
+ fadeColor: 'transparent', // CSS color or array of colors
+ speed: 1, // Rounds per second
+ trail: 40, // Afterglow percentage
+ className: 'spinner', // The CSS class to assign to the spinner
+};
+
+
window.addEventListener('DOMContentLoaded', (event) => {
console.log('DOM fully loaded and parsed');
@@ -63,6 +79,7 @@ window.addEventListener('DOMContentLoaded', (event) => {
// Wait for all data to load before initializing content across the entire
// application.
console.log("Waiting for promises...");
+ var spinner = new Spinner(opts).spin(document.getElementById("line_plot"));
Promise.all([promise1, promise3, promiseFontLoaded]).then(
values => {
console.log("Promises fulfilled!");
@@ -134,5 +151,6 @@ window.addEventListener('DOMContentLoaded', (event) => {
console.log("click site " + max_y_record[0].site);
d3.select("#site_" + max_y_record[0].site).dispatch("click");
}
+ spinner.stop(); //app is loaded, stop the spinner
});
});
diff --git a/docs/index.html b/docs/index.html
index 2cf73abe..1cd78c51 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -12,6 +12,7 @@
+