Scripting HelpersARCHIVE
A little piece of Roblox history. Preserved for everyone, one question at a time.Read about the archive →
All questions/Question #130187
✓ ANSWER ACCEPTED

How to make a color changing progress bar?

Asked 155 views1 answers

Hello! I'm making a progress bar for my game and would like the color to go from red to green depending on how close it is to being done. Sorry if any questions are stupid as I don't code too much. Here is my current code for the progress bar.

local TweenService = game:GetService("TweenService")
local mainframe = script.Parent.Frame
local loadingscreen = mainframe["Loading Screen"]
local loadingbarframe = loadingscreen["Loading Bar Frame"]
local loadingbartext = mainframe.TextLabel
local queue = game.ContentProvider.RequestQueueSize

script.Value.Value = true


while script.Value.Value do
	wait()
	loadingbartext.Text = "Loading Assets (("..queue.."))"
	loadingbarframe.Size = UDim2.new(1/queue, 0, 1, 0)
	print(queue)
	if queue == 0 then
		script.Value.Value = false
		loadingbartext.Text = "Loaded!"
		loadingbarframe.Size = UDim2.new(1, 0, 1, 0)
		wait(1)
		mainframe:TweenPosition(UDim2.new(0, 0, 1, 0))
		
	end
end
Anonymous

1 answer

✓ Accepted answer

You can easily achieve something like this with simple math. You should definitely not use this exact code but it's something. I put this in a loop where tonumber(label.Text) is a number between 1 - 100 (representing the state of the loading bar)

while tonumber(label.Text)<100 do
	
	label.Text = tostring(tonumber(label.Text)+1)
	frame.BackgroundColor3 = Color3.new(1-tonumber(label.Text)/100, tonumber(label.Text)/100, 0)
	wait(0.1)
	
end

We want the Red value to progressively decrease, and the Green to increase. Blue can be 0. With Color3.new, values must range between 0 and 1. Let's say the values ranged between 1 and 100 instead. That would be convenient because our percentage is also a value in that range. Therefore, we could just do 100-value for the red value. Instead of 100, the max value is 1, to get that, we divided by 100 (100/100=1). So we do the same with our value, therefore 1-value/100 (it's the same as *1/100. If the max value was 255 for the red value, we would do 255-value*255/100) We divide by 100 because that's the maximum value of label.Text.

AnonymousPermalink

1 comment

1

Thank you so much! It works great!

Anonymous#

This discussion is preserved as it was. New answers, comments, and votes are closed.