代码之家 › 专栏 › 技术社区 › arg0naut91

向rmarkdown HTML输出[flexdashboard]添加预加载程序

preloader r-markdown r css html

arg0naut91 · 技术社区 · 7 年前

flexdashboard

有没有人有过在系统中添加预加载程序的经验 flex_dashboard 输出?

例如,添加 these 对我来说太好了。当我知道如何添加 gif ,我想知道如何停止在网站加载时显示它。

这样的事可能发生吗 rmarkdown 柔性仪表板 ?

1 回复 | 直到 7 年前

RLesur 7 年前

你可以用 this codepen

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

这个解决方案需要pandoc2。对于潘多克<2,更换