fusion_progress_bar_example.story.lua

local ReplicatedStorage = game:GetService("ReplicatedStorage")

local Fusion = require(ReplicatedStorage.Fusion)
local Observer = Fusion.Observer
local Computed = Fusion.Computed
local Value = Fusion.Value
local New = Fusion.New
local Children = Fusion.Children

local function ProgressSquare(props)
	return New "Frame" {
		Size = UDim2.fromOffset(50, 50),
		BackgroundColor3 = Computed(function()
			return if props.IsHighlighted:get() then Color3.fromRGB(0, 255, 0) else Color3.fromRGB(255, 255, 255)
		end)
	}
end

local function ProgressBar(props)
	local barCount = props.BarCount
	local currentLevel = props.CurrentLevel
	
	return New "Frame" {
		Parent = props.Parent,
		BackgroundTransparency = 1,
		AutomaticSize = Enum.AutomaticSize.XY,
		
		[Children] = {
			New "UIListLayout" {
				SortOrder = Enum.SortOrder.LayoutOrder,
				FillDirection = Enum.FillDirection.Horizontal,
				Padding = UDim.new(0, 8)
			},
			
			Computed(function()
				local bars = {}

				for i = 1, barCount do
					table.insert(bars, ProgressSquare({
						IsHighlighted = Computed(function()
							return i <= currentLevel:get()
						end)
					}))
				end
				
				return bars
			end, Fusion.cleanup)
		}
	}
end

return function(target)
	local ui = ProgressBar {
		Parent = target,
		BarCount = 10,
		CurrentLevel = Value(3)
	}
	
	return function()
		ui:Destroy()
	end
end