Add a preloader to rmarkdown HTML output [flexdashboard]
up vote
2
down vote
favorite
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?
html css r r-markdown preloader
asked Nov 7 at 12:12
arg0naut
1,427212
add a comment |
up vote
2
down vote
favorite
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?
html css r r-markdown preloader
asked Nov 7 at 12:12
arg0naut
1,427212
Are you kniting that to an html document or usingruntime: shiny?
– JohnCoene
Nov 7 at 15:46
@JohnCoene, kniting to HTML.
– arg0naut
Nov 7 at 16:00
add a comment |
up vote
2
down vote
favorite
up vote
2
down vote
favorite
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?
html css r r-markdown preloader
asked Nov 7 at 12:12
arg0naut
1,427212
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?
html css r r-markdown preloader
html css r r-markdown preloader
asked Nov 7 at 12:12
arg0naut
1,427212
asked Nov 7 at 12:12
arg0naut
1,427212
edited Nov 9 at 13:56
asked Nov 7 at 12:12
arg0naut
1,427212
asked Nov 7 at 12:12
arg0naut
1,427212
asked Nov 7 at 12:12
arg0naut
1,427212
1,427212
Are you kniting that to an html document or usingruntime: shiny?
– JohnCoene
Nov 7 at 15:46
@JohnCoene, kniting to HTML.
– arg0naut
Nov 7 at 16:00
add a comment |
Are you kniting that to an html document or usingruntime: shiny?
– JohnCoene
Nov 7 at 15:46
@JohnCoene, kniting to HTML.
– arg0naut
Nov 7 at 16:00
Are you kniting that to an html document or using
runtime: shiny?– JohnCoene
Nov 7 at 15:46
Are you kniting that to an html document or using
runtime: shiny?– JohnCoene
Nov 7 at 15:46
@JohnCoene, kniting to HTML.
– arg0naut
Nov 7 at 16:00
@JohnCoene, kniting to HTML.
– arg0naut
Nov 7 at 16:00
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
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>
answered Nov 9 at 12:20
romles
3,0361630
Thanks @romles! However, I still cannot get this to run within a flexdashboard; it just doesn't appear while the pages is loading, it only appears once the page has loaded. Any ideas why? Probably this is a collusion with flexdashboard's source code, and I'll need some further tinkering with the package code to get it to work.
– arg0naut
Nov 9 at 14:00
1
Sorry, it wasn't clear for me that you want to deal with a flexdashboard. This is surely a collision with the flexdashboard source code. I don't know it very much. I will have a look.
– romles
Nov 9 at 14:05
1
Yes, my fault - I've corrected the post now. If you have any ideas that'd be great - I've already tried with different methods (including external .css, .js, .html files in YAML, inserting them into chunks, etc.), but to no avail.
– arg0naut
Nov 9 at 14:14
I have no heavy flexdashboard to test. A suggestion: include thedivwith thebefore_bodyargument. If it is not clear, I can explain more.
– romles
Nov 9 at 14:18
Thanks a lot - however, have tried it, but wasn't successful. It seems like something in the dashboard source code prevents loading any part before all of them are loaded. I think I'll need to have a look there; if you'll have any suggestions, let me know.
– arg0naut
Nov 9 at 14:28
|
show 2 more comments
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
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>
answered Nov 9 at 12:20
romles
3,0361630
Thanks @romles! However, I still cannot get this to run within a flexdashboard; it just doesn't appear while the pages is loading, it only appears once the page has loaded. Any ideas why? Probably this is a collusion with flexdashboard's source code, and I'll need some further tinkering with the package code to get it to work.
– arg0naut
Nov 9 at 14:00
1
Sorry, it wasn't clear for me that you want to deal with a flexdashboard. This is surely a collision with the flexdashboard source code. I don't know it very much. I will have a look.
– romles
Nov 9 at 14:05
1
Yes, my fault - I've corrected the post now. If you have any ideas that'd be great - I've already tried with different methods (including external .css, .js, .html files in YAML, inserting them into chunks, etc.), but to no avail.
– arg0naut
Nov 9 at 14:14
I have no heavy flexdashboard to test. A suggestion: include thedivwith thebefore_bodyargument. If it is not clear, I can explain more.
– romles
Nov 9 at 14:18
Thanks a lot - however, have tried it, but wasn't successful. It seems like something in the dashboard source code prevents loading any part before all of them are loaded. I think I'll need to have a look there; if you'll have any suggestions, let me know.
– arg0naut
Nov 9 at 14:28
|
show 2 more comments
up vote
1
down vote
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>
answered Nov 9 at 12:20
romles
3,0361630
Thanks @romles! However, I still cannot get this to run within a flexdashboard; it just doesn't appear while the pages is loading, it only appears once the page has loaded. Any ideas why? Probably this is a collusion with flexdashboard's source code, and I'll need some further tinkering with the package code to get it to work.
– arg0naut
Nov 9 at 14:00
1
Sorry, it wasn't clear for me that you want to deal with a flexdashboard. This is surely a collision with the flexdashboard source code. I don't know it very much. I will have a look.
– romles
Nov 9 at 14:05
1
Yes, my fault - I've corrected the post now. If you have any ideas that'd be great - I've already tried with different methods (including external .css, .js, .html files in YAML, inserting them into chunks, etc.), but to no avail.
– arg0naut
Nov 9 at 14:14
I have no heavy flexdashboard to test. A suggestion: include thedivwith thebefore_bodyargument. If it is not clear, I can explain more.
– romles
Nov 9 at 14:18
Thanks a lot - however, have tried it, but wasn't successful. It seems like something in the dashboard source code prevents loading any part before all of them are loaded. I think I'll need to have a look there; if you'll have any suggestions, let me know.
– arg0naut
Nov 9 at 14:28
|
show 2 more comments
up vote
1
down vote
up vote
1
down vote
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>
answered Nov 9 at 12:20
romles
3,0361630
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>
answered Nov 9 at 12:20
romles
3,0361630
answered Nov 9 at 12:20
romles
3,0361630
answered Nov 9 at 12:20
romles
3,0361630
answered Nov 9 at 12:20
romles
3,0361630
3,0361630
Thanks @romles! However, I still cannot get this to run within a flexdashboard; it just doesn't appear while the pages is loading, it only appears once the page has loaded. Any ideas why? Probably this is a collusion with flexdashboard's source code, and I'll need some further tinkering with the package code to get it to work.
– arg0naut
Nov 9 at 14:00
1
Sorry, it wasn't clear for me that you want to deal with a flexdashboard. This is surely a collision with the flexdashboard source code. I don't know it very much. I will have a look.
– romles
Nov 9 at 14:05
1
Yes, my fault - I've corrected the post now. If you have any ideas that'd be great - I've already tried with different methods (including external .css, .js, .html files in YAML, inserting them into chunks, etc.), but to no avail.
– arg0naut
Nov 9 at 14:14
I have no heavy flexdashboard to test. A suggestion: include thedivwith thebefore_bodyargument. If it is not clear, I can explain more.
– romles
Nov 9 at 14:18
Thanks a lot - however, have tried it, but wasn't successful. It seems like something in the dashboard source code prevents loading any part before all of them are loaded. I think I'll need to have a look there; if you'll have any suggestions, let me know.
– arg0naut
Nov 9 at 14:28
|
show 2 more comments
Thanks @romles! However, I still cannot get this to run within a flexdashboard; it just doesn't appear while the pages is loading, it only appears once the page has loaded. Any ideas why? Probably this is a collusion with flexdashboard's source code, and I'll need some further tinkering with the package code to get it to work.
– arg0naut
Nov 9 at 14:00
1
Sorry, it wasn't clear for me that you want to deal with a flexdashboard. This is surely a collision with the flexdashboard source code. I don't know it very much. I will have a look.
– romles
Nov 9 at 14:05
1
Yes, my fault - I've corrected the post now. If you have any ideas that'd be great - I've already tried with different methods (including external .css, .js, .html files in YAML, inserting them into chunks, etc.), but to no avail.
– arg0naut
Nov 9 at 14:14
I have no heavy flexdashboard to test. A suggestion: include thedivwith thebefore_bodyargument. If it is not clear, I can explain more.
– romles
Nov 9 at 14:18
Thanks a lot - however, have tried it, but wasn't successful. It seems like something in the dashboard source code prevents loading any part before all of them are loaded. I think I'll need to have a look there; if you'll have any suggestions, let me know.
– arg0naut
Nov 9 at 14:28
Thanks @romles! However, I still cannot get this to run within a flexdashboard; it just doesn't appear while the pages is loading, it only appears once the page has loaded. Any ideas why? Probably this is a collusion with flexdashboard's source code, and I'll need some further tinkering with the package code to get it to work.
– arg0naut
Nov 9 at 14:00
Thanks @romles! However, I still cannot get this to run within a flexdashboard; it just doesn't appear while the pages is loading, it only appears once the page has loaded. Any ideas why? Probably this is a collusion with flexdashboard's source code, and I'll need some further tinkering with the package code to get it to work.
– arg0naut
Nov 9 at 14:00
1
1
Sorry, it wasn't clear for me that you want to deal with a flexdashboard. This is surely a collision with the flexdashboard source code. I don't know it very much. I will have a look.
– romles
Nov 9 at 14:05
Sorry, it wasn't clear for me that you want to deal with a flexdashboard. This is surely a collision with the flexdashboard source code. I don't know it very much. I will have a look.
– romles
Nov 9 at 14:05
1
1
Yes, my fault - I've corrected the post now. If you have any ideas that'd be great - I've already tried with different methods (including external .css, .js, .html files in YAML, inserting them into chunks, etc.), but to no avail.
– arg0naut
Nov 9 at 14:14
Yes, my fault - I've corrected the post now. If you have any ideas that'd be great - I've already tried with different methods (including external .css, .js, .html files in YAML, inserting them into chunks, etc.), but to no avail.
– arg0naut
Nov 9 at 14:14
I have no heavy flexdashboard to test. A suggestion: include the
div with the before_body argument. If it is not clear, I can explain more.– romles
Nov 9 at 14:18
I have no heavy flexdashboard to test. A suggestion: include the
div with the before_body argument. If it is not clear, I can explain more.– romles
Nov 9 at 14:18
Thanks a lot - however, have tried it, but wasn't successful. It seems like something in the dashboard source code prevents loading any part before all of them are loaded. I think I'll need to have a look there; if you'll have any suggestions, let me know.
– arg0naut
Nov 9 at 14:28
Thanks a lot - however, have tried it, but wasn't successful. It seems like something in the dashboard source code prevents loading any part before all of them are loaded. I think I'll need to have a look there; if you'll have any suggestions, let me know.
– arg0naut
Nov 9 at 14:28
|
show 2 more comments
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53189245%2fadd-a-preloader-to-rmarkdown-html-output-flexdashboard%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Are you kniting that to an html document or using
runtime: shiny?– JohnCoene
Nov 7 at 15:46
@JohnCoene, kniting to HTML.
– arg0naut
Nov 7 at 16:00