Created
August 2, 2022 06:52
-
-
Save azunyuuuuuuu/106eec34344cffc9b8d78f446376e098 to your computer and use it in GitHub Desktop.
Blazor Animated Health Bar Component
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="relative overflow-hidden w-full bg-neutral-100/30 rounded-full h-2.5 outline outline-2 outline-offset-1 outline-neutral-100 shadow"> | |
| <div class="absolute @decrease bg-green-400 h-full " style=" width: @(percentage)%;"></div> | |
| <div class="absolute @decrease bg-green-500 h-full transition-[width] duration-1000 ease-linear" style="width: @(percentage)%"></div> | |
| <div class="absolute @increase bg-red-600 h-full transition-[width] duration-1000 ease-linear" style="width: @(percentage)%;"></div> | |
| <div class="absolute @increase bg-green-500 h-full " style="width: @(percentage)%"></div> | |
| </div> | |
| <span>Min: @Min</span> | |
| <span>Max: @Max</span> | |
| <span>Value: @Value</span> | |
| <span>_newvalue: @_newvalue</span> | |
| <span>_oldvalue: @_oldvalue</span> | |
| <span>percentage: @percentage</span> | |
| <span>increase: @increase</span> | |
| <span>decrease: @decrease</span> | |
| @code { | |
| [Parameter] public int Min { get; set; } = 0; | |
| [Parameter] public int Max { get; set; } = 1000; | |
| [Parameter] public int Value { get; set; } = 500; | |
| private int _newvalue = 500; | |
| private int _oldvalue = 500; | |
| private string percentage => ((((float)_newvalue - (float)Min) / ((float)Max - (float)Min)) * 100).ToString("F1", | |
| System.Globalization.CultureInfo.InvariantCulture); | |
| private string increase => _newvalue >= _oldvalue ? " invisible " : " visible "; | |
| private string decrease => _newvalue < _oldvalue ? " invisible " : " visible "; | |
| protected override void OnParametersSet() | |
| { | |
| _oldvalue = _newvalue; | |
| _newvalue = Value; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment