How to make a color changing progress bar?
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
1 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.
1