Simple Radial Progress Bar

A progress bar that is a circle. 

Shader code
shader_type canvas_item;

uniform vec3 base_color : source_color = vec3(0.0, 1.0, 0.0);
uniform float outer_bound : hint_range(0.0, 0.5, 0.05) = 0.4;
uniform float inner_bound : hint_range(0.0, 0.4, 0.05) = 0.3;
//uniform float fill_direction : hint_range(-1.0, 1.0, 2.0) = 1.0;
// godot shaders live preview can't comprehend hint_range(-1.0, 1.0, 2.0) so just manually set it to either 1.0 or -1.0
// uncomment the correct line and erase the next line if you intend to use it
uniform float fill_direction = 1.0;

uniform float progress : hint_range(0.0, 1.0) = 1.0;

void fragment() {
	float outer_bound_alpha = 1.0 - step(outer_bound, distance(vec2(0.5), UV));
	float inner_bound_alpha = step(inner_bound, distance(vec2(0.5), UV));
	
	vec2 uv = UV - vec2(0.5);
	float radial_position = atan(uv.x, uv.y) * fill_direction;
	// normalize the radial position to [0, 1] range and compare it to the progress
	radial_position = step((radial_position + PI) / (2.0 * PI), progress); 
	
	COLOR.a = min(inner_bound_alpha, min(outer_bound_alpha, radial_position));
	COLOR.rgb = base_color;
}
Live Preview
Tags
bar, circle, progress, radial
The shader code and all code snippets in this post are under CC0 license and can be used freely without the author's permission. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

More from pitch_blanc

Related shaders

guest

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments