¿Cómo puedo colocar el ícono al final del texto como en la imagen y, según el porcentaje, el texto se ocultará y se mostrará en lugar de eso, es posible mantener el texto en la pantalla?

Archivo myloader.html, para poner en la carpeta de la aplicación:

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

Archivo myloader.css, para poner en la subcarpeta 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", ; } 90% { content: "Fetching Data"....; } 100% { content: "Fetching Items!"; } }

Y la aplicación Shiny:

 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)