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