Добавьте предзагрузчик в вывод HTML-кода rmarkdown [flexdashboard] - PullRequest
Новая
       8

Добавьте предзагрузчик в вывод HTML-кода rmarkdown [flexdashboard]

0 голосов
/ 07 ноября 2018

У меня относительно сложный flexdashboard, для загрузки которого требуется некоторое время.

У кого-нибудь есть опыт добавления прелоадера к выводу flex_dashboard?

Например, добавление любого из этих было бы здорово для меня. Хотя я знаю, как добавить gif, мне интересно, как перестать отображать его при загрузке сайта.

Возможно ли что-либо подобное в rmarkdown, а также flex_dashboard?

1 Ответ

0 голосов
/ 09 ноября 2018

Вы можете использовать этот код в 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>.

Для этого решения требуется Pandoc 2. Для Pandoc <2 замените </p> 

::: {#preloader}
:::

с <div id="preloader"></div>

...