Skip to content

Latest commit

 

History

History
112 lines (90 loc) · 2.77 KB

README.md

File metadata and controls

112 lines (90 loc) · 2.77 KB
Raw

Circular Progress Indicator

Preview

A circular progress indicator shows the user how close they are to completion of something (such as loading). Read more here.

Constructors

new

This function is a native constructor, with verbosity allowing for control over every configurable property at the cost of a less convenient calling.

Parameters

  • progress: number?
  • isEnabled: boolean
  • fillColor: Color3
  • emptyColor: Color3
  • scale: number

Usage

No Framework

local progress: number? = nil
local isEnabled: boolean = true
local fillColor: Color3 = Color3.new()
local emptyColor: Color3 = Color3.new()
local scale: number = 1

local circular = Synthetic.Component.ProgressIndicator.Circular.Wrapper.new()
circular.Progress = progress
circular.IsEnabled = isEnabled
circular.FillColor = fillColor
circular.EmptyColor = emptyColor
circular.Scale = scale

Fusion

local progressState: Fusion.Value<number?> = Value(nil)
local isEnabled: boolean = true
local fillColorState: Fusion.Value<Color3> = Value(Color3.new())
local emptyColor: Color3 = Color3.new()
local scaleState: Fusion.Value<number> = Value(1)

local circular: GuiObject = Synthetic.Component.ProgressIndicator.Circular.Fusion.new(
	progressState,
	isEnabled,
	fillColorState,
	emptyColor,
	scaleState
)

Roact

local circular = Roact.createElement(Module.Roact.New, {
	progress = nil,
	isEnabled = true,
	fillColor = Color3.new(),
	emptyColor = Color3.new(),
	scale = 1,
})

Roact.mount(circular, parent)

primary / secondary / tertiary

This function is a style constructor, utilizing the "Style" type to reduce the number of parameters required for implementation.

Parameters

  • style: Style
  • progress: number?
  • isEnabled: boolean?

Usage

No Framework

local style: Style = Style.new(1, Enum.Font.SourceSans, "Light", Color3.new(0, 0.4, 0.7))
local progress: number? = nil
local isEnabled: boolean? = true

local circular = Synthetic.Component.ProgressIndicator.Circular.Wrapper.primary()
circular.Style = style
circular.Progress = progress
circular.IsEnabled = isEnabled

Fusion

local styleState: Fusion.Value<Style> = Value(Style.new(1, Enum.Font.SourceSans, "Light", Color3.new(0, 0.4, 0.7)))
local progress: number? = nil
local isEnabledState: Fusion.Value<boolean?> = Value(true)

local circular: GuiObject = Synthetic.Component.ProgressIndicator.Circular.Fusion.primary(
	styleState,
	progress,
	isEnabledState
)

Roact

local circular = Roact.createElement(Module.Roact.Primary, {
	style = Style.new(1, Enum.Font.SourceSans, "Light", Color3.new(0, 0.4, 0.7)),
	progress = nil,
	isEnabled = true,
})

Roact.mount(circular, parent)