Donut.razor

@using System;
@namespace Sandbox.UI.Tests.Basics
@inherits Sandbox.UI.Panel

@attribute [StyleSheet]

<style>
	.wheel {
		height: 128px;
		aspect-ratio: 1;
		background-size: cover;
		mask-size: cover;
		mask-image: radial-gradient( white 40%, white 50%, black 50.5% );
	}
</style>

<root>	
	<div @ref="Wheel" class="wheel"></div>
</root>

@code {
	public Panel Wheel { get; set; }

	private float _progress = 1.0f;
	public float Progress 
	{
		get => _progress;
		set
		{
			_progress = value.Clamp(0.0f, 1.0f);
		}
	}

	public override void Tick()
	{
		var grad = Progress * 100f;
		Wheel.Style.Set("background-image", $"conic-gradient( white {grad + 10}%, white {grad + 9}%, white {grad}% )");
		Wheel.Style.Dirty();

		Progress -= Time.Delta;
	}
}