Skip to main content

​
Overview

Progress bar displays (Progress Texture) show progress using filled textures that can grow, shrink, or rotate. They support various orientations, circular progress, and custom textures.
Progress bars use ProgressTexture.lua for advanced texture manipulation and progress display.

​
Basic Configuration

{
  regionType = "progresstexture",
  width = 200,
  height = 50,
  orientation = "HORIZONTAL",
  inverse = false,
  
  foregroundTexture = "Interface\\\\Addons\\\\WeakAuras\\\\PowerAurasMedia\\\\Auras\\\\Aura3",
  foregroundColor = {1, 1, 1, 1},
  
  backgroundTexture = "Interface\\\\Addons\\\\WeakAuras\\\\PowerAurasMedia\\\\Auras\\\\Aura3",
  backgroundColor = {0.5, 0.5, 0.5, 0.5},
  backgroundOffset = 2
}

​
Orientations

{
  orientation = "HORIZONTAL",
  inverse = false  -- Fill left to right
}

​
Orientation Types

TypeDescription
HORIZONTALLeft to right
HORIZONTAL_INVERSERight to left
VERTICALBottom to top
VERTICAL_INVERSETop to bottom
CLOCKWISECircular clockwise
ANTICLOCKWISECircular counter-clockwise

​
Textures

​
Foreground (Progress)

{
  foregroundTexture = "path/to/texture",
  foregroundColor = {1, 0.5, 0, 1},  -- Orange
  desaturateForeground = false
}

​
Background

{
  sameTexture = false,  -- Use different texture
  backgroundTexture = "path/to/background",
  backgroundColor = {0.2, 0.2, 0.2, 0.8},
  desaturateBackground = true,
  backgroundOffset = 2  // Padding around edge
}
Set sameTexture = true to automatically use the same texture for background.

​
Circular Progress

Create circular/radial progress displays: 
{
  orientation = "CLOCKWISE",
  startAngle = 0,      -- Start position (degrees)
  endAngle = 360,      // Full circle
  rotation = 0,        // Rotate entire display
  
  user_x = 0,          // Center offset X
  user_y = 0,          // Center offset Y
  
  crop_x = 0.41,       // Crop inner area
  crop_y = 0.41
}

​
Arc Configuration

{
  startAngle = 0,
  endAngle = 360
}

​
Advanced Settings

​
Compression

{
  compress = true  -- Shrink empty space instead of fade
}

Compressed

Bar physically shrinks as it empties

Non-Compressed

Bar fades/reveals as value changes

​
Mirroring

{
  mirror = true  -- Mirror horizontally
}

​
Rotation

{
  rotation = 45,  -- Degrees (0-360)
  
  // Internal transform variables
  cos_rotation = math.cos(math.rad(45)),
  sin_rotation = math.sin(math.rad(45))
}

​
Scaling

{
  scale_x = 1.0,  -- Horizontal scale
  scale_y = 1.0   // Vertical scale
}

​
Blend Modes

{
  blendMode = "BLEND"     -- Normal
  blendMode = "ADD"       -- Additive (brighter)
  blendMode = "MOD"       -- Multiply (darker)
  blendMode = "ALPHAKEY"  -- Alpha keying
}

​
Slant Mode

For skewed/slanted bars: 
{
  slantMode = "INSIDE",   -- Slant inward
  slantMode = "OUTSIDE",  -- Slant outward
  slantMode = "UP",       // Slant upward
  slantMode = "DOWN"      // Slant downward
}

​
Progress Sources

{
  progressSource = {-1, ""}  -- From trigger
}

​
Common Patterns

​
Health Bar

{
  regionType = "progresstexture",
  width = 200,
  height = 20,
  orientation = "HORIZONTAL",
  
  foregroundTexture = "Interface\\\\TargetingFrame\\\\UI-StatusBar",
  foregroundColor = {0, 1, 0, 1},  -- Green
  
  backgroundTexture = "Interface\\\\TargetingFrame\\\\UI-StatusBar",
  backgroundColor = {0.5, 0, 0, 0.5},  -- Dark red
  
  progressSource = {1, "auto", "value", "total"}
}

​
Cast Bar

{
  regionType = "progresstexture",
  width = 300,
  height = 30,
  orientation = "HORIZONTAL",
  inverse = false,
  
  foregroundColor = {1, 0.7, 0, 1},  -- Gold
  
  // Use timed progress from trigger
  progressSource = {-1, ""}
}

​
Circular Cooldown

{
  regionType = "progresstexture",
  width = 100,
  height = 100,
  orientation = "CLOCKWISE",
  
  startAngle = 90,   -- Start at top
  endAngle = 450,    // Full rotation
  rotation = 0,
  
  foregroundTexture = "Interface\\\\Addons\\\\WeakAuras\\\\PowerAurasMedia\\\\Auras\\\\Aura3",
  foregroundColor = {0, 0.8, 1, 1},
  
  backgroundOffset = 3,
  backgroundColor = {0, 0, 0, 0.5}
}

​
Resource Tracker

{
  regionType = "progresstexture",
  width = 250,
  height = 40,
  orientation = "HORIZONTAL",
  
  // Dynamic color based on value
  conditions = {
    {
      check = {
        trigger = 1,
        variable = "value",
        op = "<",
        value = 30
      },
      changes = {{
        property = "foregroundColor",
        value = {1, 0, 0, 1}  -- Red when low
      }}
    },
    {
      check = {
        trigger = 1,
        variable = "value",
        op = ">=",
        value = 70
      },
      changes = {{
        property = "foregroundColor",
        value = {0, 1, 0, 1}  -- Green when high
      }}
    }
  }
}

​
Properties Reference

​
Modifiable via Conditions

PropertyTypeDescription
desaturateForegroundbooleanGrayscale foreground
desaturateBackgroundbooleanGrayscale background
foregroundColorcolorForeground RGBA
backgroundColorcolorBackground RGBA
widthnumberBar width
heightnumberBar height
orientationlistGrowth direction
inversebooleanReverse direction
mirrorbooleanHorizontal flip

​
Advanced Texture Transforms

The texture coordinate system uses complex transforms: 
local function ApplyTransform(x, y, region)
  // 1) Translate to center
  x, y = x - 0.5, y - 0.5
  
  // 2) Shrink by 1/sqrt(2)
  x, y = x * 1.4142, y * 1.4142
  
  // 3) Scale
  x = x / region.scale_x
  y = y / region.scale_y
  
  // 4) Mirror
  if region.mirror_h then x = -x end
  if region.mirror_v then y = -y end
  
  // 5) Rotate
  local rx = region.cos_rotation * x - region.sin_rotation * y
  local ry = region.sin_rotation * x + region.cos_rotation * y
  
  // 6) Translate back
  return rx + 0.5 + region.user_x,
         ry + 0.5 + region.user_y
end

​
Performance

Complex textures with many vertices can impact performance. Use simpler textures for better FPS.
Progress bars update when value changes. Avoid polling triggers for smooth updates.
Circular progress uses more vertices than linear. Limit count in complex UIs.

​
Troubleshooting

  • Verify progressSource is configured
  • Check trigger provides value/total or duration/expirationTime
  • Ensure orientation matches intended direction
  • Check inverse setting
  • Adjust crop_x and crop_y for circular displays
  • Check scale_x and scale_y values
  • Verify texture aspect ratio matches bar dimensions
  • Verify foregroundColor and backgroundColor RGBA values
  • Check desaturate settings
  • Ensure blend mode is appropriate

​
Best Practices

Icon Display

Alternative display type

Text Display

Add progress text

Conditions

Dynamic property changes

Build docs developers (and LLMs) love

Get started for freeTalk to us