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?

edited Nov 9 at 13:56

asked Nov 7 at 12:12

arg0naut

1,427212

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

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?

edited Nov 9 at 13:56

asked Nov 7 at 12:12

arg0naut

1,427212

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

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?

edited Nov 9 at 13:56

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

edited Nov 9 at 13:56

asked Nov 7 at 12:12

arg0naut

1,427212

edited Nov 9 at 13:56

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

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

add a comment |

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

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

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 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

|
show 2 more comments

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

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

Name

Required, but never shown

1 Answer
1

active

oldest

votes

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 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

|
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 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

|
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

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

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 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

|
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 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 @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

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

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

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');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk