How to create our own spinner in r for the initial load

Question

I am trying to display the percentage load spinner while loading the shiny app but in there is no default percentage load is spinner then i tried to google it i got the code in HTML, CSS, js code (https://codepen.io/averzea/pen/PrLeaV) can anyone tell how to implement this ui codes in shiny or any documentation for creating the own spinner

Any idea would be appreciated..

HTML

<canvas id="spinner" width="300" height="300">

CSS

body {
    background: #333;
}
#spinner {
    display: block;
    width: 200px;
  position: absolute;
  left: 50%; 
  top: 50%;
  transform: translate(-50%, -50%);
}

Js

window.onload = function(){
  
    let spinner = document.getElementById("spinner");
    let ctx = spinner.getContext("2d");
    let width = spinner.width;
    let height = spinner.height;
    let degrees = 0;
    let new_degrees = 0;
    let difference = 0;
    let color = "turquoise";
    let bgcolor = "#222";
    let text;
    let animation_loop, redraw_loop;
    
    function init() {
        ctx.clearRect(0, 0, width, height);
    
        ctx.beginPath();
        ctx.strokeStyle = bgcolor;
        ctx.lineWidth = 30;
        ctx.arc(width/2, width/2, 100, 0, Math.PI*2, false);
        ctx.stroke();
        let radians = degrees * Math.PI / 180;
    
        ctx.beginPath();
    ctx.strokeStyle = color;
    ctx.lineWidth = 30;
    ctx.arc(width/2, height/2, 100, 0 - 90*Math.PI/180, radians - 90*Math.PI/180, false); 
    ctx.stroke();
    ctx.fillStyle = color;
        ctx.font = "50px arial";
        text = Math.floor(degrees/360*100) + "%";
        text_width = ctx.measureText(text).width;
    ctx.fillText(text, width/2 - text_width/2, height/2 + 15);
    }
    
    function draw() {
        if (typeof animation_loop != undefined) clearInterval(animation_loop);
        new_degrees = 360;
        difference = new_degrees - degrees;
        animation_loop = setInterval(animate_to, 10000/difference);
    }
  
    function animate_to() {
        if(degrees == new_degrees) 
            clearInterval(animation_loop);
        else if(degrees < new_degrees)
            degrees++;
        else
            degrees--;
        init();
    }
    
    draw();
}

R sample code

library(shiny)
library(shinybusy)

ui <- fluidPage(

  busy_start_up(
    loader = spin_kit(
      spin = "cube-grid",
      color = "#FFF",
      style = "width:50px; height:50px;"
    ),
    text = "Loading...",
    mode = "manual",
    color = "#FFF",
    background = "#112446"
  ),

  tags$h1("Ready to play!", class = "text-center")

)

server <- function(input, output, session) {

  # Remove after 3 seconds (+timeout)
  observe({
    Sys.sleep(3)
    remove_start_up(timeout = 200)
  })

}

if (interactive())
  shinyApp(ui, server)

How to create our own spinner in r for the initial load

0 Answers0