css - 创建加载消息，这些消息将根据闪亮应用程序中绘图的加载时间而改变

Question

我有下面的闪亮应用程序，我在其中使用shinycustomLoader并shinycssLoader创建加载消息。我想知道是否有办法在特定时间后添加多个消息。例如，第一条消息将是"Analyzing"，在加载 15 秒后，它将被替换为"Almost there". 如果有另一种方法或包可以做到这一点，我会很高兴知道。

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)

Answer 1

这是获得这种结果的一种方法：

文件myloader.html，放入 app 文件夹：

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

文件myloader.css，放入www子文件夹：

.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!";
  }
}

还有闪亮的应用程序：

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)

---

编辑

一个时髦的：

@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!";
  }
}