Skip to content

Add icon to show app is loading #92

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
skhilton wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Add icon to show app is loading #92

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
491c3b0
added loader which goes away after the main data promises are fulfilled
skhilton Jan 24, 2020
cf35f95
example with package spin.js
skhilton Jan 24, 2020
f54ef11
formatting tweaks to spiner
skhilton Jan 24, 2020
7db77bc
added loader which goes away after the main data promises are fulfilled
skhilton Jan 24, 2020
27d9683
example with package spin.js
skhilton Jan 24, 2020
a707941
formatting tweaks to spiner
skhilton Jan 24, 2020
b54ec9e
Merge branch 'loader' of https://github.com/jbloomlab/dms-view into l…
skhilton Feb 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions docs/_javascript/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');

Expand Down Expand Up @@ -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!");
Expand Down Expand Up @@ -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
});
});
1 change: 1 addition & 0 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.js"></script>
<script src="https://cdn.jsdelivr.net/npm/opentype.js@latest/dist/opentype.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.0.1/spin.min.js'></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css" />
</head>
Expand Down