From 0f9bcfeee6b47e6206b062d2affd0862209820f3 Mon Sep 17 00:00:00 2001 From: Jacek Kowalski <Jacek@jacekk.info> Date: Tue, 13 Dec 2016 22:49:26 +0000 Subject: [PATCH] Use navbar for loading indication --- index.js | 6 +++--- index.html | 6 ------ index.css | 14 ++++++++++++++ 3 files changed, 17 insertions(+), 9 deletions(-) diff --git a/index.css b/index.css index 5edcb4a..dfc40fa 100644 --- a/index.css +++ b/index.css @@ -33,3 +33,17 @@ font-weight: normal; font-size: inherit; } + +nav.loading { + background-image: -webkit-linear-gradient(45deg,rgba(0,0,0,.1) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.1) 75%,transparent 75%,transparent); + background-image: -o-linear-gradient(45deg,rgba(0,0,0,.1) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.1) 75%,transparent 75%,transparent); + background-image: linear-gradient(45deg,rgba(0,0,0,.1) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.1) 75%,transparent 75%,transparent); + -webkit-background-size: 40px 40px; + background-size: 40px 40px; + -webkit-animation: progress-bar-stripes 2s linear infinite; + -o-animation: progress-bar-stripes 2s linear infinite; + animation: progress-bar-stripes 2s linear infinite; +} +nav.loading * { + color: black !important; +} diff --git a/index.html b/index.html index 52958c1..87a2cd0 100644 --- a/index.html +++ b/index.html @@ -36,12 +36,6 @@ </div> </nav> <div class="container-fluid"> - <div id="progress" class="progress" style="display: none;"> - <div id="progress-bar" class="progress-bar progress-bar-striped active" style="width: 100%"> - <span id="progress-text" class="sr-only">Refreshing data...</span> - </div> - </div> - <div id="alert" class="alert alert-danger alert-dismissible" style="display:none"> <a href="#" class="close" id="alert-close" aria-label="close">×</a> <strong>Error occured!</strong> <span id="alert-text"></span> diff --git a/index.js b/index.js index e522ba4..af4dacb 100644 --- a/index.js +++ b/index.js @@ -30,7 +30,7 @@ var alert_text = document.getElementById('alert-text'); var alert_close = document.getElementById('alert-close'); -var progress = document.getElementById('progress'); +var nav = document.getElementsByTagName('nav')[0]; var parseStatusBoarding = '>>>'; function parseStatus(status) { @@ -130,11 +130,11 @@ } function loading_start() { - progress.style.display = 'block'; + nav.className += ' loading'; } function loading_end() { - progress.style.display = 'none'; + nav.className = nav.className.replace(' loading', ''); } function loadTimes(stopId = null, clearRoute = false) { -- Gitblit v1.9.1