Multiple bars act as a single bar (warzone, dying light style)

Hello developers, I have a loading bar composed of 5 parts

image

am trying to imitate something similar like the armor plates indicator in warzone
image
its not like a plain bar, but instead of indicating health i want it to indicate loading progress. (0-100% type).

or something similar to dying light hud.
image

I tried to do the following:

local Each = 100/5
	for Index = 1, #Assets, 1 do
		ContentProvider:PreloadAsync({Assets[Index]})
		local Percentage = math.floor((Index/#Assets) * 100)
		for BarIndex = 1, 5, 1 do
			local Bar = Bars:WaitForChild(tostring(BarIndex))
			print(Percentage, "Expected", Each * BarIndex)
			if Percentage >= (Each * BarIndex) then
				TweenService:Create(Bar:WaitForChild("Bar"), TweenInformation, {Size = UDim2.fromScale(1,1)}):Play()
			else
				if Percentage <= (Each * BarIndex) then
					TweenService:Create(Bar:WaitForChild("Bar"), TweenInformation, {Size = UDim2.fromScale(Percentage/100,1)}):Play()
					break
				end
				break
			end
			task.wait(TweenInformation.Time)
		end
	end

in simple words I make the each variable divide the max (100%) by 5, and loop through each bar and then multiplt according to its index 1-5 and check if the percentage is higher than the value that is maxium on that bar, if so just make it full, other wise give it its accurate percentage and break the loop so it loads next asset. But this method is not 100% accurate nor efficient, how can I make this more efficiently and accurate as well?