From 491c3b0d189403143ba88e2bb2c5ed67db2dd873 Mon Sep 17 00:00:00 2001 From: skhilton Date: Thu, 23 Jan 2020 23:00:15 -0800 Subject: [PATCH 1/6] added loader which goes away after the main data promises are fulfilled --- docs/_javascript/main.js | 1 + docs/index.html | 2 ++ docs/styles.css | 2 ++ 3 files changed, 5 insertions(+) diff --git a/docs/_javascript/main.js b/docs/_javascript/main.js index cba0f44b..5904b0b2 100644 --- a/docs/_javascript/main.js +++ b/docs/_javascript/main.js @@ -134,5 +134,6 @@ window.addEventListener('DOMContentLoaded', (event) => { console.log("click site " + max_y_record[0].site); d3.select("#site_" + max_y_record[0].site).dispatch("click"); } + d3.select("#loader").classed("is-active", false) }); }); diff --git a/docs/index.html b/docs/index.html index 02ae3f68..f1f1ec45 100644 --- a/docs/index.html +++ b/docs/index.html @@ -17,6 +17,8 @@ +
+
diff --git a/docs/styles.css b/docs/styles.css index d537d3e4..47616e8a 100644 --- a/docs/styles.css +++ b/docs/styles.css @@ -23,3 +23,5 @@ tr:nth-child(even) { .rect { fill: #ffab00; } + +.loader{color:#fff;position:fixed;box-sizing:border-box;left:-9999px;top:-9999px;width:0;height:0;overflow:hidden;z-index:999999}.loader:after,.loader:before{box-sizing:border-box;display:none}.loader.is-active{background-color:rgba(0,0,0,.85);width:100%;height:100%;left:0;top:0}.loader.is-active:after,.loader.is-active:before{display:block}.loader-ball:before{content:"";position:absolute;width:50px;height:50px;top:50%;left:50%;margin:-25px 0 0 -25px;background-color:#fff;border-radius:50%;z-index:1;animation:kickBall 1s infinite alternate ease-in both}.loader-ball[data-shadow]:before{box-shadow:inset -5px -5px 10px 0 rgba(0,0,0,.5)}.loader-ball:after{content:"";position:absolute;background-color:rgba(0,0,0,.3);border-radius:50%;width:45px;height:20px;top:calc(50% + 10px);left:50%;margin:0 0 0 -22.5px;z-index:0;animation:shadow 1s infinite alternate ease-out both}@keyframes shadow{0%{background-color:transparent;transform:scale(0)}40%{background-color:transparent;transform:scale(0)}95%{background-color:rgba(0,0,0,.75);transform:scale(1)}to{background-color:rgba(0,0,0,.75);transform:scale(1)}}@keyframes kickBall{0%{transform:translateY(-80px) scaleX(.95)}90%{border-radius:50%}to{transform:translateY(0) scaleX(1);border-radius:50% 50% 20% 20%}} From cf35f95dedbc2c105d2eafe0f6f8ac0de03f55d3 Mon Sep 17 00:00:00 2001 From: skhilton Date: Fri, 24 Jan 2020 10:47:40 -0800 Subject: [PATCH 2/6] example with package spin.js --- docs/_javascript/main.js | 18 ++++++++++++- docs/index.html | 3 +-- docs/styles.css | 57 +++++++++++++++++++++++++++++++++++++++- 3 files changed, 74 insertions(+), 4 deletions(-) diff --git a/docs/_javascript/main.js b/docs/_javascript/main.js index 5904b0b2..1aefb197 100644 --- a/docs/_javascript/main.js +++ b/docs/_javascript/main.js @@ -20,6 +20,21 @@ var greyColor = "#999999"; var fontPath = "_data/fonts/VeraMono.ttf"; var fontObject; +// loader settings +var opts = { + lines: 9, // The number of lines to draw + length: 9, // The length of each line + width: 5, // The line thickness + radius: 14, // The radius of the inner circle + color: '#EE3124', // #rgb or #rrggbb or array of colors + speed: 1.9, // Rounds per second + trail: 40, // Afterglow percentage + className: 'spinner', // The CSS class to assign to the spinner +}; + +var target = document.getElementById("line_plot"); + + window.addEventListener('DOMContentLoaded', (event) => { console.log('DOM fully loaded and parsed'); @@ -63,6 +78,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(target); Promise.all([promise1, promise3, promiseFontLoaded]).then( values => { console.log("Promises fulfilled!"); @@ -134,6 +150,6 @@ window.addEventListener('DOMContentLoaded', (event) => { console.log("click site " + max_y_record[0].site); d3.select("#site_" + max_y_record[0].site).dispatch("click"); } - d3.select("#loader").classed("is-active", false) + spinner.stop(); }); }); diff --git a/docs/index.html b/docs/index.html index f1f1ec45..7795193c 100644 --- a/docs/index.html +++ b/docs/index.html @@ -12,13 +12,12 @@ + -
-
diff --git a/docs/styles.css b/docs/styles.css index 47616e8a..8d1e519c 100644 --- a/docs/styles.css +++ b/docs/styles.css @@ -24,4 +24,59 @@ tr:nth-child(even) { fill: #ffab00; } -.loader{color:#fff;position:fixed;box-sizing:border-box;left:-9999px;top:-9999px;width:0;height:0;overflow:hidden;z-index:999999}.loader:after,.loader:before{box-sizing:border-box;display:none}.loader.is-active{background-color:rgba(0,0,0,.85);width:100%;height:100%;left:0;top:0}.loader.is-active:after,.loader.is-active:before{display:block}.loader-ball:before{content:"";position:absolute;width:50px;height:50px;top:50%;left:50%;margin:-25px 0 0 -25px;background-color:#fff;border-radius:50%;z-index:1;animation:kickBall 1s infinite alternate ease-in both}.loader-ball[data-shadow]:before{box-shadow:inset -5px -5px 10px 0 rgba(0,0,0,.5)}.loader-ball:after{content:"";position:absolute;background-color:rgba(0,0,0,.3);border-radius:50%;width:45px;height:20px;top:calc(50% + 10px);left:50%;margin:0 0 0 -22.5px;z-index:0;animation:shadow 1s infinite alternate ease-out both}@keyframes shadow{0%{background-color:transparent;transform:scale(0)}40%{background-color:transparent;transform:scale(0)}95%{background-color:rgba(0,0,0,.75);transform:scale(1)}to{background-color:rgba(0,0,0,.75);transform:scale(1)}}@keyframes kickBall{0%{transform:translateY(-80px) scaleX(.95)}90%{border-radius:50%}to{transform:translateY(0) scaleX(1);border-radius:50% 50% 20% 20%}} +.loader{ + color:#fff; + position:fixed; + box-sizing:border-box; + left:-9999px; + top:-9999px; + width:0; + height:0; + overflow:hidden; + z-index:999999 +} +.loader:after,.loader:before{ + box-sizing:border-box; + display:none +} +.loader.is-active{ + background-color:rgba(0,0,0,.85); + width:100%; + height:100%; + left:0; + top:0 +} +.loader.is-active:after,.loader.is-active:before{ + display:block +} +.loader-ball:before{ + content:""; + position:absolute; + width:50px; + height:50px; + top:50%; + left:50%; + margin:-25px 0 0 -25px; + background-color:#fff; + border-radius:50%; + z-index:1; + animation:kickBall 1s infinite alternate ease-in both +} +.loader-ball[data-shadow]:before{ + box-shadow:inset -5px -5px 10px 0 rgba(0,0,0,.5) +} +.loader-ball:after{ + content:""; + position:absolute; + background-color:rgba(0,0,0,.3); + border-radius:50%; + width:45px; + height:20px; + top:calc(50% + 10px); + left:50%; + margin:0 0 0 -22.5px; + z-index:0; + animation:shadow 1s infinite alternate ease-out both +} +@keyframes shadow{0%{background-color:transparent;transform:scale(0)}40%{background-color:transparent;transform:scale(0)}95%{background-color:rgba(0,0,0,.75);transform:scale(1)}to{background-color:rgba(0,0,0,.75);transform:scale(1)}} +@keyframes kickBall{0%{transform:translateY(-80px) scaleX(.95)}90%{border-radius:50%}to{transform:translateY(0) scaleX(1);border-radius:50% 50% 20% 20%}} From f54ef117cd7e3d3555bcaaab7bf51a6437b0a827 Mon Sep 17 00:00:00 2001 From: skhilton Date: Fri, 24 Jan 2020 13:34:05 -0800 Subject: [PATCH 3/6] formatting tweaks to spiner --- docs/_javascript/main.js | 21 ++++++++------- docs/styles.css | 57 ---------------------------------------- 2 files changed, 11 insertions(+), 67 deletions(-) diff --git a/docs/_javascript/main.js b/docs/_javascript/main.js index 1aefb197..5af0de1f 100644 --- a/docs/_javascript/main.js +++ b/docs/_javascript/main.js @@ -22,18 +22,19 @@ var fontObject; // loader settings var opts = { - lines: 9, // The number of lines to draw - length: 9, // The length of each line - width: 5, // The line thickness - radius: 14, // The radius of the inner circle - color: '#EE3124', // #rgb or #rrggbb or array of colors - speed: 1.9, // Rounds per second + 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 }; -var target = document.getElementById("line_plot"); - window.addEventListener('DOMContentLoaded', (event) => { console.log('DOM fully loaded and parsed'); @@ -78,7 +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(target); + var spinner = new Spinner(opts).spin(document.getElementById("line_plot")); Promise.all([promise1, promise3, promiseFontLoaded]).then( values => { console.log("Promises fulfilled!"); @@ -150,6 +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(); + spinner.stop(); //app is loaded, stop the spinner }); }); diff --git a/docs/styles.css b/docs/styles.css index 8d1e519c..d537d3e4 100644 --- a/docs/styles.css +++ b/docs/styles.css @@ -23,60 +23,3 @@ tr:nth-child(even) { .rect { fill: #ffab00; } - -.loader{ - color:#fff; - position:fixed; - box-sizing:border-box; - left:-9999px; - top:-9999px; - width:0; - height:0; - overflow:hidden; - z-index:999999 -} -.loader:after,.loader:before{ - box-sizing:border-box; - display:none -} -.loader.is-active{ - background-color:rgba(0,0,0,.85); - width:100%; - height:100%; - left:0; - top:0 -} -.loader.is-active:after,.loader.is-active:before{ - display:block -} -.loader-ball:before{ - content:""; - position:absolute; - width:50px; - height:50px; - top:50%; - left:50%; - margin:-25px 0 0 -25px; - background-color:#fff; - border-radius:50%; - z-index:1; - animation:kickBall 1s infinite alternate ease-in both -} -.loader-ball[data-shadow]:before{ - box-shadow:inset -5px -5px 10px 0 rgba(0,0,0,.5) -} -.loader-ball:after{ - content:""; - position:absolute; - background-color:rgba(0,0,0,.3); - border-radius:50%; - width:45px; - height:20px; - top:calc(50% + 10px); - left:50%; - margin:0 0 0 -22.5px; - z-index:0; - animation:shadow 1s infinite alternate ease-out both -} -@keyframes shadow{0%{background-color:transparent;transform:scale(0)}40%{background-color:transparent;transform:scale(0)}95%{background-color:rgba(0,0,0,.75);transform:scale(1)}to{background-color:rgba(0,0,0,.75);transform:scale(1)}} -@keyframes kickBall{0%{transform:translateY(-80px) scaleX(.95)}90%{border-radius:50%}to{transform:translateY(0) scaleX(1);border-radius:50% 50% 20% 20%}} From 7db77bc0243e01c83bf812137cad052f0d2d3d51 Mon Sep 17 00:00:00 2001 From: skhilton Date: Thu, 23 Jan 2020 23:00:15 -0800 Subject: [PATCH 4/6] added loader which goes away after the main data promises are fulfilled --- docs/_javascript/main.js | 1 + docs/index.html | 2 ++ 2 files changed, 3 insertions(+) diff --git a/docs/_javascript/main.js b/docs/_javascript/main.js index ebbe0d15..65f4de23 100644 --- a/docs/_javascript/main.js +++ b/docs/_javascript/main.js @@ -134,5 +134,6 @@ window.addEventListener('DOMContentLoaded', (event) => { console.log("click site " + max_y_record[0].site); d3.select("#site_" + max_y_record[0].site).dispatch("click"); } + d3.select("#loader").classed("is-active", false) }); }); diff --git a/docs/index.html b/docs/index.html index 2cf73abe..240e9c33 100644 --- a/docs/index.html +++ b/docs/index.html @@ -17,6 +17,8 @@ +
+
From 27d9683a423779cf4acf0fe4349b1e641f00edc0 Mon Sep 17 00:00:00 2001 From: skhilton Date: Fri, 24 Jan 2020 10:47:40 -0800 Subject: [PATCH 5/6] example with package spin.js --- docs/_javascript/main.js | 18 +++++++++++++++++- docs/index.html | 3 +-- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/docs/_javascript/main.js b/docs/_javascript/main.js index 65f4de23..ef48a146 100644 --- a/docs/_javascript/main.js +++ b/docs/_javascript/main.js @@ -20,6 +20,21 @@ var greyColor = "#999999"; var fontPath = "_data/fonts/DejaVuSansMonoBold_SeqLogo.ttf"; var fontObject; +// loader settings +var opts = { + lines: 9, // The number of lines to draw + length: 9, // The length of each line + width: 5, // The line thickness + radius: 14, // The radius of the inner circle + color: '#EE3124', // #rgb or #rrggbb or array of colors + speed: 1.9, // Rounds per second + trail: 40, // Afterglow percentage + className: 'spinner', // The CSS class to assign to the spinner +}; + +var target = document.getElementById("line_plot"); + + window.addEventListener('DOMContentLoaded', (event) => { console.log('DOM fully loaded and parsed'); @@ -63,6 +78,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(target); Promise.all([promise1, promise3, promiseFontLoaded]).then( values => { console.log("Promises fulfilled!"); @@ -134,6 +150,6 @@ window.addEventListener('DOMContentLoaded', (event) => { console.log("click site " + max_y_record[0].site); d3.select("#site_" + max_y_record[0].site).dispatch("click"); } - d3.select("#loader").classed("is-active", false) + spinner.stop(); }); }); diff --git a/docs/index.html b/docs/index.html index 240e9c33..1cd78c51 100644 --- a/docs/index.html +++ b/docs/index.html @@ -12,13 +12,12 @@ + -
-
From a70794118f0e3b661c6e3c50429954cbf685da60 Mon Sep 17 00:00:00 2001 From: skhilton Date: Fri, 24 Jan 2020 13:34:05 -0800 Subject: [PATCH 6/6] formatting tweaks to spiner --- docs/_javascript/main.js | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/docs/_javascript/main.js b/docs/_javascript/main.js index ef48a146..5ed8d227 100644 --- a/docs/_javascript/main.js +++ b/docs/_javascript/main.js @@ -22,18 +22,19 @@ var fontObject; // loader settings var opts = { - lines: 9, // The number of lines to draw - length: 9, // The length of each line - width: 5, // The line thickness - radius: 14, // The radius of the inner circle - color: '#EE3124', // #rgb or #rrggbb or array of colors - speed: 1.9, // Rounds per second + 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 }; -var target = document.getElementById("line_plot"); - window.addEventListener('DOMContentLoaded', (event) => { console.log('DOM fully loaded and parsed'); @@ -78,7 +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(target); + var spinner = new Spinner(opts).spin(document.getElementById("line_plot")); Promise.all([promise1, promise3, promiseFontLoaded]).then( values => { console.log("Promises fulfilled!"); @@ -150,6 +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(); + spinner.stop(); //app is loaded, stop the spinner }); });