Warm tip: This article is reproduced from serverfault.com, please click

Create loading messages that will change based on loading time of plot in a shiny app

发布于 2020-11-27 20:05:42

I have the shiny app below in which I use shinycustomLoader and shinycssLoader to create loading messages. I would like to know if there is a way to add more than one messages after spcific amount time. Foe example the first message will be "Analyzing" and after 15 seconds of loading it will be replaced by "Almost there". If there is another method or package that can do this I would be happy to know.

library(shiny)
library(shinycssloaders)
library(shinycustomloader)
ui <- fluidPage(
  actionButton("go", "Go"),
  shinycssloaders::withSpinner(
    plotOutput("plot")
  ),
  withLoader(plotOutput("plot2"),type = "text",loader = "Text")
)

server <- function(input, output) {
  output$plot <- renderPlot({
    input$go
    plot(runif(10000000))
  })
  output$plot2 <- renderPlot({
    input$go
    plot(runif(10000000))
  })
}
shinyApp(ui, server)
Questioner
firmo23
Viewed
0
Stéphane Laurent 2020-11-28 08:15:32

Here is a way to get such a result:

enter image description here

File myloader.html, to put in the app folder:

<div class="myloader">
  <h1>
    <span></span>
  </h1>
</div>

File myloader.css, to put in the www subfolder:

.myloader {
  text-align:center; 
  align-items: center;
}

.myloader > h1 {
  display: flex;
  justify-content: center;
  color: blue;
}

.myloader > h1 > span::before {
  content: "";
  animation-name: animate;
  animation-duration: 6s;
  animation-direction: normal;
  animation-fill-mode: forwards;
  padding-left: 10px;
}

@keyframes animate {
  0% {
    content: "Analyzing, please wait...";
  }
  100% {
    content: "Almost there!";
  }
}

And the Shiny app:

library(shiny)
library(shinycustomloader)

ui <- fluidPage(
  actionButton("go", "Go"),
  withLoader(
    plotOutput("plot"),
    type = "html",
    loader = "myloader"
  )
)

server <- function(input, output) {
  output$plot <- renderPlot({
    input$go
    x <- NULL
    for(. in 1:30000){
      x <- c(x, runif(1))
    }
    plot(x)
  })
}

shinyApp(ui, server)

EDIT

A stylish one:

enter image description here

@font-face {
  font-family: Origin;
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/origin-extrabold-webfont.woff);
}

.myloader {
  align-items: center;
  background-color: #222;
  height: 400px;
}

.myloader > h1 {
  position: absolute;
  top: 50%;
  left: 30%;
  display: flex;
  justify-content: center;
  font-family: Origin, Helvetica Light, sans-serif;
  color: rgb(255, 242, 181);
  background-image: linear-gradient(
    rgb(255, 242, 181) 28%,
    rgb(77, 77, 77) 40%,
    rgb(255, 242, 181) 54%
  );
  -webkit-background-clip: text;
  letter-spacing: 0.5rem;
}

.myloader > h1 > span::before {
  content: "";
  animation-name: animate;
  animation-duration: 10s;
  animation-direction: normal;
  animation-fill-mode: forwards;
  padding-left: 10px;
}

@keyframes animate {
  0% {
    content: "Analyzing";
  }
  10% {
    content: "Analyzing.";
  }
  20% {
    content: "Analyzing..";
  }
  30% {
    content: "Analyzing...";
  }
  40% {
    content: "Analyzing....";
  }
  50% {
    content: "Analyzing.....";
  }
  60% {
    content: "Analyzing......";
  }
  70% {
    content: "Analyzing.......";
  }
  80% {
    content: "Analyzing........";
  }
  90% {
    content: "Analyzing.........";
  }
  100% {
    content: "Almost there!";
  }
}