shinyjs run javascript

https://www.jqueryscript.net/demo/Animated-Circles-Loading-Spinner-jQuery-g-spinner/

src\css\gspinner.css
src\js\g-spinner.js

How to use it:
1. Load the minified versions of the g-spinner plugins JS & CSS in your webpage which has jQuery library loaded.

<link rel=”stylesheet” href=”gspinner.min.css”>
<script src=”jquery.min.js”></script>
<script src=”g-spinner.min.js”></script>

2. Create a DIV element where we want to insert the loading indicator into:

<div id=”loader”>
</div>

3. We need a reference to the DIV element:

var $loader = $("#loader");

4. Start the loading indicator with .gSpinner():

$loader.gSpinner();

5. We can scale down the default size of the spinner by passing an options object where we specify the scale of the spinner relative to it’s default size, 200x200px:

$loader.gSpinner({
  scale: .5
});

6. Hide the loading indicator with .gSpinner(“hide”):

$loader.gSpinner(“hide”);

showLoading <- function(){
  cat("start spinner\n")
  # shinyjs::runjs("
  #               $('html, body').css({overflow: 'hidden', height: '100%'});
  #               $('#loading-wrap').removeClass('hide');
  #                var $loader = $('#loader');
  #                $('#loader').gSpinner();")
  shinyjs::runjs(" var $loader = $('#loader');
                   $('#loader').gSpinner();")
}

removeLoading <- function(){
  shinyjs::runjs("var $loader = $('#loader');
                  $('#loader').gSpinner('hide');")
  cat("end spinner\n")
}