UI/ProgressBarAttemption.razor

A Razor UI component that displays multiple ProgressBarRazor controls with varying sizes and colors and animates a Valueing property between Minning and Maxxing when Running is true. It updates Valueing each frame in OnUpdate and provides a BuildHash for rebuild detection.

Networking
@using Sandbox;
@using Sandbox.UI;
@using Sandbox.UI.Basical;
@inherits PanelComponent
@namespace Sandbox

<root>
	<div class="containsPb">
		<ProgressBarRazor Value=@(Valueing)/>
		<ProgressBarRazor Value=@(Valueing) Width=@(500) BarColor="blue"/>
		<ProgressBarRazor Value=@(Valueing) Width=@(100) BarColor="yellow"/>
		<ProgressBarRazor Value=@(Valueing) Width=@(1000) BarColor="lime"/>
		<ProgressBarRazor Value=@(Valueing) Width=@(1000) Height=@(25) BarColor="cyan"/>
		<ProgressBarRazor Value=@(Valueing) Width=@(1000) Height=@(50) BarColor="khaki"/>
		<ProgressBarRazor Value=@(Valueing) Width=@(1000) Height=@(100) BarColor="navy"/>
		<ProgressBarRazor Value=@(Valueing) Width=@(1000) Height=@(500) BarColor="orange"/>
	</div>
</root>

@code
{

	[Property, TextArea] public string MyStringValue { get; set; } = "Hello World!";
	[Property] public float Valueing {get;set;} = 50f;
	[Property] public float Minning {get;set;} = 0f;
	[Property] public float Maxxing {get;set;} = 100f;
	[Property] public bool Running {get;set;} = true;
	[Property] public float RunSpeed {get;set;} = 10f;

	[Property,ReadOnly] bool RunBack = false;

	protected override void OnUpdate()
	{
		base.OnUpdate();

		if(Running)
		{
			if(Valueing >= Maxxing) RunBack = true;
			if(Valueing <= Minning) RunBack = false;
			Valueing += (Time.Delta * RunSpeed) * (RunBack? -1f : 1f);
		}
	}

	/// <summary>
	/// the hash determines if the system should be rebuilt. If it changes, it will be rebuilt
	/// </summary>
	protected override int BuildHash() => System.HashCode.Combine( MyStringValue, Valueing, Maxxing, Minning, RunBack );
}