diff options
| author | schneefux <schneefux+commit@schneefux.xyz> | 2016-10-23 19:06:18 +0200 |
|---|---|---|
| committer | schneefux <schneefux+commit@schneefux.xyz> | 2016-10-23 19:06:18 +0200 |
| commit | 59b3591d22a6050bee421af3c58cab302f197ab5 (patch) | |
| tree | ff71eadf96be78ed763d5bb5bd70658cb19aab0c | |
| parent | b5bd47f55d380ff7024dfc3637ee28f3275f4861 (diff) | |
| download | pragblog-59b3591d22a6050bee421af3c58cab302f197ab5.tar.gz pragblog-59b3591d22a6050bee421af3c58cab302f197ab5.zip | |
show a loader
| -rw-r--r-- | themes/flog/layouts/partials/footer.html | 33 |
1 files changed, 32 insertions, 1 deletions
diff --git a/themes/flog/layouts/partials/footer.html b/themes/flog/layouts/partials/footer.html index 5d4ac07..fc0f949 100644 --- a/themes/flog/layouts/partials/footer.html +++ b/themes/flog/layouts/partials/footer.html @@ -1,5 +1,18 @@ </div> <!-- .container --> </div> <!-- #main --> + <div id="loading" style="position: fixed; padding: 0; margin: 0; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0; display: none;"> + <div class="preloader-wrapper big active" style="top: 45%; left: 45%;"> + <div class="spinner-layer spinner-blue-only"> + <div class="circle-clipper left"> + <div class="circle"></div> + </div><div class="gap-patch"> + <div class="circle"></div> + </div><div class="circle-clipper right"> + <div class="circle"></div> + </div> + </div> + </div> + </div> <!-- #loading --> <script type="text/javascript" src="/js/jquery-2.2.4.min.js"></script> <script type="text/javascript" src="/js/materialize-0.97.7.min.js"></script> <script type="text/javascript" src="/js/smoothstate-0.5.2.min.js"></script> @@ -16,7 +29,25 @@ $(document).ready(function() { $('.button-collapse').sideNav(); - $('#main').smoothState({ prefetch: true, onAfter: ready }); + $('#main').smoothState({ + prefetch: true, + onAfter: ready, + onStart: { + duration: 250, + render: function (container) { + $('#loading').fadeTo(250, 0.3); + $('#loading').show(); + } + }, + onReady: { + duration: 100, + render: function (container, newContent) { + $('#loading').fadeTo(100, 0); + $('#loading').hide(); + container.html(newContent); + } + } + }); }); $('body').imagesLoaded({ background: true }, function() { $('<img src="/images/skyline.jpg">').load(function() { |