创建加载消息,这些消息将根据闪亮的应用程序中情节的加载时间而改变

firmo23

我在下面有一个闪亮的应用程序,可以在其中使用shinycustomLoadershinycssLoader创建加载消息。我想知道在特定时间后是否可以添加多个消息。例如,第一个消息将是,"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)
斯蒂芬·洛朗(Stephane Laurent)

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

在此处输入图片说明

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如果从MessagingCenter收到消息并随后更新UI,则应用程序不会第二次加载视图

根据单例设计模式使用服务加载器创建可扩展应用程序

此应用程序无法启动,因为无法找到或加载Qt平台插件“ Windows”错误消息

加载到移动设备(R)时,闪亮的应用会挂起并显示“请稍候”消息

仅在将数据加载到闪亮的应用程序中时显示框

将消息注入WPF应用程序消息泵

从应用程序内部重新启动闪亮的应用程序(重新加载数据)

如何使用EBImage将本地图像加载到闪亮的应用程序以进行图像分析

开发闪亮的Web应用程序,获取“找不到ui”错误消息

闪亮:用户忘记上传文件后,如何在应用程序中打印消息?

Vue应用程序无法独立加载组件(无错误消息)

如何在应用程序加载时间加载@FeignClient

博览会应用程序-无法加载带有消息的项目:这花费的时间远远超过了应有的时间

退出闪亮的应用程序时添加“您确定要离开此页面”警报消息

根据条件在ReactJS应用程序中动态加载.css

使用一个if()而不是多个watchEvent()在闪亮的应用程序中显示消息

RxJS根据请求时间更改加载指示消息

Ember.js应用程序的加载时间极长

消息队列应用程序

在Android中创建即时消息传递应用程序

从已加载的iframe将消息发送回Chrome扩展程序

在Angular中创建“应用程序级”消息系统

闪亮的应用程序中的情节高度灵活

Web应用程序的初始加载时间

修复初始闪亮应用程序加载时的selectInput错误

加载应用程序时间过长

当闪亮的应用程序加载时预加载所有标签

消息应用程序:跨越添加而不是创建新行

R闪亮的应用程序错误消息中缺少错误行号