1

我试图在加载闪亮的应用程序时显示百分比负载微调器，但没有默认百分比负载是微调器然后我尝试用谷歌搜索它我得到了 HTML、CSS、js 代码中的代码（https://codepen.io/ averzea/pen/PrLeaV ) 任何人都可以告诉如何在闪亮或任何文档中实现此 ui 代码以创建自己的微调器

任何想法将不胜感激..

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 示例代码

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)

预期图像

4

0 回答 0