UI gradient transparency fill bar effect

Resources Community Resources
#1


Simple function to achieve this effect:

local function fillUp(uiGradient, percent)
	if percent <= .001 then
		percent = 0
	end
	
	if percent == 0 or percent == 1 then
		uiGradient.Transparency = NumberSequence.new(1-percent)
	else
		uiGradient.Transparency = NumberSequence.new({
			NumberSequenceKeypoint.new(0, 0),
			NumberSequenceKeypoint.new(percent-.001, 0),
			NumberSequenceKeypoint.new(percent, 1),
			NumberSequenceKeypoint.new(1, 1)
		})
	end
end
21 Likes
#2

Seems cool but… i am too dumb to understand this…
So… Do i have to put this inside my gui where it has uiGradient or…?

#3

Code 
-- In a local script inside of a UIGradient

local chosenUIGradient = script.Parent

local function fillUp(uiGradient, percent)
	if percent <= .001 then
		percent = 0
	end

	if percent == 0 or percent == 1 then
		uiGradient.Transparency = NumberSequence.new(1-percent)
	else
		uiGradient.Transparency = NumberSequence.new({
			NumberSequenceKeypoint.new(0, 0),
			NumberSequenceKeypoint.new(percent-.001, 0),
			NumberSequenceKeypoint.new(percent, 1),
			NumberSequenceKeypoint.new(1, 1)
		})
	end
end
task.wait(3)
for i = 0, 1, .1 do -- Fill up the image from 0 percent to 100 percent by 1 percent every half second
	task.wait(.5)
	fillUp(chosenUIGradient, i)
end
1 Like