SpiderBasic

Code: Select all

EnableExplicit

Global progressbar.i
Global line.i

Global nLoaded
Global nImports = 1

Procedure RequireScript(url.s, objName.s)
  Debug "require entrou"
;  EnableJS
!  require([v_url], function(obj) {
!    window[v_objname] = obj;
!    v_nloaded++;
!    if (v_nloaded == v_nimports) {
!      f_main();
!    }
!  });
;  DisableJS
EndProcedure

Procedure Main()
  
  Protected GID
  
  OpenWindow(0, 0, 0, 220, 220, "ProgressBarJS", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  
  CanvasGadget(0, 10, 10, 200, 200)
  
  GID = GadgetID(0)
  
  !v_line = new ProgressBar.Line(v_gid.gadget);
  
EndProcedure

;loading ProgressBarJS
RequireScript("https://github.com/kimmobrunfeldt/progressbar.js/blob/master/dist/progressbar.min.js","ProgressBar")

Code: Select all

EnableExplicit

Procedure Main()
  
  Protected GID
  
  OpenWindow(0, 0, 0, 220, 220, "ProgressBarJS", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  ContainerGadget(0, 10, 10, 200, 200) : CloseGadgetList()
  
  GID = GadgetID(0)
  
  ! var line = new ProgressBar.Line(v_gid.div);
  ! line.animate(1);
  
EndProcedure

! define = null;

LoadScript("https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.1.0/progressbar.min.js", @Main())

Code: Select all

EnableExplicit

Procedure Main()
  
  Protected GID
  
  OpenWindow(0, 0, 0, 220, 220, "ProgressBarJS", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  
  ContainerGadget(0, 10, 10, 200, 200) : CloseGadgetList()
  
  GID = GadgetID(0)
  
  ! var myCircle = new ProgressBar.Circle(v_gid.div, {
  !   color: '#aaa',
  !   // This has to be the same size as the maximum width to
  !   // prevent clipping
  !   strokeWidth: 4,
  !   trailWidth: 1,
  !   easing: 'easeInOut',
  !   duration: 1400,
  !   text: {
  !     autoStyleContainer: false
  !   },
  !   from: { color: '#aaa', width: 1 },
  !   to: { color: '#333', width: 4 },
  !   // Set default step function for all animate calls
  !   step: function(state, circle) {
  !     circle.path.setAttribute('stroke', state.color);
  !     circle.path.setAttribute('stroke-width', state.width);
  ! 
  !     var value = Math.round(circle.value() * 100);
  !     if (value === 0) {
  !       circle.setText('');
  !     } else {
  !       circle.setText(value + "%");
  !     }
  ! 
  !   }
  ! });
  !
  ! myCircle.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
  ! myCircle.text.style.fontSize = '2rem';
  ! 
  ! myCircle.animate(1.0);  // Number from 0.0 to 1.0  
  
  
EndProcedure

! define = null;

LoadScript("https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.1.0/progressbar.min.js", @Main())