Loading animation example (with automatic page refesh)

#1

Hi,
here are two little exaples for page loading animations with css.

Progressbar looping:

Get-UDDashboard | Stop-UDDashboard

$pages = @()
$pages += New-UDPage -Name "home" -Endpoint {
  $Cache:Loading = $true
  $Cache:i = 0

  New-UDRow -Endpoint{
    if($Cache:Loading){
      $visibility = 'visible'
      $Cache:i = $Cache:i + 20
      if($Cache:i -eq 120){$Cache:i = 20}
      if($Cache:i -ge 60){$lcolor = 'white'}else{$lcolor = 'black'}
    }else{
      $visibility = 'hidden'
    }
    
    New-UDElement -Tag div -Content {
      New-UDElement -Tag div -Content {
      } -Attributes @{
        style = @{
          backgroundColor = 'rgb(36, 81, 131)'
          height = '50px'
          width = "$($Cache:i)%"
        }
      }
      
      New-UDElement -Tag span -Content {
        'loading...'
      } -Attributes @{
        style = @{
          position = 'absolute'
          top = '50%'
          left = '50%'
          transform = 'translate(-50%, -50%)'
          color = $lcolor
          'font-size' = '20px'
        }
      }

    } -Attributes @{
      style = @{
        position = 'fixed'
        top = '50%'
        left = '50%'
        transform = 'translate(-50%, -50%)'
        height = '50px'
        width = '50%'
        outline = 'solid black'
        visibility = $visibility
      }
    }
  } -AutoRefresh -RefreshInterval 1
  
  New-UDRow -Endpoint {
    $Cache:Loading = $true
    
    #Payload
    Start-Sleep -Seconds 10
    New-UDCard -Title Content -Content {
      New-UDHeading -Text 'job finished'
    }
    ########
    
    $Cache:Loading = $false
  }
}

$Dashboard = New-UDDashboard -Title 'test' -Page $pages
Start-UDDashboard -Port 10001 -Dashboard $Dashboard

Progressbar dynamically refreshed based on job progress:

Get-UDDashboard | Stop-UDDashboard

$pages = @()
$pages += New-UDPage -Name "home" -Endpoint {
  $Cache:Loading = $true
  $Cache:LoadingPercent = 0
  
  New-UDRow -Endpoint{
    if($Cache:Loading){
      $visibility = 'visible'
      if($Cache:LoadingPercent -ge 60){$lcolor = 'white'}else{$lcolor = 'black'}
    }else{
      $visibility = 'hidden'
    }
    
    New-UDElement -Tag div -Content {
      New-UDElement -Tag div -Content {
      } -Attributes @{
        style = @{
          backgroundColor = 'rgb(36, 81, 131)'
          height = '50px'
          width = "$($Cache:LoadingPercent)%"
        }
      }
      
      New-UDElement -Tag span -Content {
        "$Cache:LoadingText" #'loading...'
      } -Attributes @{
        style = @{
          position = 'absolute'
          top = '50%'
          left = '50%'
          transform = 'translate(-50%, -50%)'
          color = $lcolor
          'font-size' = '20px'
        }
      }

    } -Attributes @{
      style = @{
        position = 'fixed'
        top = '50%'
        left = '50%'
        transform = 'translate(-50%, -50%)'
        height = '50px'
        width = '50%'
        outline = 'solid black'
        visibility = $visibility
      }
    }
  } -AutoRefresh -RefreshInterval 1
  
  New-UDRow -Endpoint {
    $Cache:Loading = $true
    
    #Payload
    $Cache:LoadingText = 'loading text 1'
    $Cache:LoadingPercent = 20
    Start-Sleep -Seconds 3
    
    $Cache:LoadingText = 'loading text 2'
    $Cache:LoadingPercent = 40
    Start-Sleep -Seconds 3
    
    $Cache:LoadingText = 'loading text 3'
    $Cache:LoadingPercent = 60
    Start-Sleep -Seconds 3
    
    $Cache:LoadingText = 'loading text 4'
    $Cache:LoadingPercent = 80
    Start-Sleep -Seconds 3
    
    $Cache:LoadingText = 'loading text 5'
    $Cache:LoadingPercent = 100
    Start-Sleep -Seconds 3

    New-UDCard -Title Content -Content {
      New-UDHeading -Text 'job finished'
    }
    ########
    
    $Cache:Loading = $false
  }
}

$Dashboard = New-UDDashboard -Title 'test' -Page $pages
Start-UDDashboard -Port 10001 -Dashboard $Dashboard
2 Likes

Anyone leveraged New-UDPreloader?
#2

I love it, keep with the good work

1 Like

#3

Thanks for sharing great stuff

1 Like

#4

This is great. Does anybody have any examples of using this to monitor the progress of a PowerShell job? Job, Runspace job, etc and returning the output of the job in a nice format?

I’m currently trying to do this, and I’m having a hard time figuring it out. I’m close but returning data nicely is not playing well for me.

0 Likes