Autumn Sale50% offCOMPOT
Charts & GaugesFree ComponentiOS 16.0+Xcode 15+

Circular Progress Gauge

Circular ring gauge with percentage display in the center.

SwiftUI Implementation

Pure Vanilla Swift • No Dependencies
gaugeCircularProgressPercent.swift
import SwiftUI

struct GaugeCircularProgressPercent: View {
    var min: Float
    var max: Float
    var current: Float
    var label: String
    var accentColor: Color
    
    var body: some View {
        Gauge(value: current, in: min...max) {
            Text(label)
        } currentValueLabel: {
            Text(current, format: .percent)
        }
        .gaugeStyle(.accessoryCircularCapacity)
        .tint(accentColor)
    }
}

struct UseGaugeCircularProgressPercent: View {
    var body: some View {
        VStack {
            GaugeCircularProgressPercent(min: 0.0, max: 1.0, current: 0.5, label: "Progress %", accentColor: .blue)
        }
        .padding()
    }
}

#Preview {
    UseGaugeCircularProgressPercent()
}

Ready to copy and paste directly into any Xcode project running iOS 16.0+.

Recommended Use Cases

  • Dashboard overviews, stats tracking, and metric highlights

Component Details

iOS Compatibility
iOS 16.0+
Xcode Version
Xcode 15+
Platform
iOS
License Tier
Free
Themes & Contexts
dashboard
Keywords
gaugeprogresscircularpercentswiftuiindicator
C

Compot for iOS

Native SwiftUI playground app

Preview all 130+ components interactively on your device and copy code straight to Xcode with 1 tap.

Get Compot on the App Store