I have a relatively complex flexdashboard which takes some time to load.
Does anyone have experience with adding a preloader to flex_dashboard output?
For instance, adding any of these would be great for me. While I know how to add a gif, I'm wondering how to stop displaying it at website load.
Is anything like that possible within rmarkdown as well as flex_dashboard?
You can use this codepen in RMarkdown.
---
output: html_document
---
```{css, echo=FALSE}
#preloader {
position: fixed;
left: 0;
top: 0;
z-index: 999;
width: 100%;
height: 100%;
overflow: visible;
background: rgba(255,255,255,0.5) url('https://cdn.dribbble.com/users/107759/screenshots/2436386/copper-loader.gif') no-repeat center 20%;
}
```
::: {#preloader}
:::
```{js, echo=FALSE}
$(function() {
$(window).load(function() {
$('#preloader').fadeOut('slow',function(){$(this).remove();});
});
});
```
A solution inspired by codepen: <https://codepen.io/mimoYmima/pen/fisgL>.
This solution requires Pandoc 2. For Pandoc < 2, replace
::: {#preloader}
:::
with <div id="preloader"></div>