---
title: "CSS preloaders"
author: "David Granjon"
date: "`r Sys.Date()`"
output: rmarkdown::html_vignette
vignette: >
  %\VignetteIndexEntry{CSS preloaders}
  %\VignetteEngine{knitr::rmarkdown}
  %\VignetteEncoding{UTF-8}
---

```{r setup, include = FALSE}
knitr::opts_chunk$set(
  collapse = TRUE,
  comment = "#>"
)
```

## How to set up a preloader

Pass the argument `enable_preloader = TRUE` to the `dashboardPagePlus()` function.
You can also change the loading duration (2s by default): `loading_duration = 5` for
5 seconds.

<video width="640" height="480" controls style="display: block; margin: 0 auto;">
  <source src="figures/preloader.mp4" type="video/mp4">
</video>

<br>

```r
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

shinyApp(
  ui = dashboardPagePlus(
    enable_preloader = TRUE,
    header = dashboardHeaderPlus(
     enable_rightsidebar = TRUE,
     rightSidebarIcon = "gears"
    ),
    sidebar = dashboardSidebar(),
    body = dashboardBody(),
    rightsidebar = rightSidebar(),
    title = "DashboardPage"
  ),
  server = function(input, output) { }
)
```