Blinking Loading Animation in R Shiny

How can I make the #loadmessage in the UI of my Shiny application blink? I have come across resources like this

How to make blinking/flashing text with css3?

However, I am unsure how to implement this in R.

This is the loading feature I currently have in my UI code:

tags$head(tags$style(type="text/css", 
                      "#loadmessage {
                       position: fixed;
                       top: 50%;
                       left: 50%;
                       opacity: 0.50; 
                       opacity: 0.0;
                       text-align: center;
                       font-weight: bold;
                       font-size: 300%;
                       color: #000000;
                       z-index: 105;
                       }"))


  conditionalPanel(condition="$('html').hasClass('shiny-busy')",tags$div("Loading...",id="loadmessage"))
cssrshinyloading

Answer №1

Is this how you want it?

library(shiny)

ui <- shinyUI(
  fluidPage(
    tags$head(tags$style(type="text/css", 
      "#loadmessage {
        position: fixed;
        top: 50%;
        left: 50%;
        opacity: 0.50; 
        text-align: center;
        font-weight: bold;
        font-size: 300%;
        color: #000000;
        z-index: 105;
        animation: blinker 1s linear infinite;
      }")),

    conditionalPanel(condition="$('html').hasClass('shiny-busy')",
      tags$div("Loading...",id="loadmessage"),
      tags$script(HTML("
        (function blink() { 
          $('#loadmessage').fadeOut(500).fadeIn(500, blink); 
        })();
      "))
    ),
    actionButton("action", "action")
  )
)

server <- function(input, output){
  observeEvent(input$action, {
    Sys.sleep(3)
  })
}

shinyApp(ui, server)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to center the 'email promo' text in the top navigation bar alongside the image and other text links?

Struggling with learning CSS and HTML, particularly when it comes to positioning elements on the page. I'm having trouble vertically aligning the elements inside the top nav bar and can't seem to figure out what I'm doing wrong. Any insights ...

htmlcss

Experiencing issue with React TS when creating a Progress Bar; despite declaring types in the interface, an error is being thrown indicating implicit type 'any'

Attempting to replicate the design and functionality of this Codepen using React Typescript has been a challenge. I made adjustments like changing class to className and transferring the CSS styles to my App.css file. Even after defining types in my interf ...

javascripthtmlcssreactjstypescript

What is the best way to eliminate duplicate values across rows for each distinct identifier?

As I embark on using R for the first time, I have a dataset where the first column consists of unique identifiers (1958 patients) and columns 2-35 contain values of either 0 or 1. For example: Patient A: 0 1 0 1 1 1 1 1 1 0 0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 ...

rdataframeduplicates

Regular expression for extracting phone numbers

Is there a way to extract phone numbers from a text file using R? x <- c(" Mr. Bean bought 2 tickets 2-613-213-4567 or 5555555555 call either one", "43 Butter Rd, Brossard QC K0A 3P0 – 613 213 4567", "Please contact Mr. Bean (613)2134567", "1. ...

regexr

I've found that my div element refuses to be centered on the screen unless I explicitly define

Trying to center a div on the page using jQuery has proven to be a bit tricky. It seems that without specifying a height for the div in the CSS, the centering doesn't work as expected. The challenge lies in the fact that the div is meant to resize bas ...

jquerycsshtml

Using Jquery addClass(): Resolving class conflicts in your code

I am currently working on a navigation project. Below is the CSS styling for it: a:link.navA, a:visited.navA { display:block; width:120px; color:#FFFFFF; background-color:#003366; text-align:center; padding:4px; ...

jquerycss

Unable to display the hole at the center of coord_polar

I've been trying to create a "hole" in the middle of the coord, but it's not working. I've even attempted changing the x variable, but no luck. Any suggestions? structure(list(name = c("g__Bradyrhizobium", "g__Bradyrhizobium&q ...

rggplot2

Applying Tailwind styles to dynamically inserted child nodes within a parent div

Currently, I am in the process of transitioning my website stacktips.com from using Bootstrap to Tailwind CSS. While initially, it seemed like a simple task and I was able to replace all the static HTML with tailwind classes successfully. However, now I ha ...

javascriptcsstailwind-csstailwind-elements

Is there a way to determine whether there is an item located at a specific point on a grid?

Imagine a scenario where we have a grid with 5 columns and 3 rows as an example. However, the number of elements and their positions are unknown. https://i.sstatic.net/Ay0i3.png Consider that the only element on the grid is the red area. I am in need of ...

javascriptcssgridcss-grid

Retrieve the name of the row and column when a certain condition is met

Having a data frame called 'help': sample_data<-data.frame(A=c(2,0.7,0.8,0.1), B=c(0.9,2,0.3,0.6), C=c(0.4,0.5,0.9,2)) I am looking to implement a nested loop that can iterate through each cell in the data frame and store the row name and co ...

r

Tips for toggling the visibility of a <div> element with a click event, even when there is already a click event assigned

No matter what I try, nothing seems to be working for me. I'm looking to hide the <div id="disqus_thread"> at first and then reveal it when I click on the link "commenting", after the comments have loaded. This particular link is located at the ...

javascriptcssajaxshow-hideblogger

Customize ggplot axis spacing to align with specific months

Updated: How can I adjust the ggplot below to achieve the following modifications: The X axis should be rescaled to show months, with intervals from baseline to 6 months being shorter and from 6 months to 24 months being longer based on the actual time ...

rggplot2axis-labels

Transforming ordered pairs into unordered pairs within a data frame using dplyr

I am working with a data frame that has the following structure: library(dplyr) df <- data_frame(doc.x = c("a", "b", "c", "d"), doc.y = c("b", "a", "d", "c")) Which means that df looks like this: Source: local data frame [4 x 2] d ...

rdplyr

Placing facets manually within a ggplot facet plot

For instance, when using 7 panels and specifying facet_wrap(~model, nrow = 3), ggplot will typically default to a 3x3x1 layout. Is there a way to customize ggplot to achieve layouts like 3x2x2 or 2x2x3? ...

rggplot2facetfacet-wrap

I'm curious why I can only see the HTML code and not the three.js code as well

I attempted to run a sample three.js game today, but only the HTML code appeared. I've also installed three.js with npm and tried running it with the VSC Live Server, but it's not working. You can find the source code here. What should be my nex ...

javascripthtmlcssthree.js

Choose a background color for the input field specifically within the dropdown list

Many questions have been posed about setting background colors for select lists, like this one: HTML: how to set background color of item in select element My question is different: Can the input field be styled with color, without affecting the colors of ...

htmlcss

Issue encountered when utilizing dplyr::summarize in conjunction with seq_along

Thanks to the help of a generous member, I was able to create code using a for loop and dplyr::summarize to generate variables. The code works perfectly as expected. library(nycflights13) flights <- nycflights13::flights %>% select(carrier,distanc ...

rfor-loopdplyrrlangsummarize

Tips for achieving a CSS that prevents text from overflowing outside of its container box

Looking for some assistance with handling long tag words, such as "Best Practices" below. I am seeking recommendations on the correct CSS change to make words like "Best-Practices" clip when they exceed the edge rather than overflowing onto the screen. I ...

css

Design a CSS Grid that organizes content in columns, adjusting dynamically to fit the amount of content in each row

I am working with a dynamic set of elements, all the same size. My goal is to arrange these elements in a grid layout, organized in columns. The number of columns should adjust based on the width of the container, and the number of rows should adapt accord ...

htmlcsscss-grid

What is the reason behind the gray background color showing up exclusively in Google Chrome?

When using other browsers, there are no issues. However, in Chrome, a gray background color appears when hovering over the menu, and partially or completely disappears when moving the mouse away from the menu. Interestingly, it also vanishes completely whe ...

cssgoogle-chromehtml