--- title: "LinearCapacityGaugeStyle | Explore SwiftUI" description: "A gauge style that displays a bar that fills from leading to trailing edges as the gauge’s current value increases" canonical_url: "https://exploreswiftui.com/library/gauge/linearcapacitygaugestyle" meta: author: "Explore SwiftUI" "og:description": "A gauge style that displays a bar that fills from leading to trailing edges as the gauge’s current value increases" "og:image": "https://exploreswiftui.com/_og/d/c_Component%2Ctitle_LinearCapacityGaugeStyle%2Cdescription_~QSBnYXVnZSBzdHlsZSB0aGF0IGRpc3BsYXlzIGEgYmFyIHRoYXQgZmlsbHMgZnJvbSBsZWFkaW5nIHRvIHRyYWlsaW5nIGVkZ2VzIGFzIHRoZSBnYXVnZeKAmXMgY3VycmVudCB2YWx1ZSBpbmNyZWFzZXM%2Ccategory_Gauge%2Cimage_~L2FwaS9pbWFnZXMvNDMvdmFyaWFudHMvMjY3P3Y9MTc5MDA3MzQ3ODg0MiZyPTImdz0xMjgwJnE9ODUmZj1qcGVn%2CimageMode_crop%2CimagePosition_center%2CimageFrame_~cG9zaXRpb246IGFic29sdXRlOyByaWdodDogMDsgd2lkdGg6IDY0MHB4OyBoZWlnaHQ6IDQ4MHB4OyBkaXNwbGF5OiBmbGV4OyBvdmVyZmxvdzogaGlkZGVuOyBiYWNrZ3JvdW5kOiAjRkZGRkZGOyBib3gtc2hhZG93OiAwIC0xMHB4IDUwcHggcmdiYSgzNyw5OSwyMzUsMC4xOCk7IGJvcmRlci1sZWZ0OiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgdG9wOiA3NXB4OyBib3JkZXItdG9wOiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkIHJnYmEoMCwwLDAsMC4wNik7IGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IDMycHg7IGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6IDMycHg7%2Cprops_eyJwbGF0Zm9ybXMiOlsiaU9TIiwiaVBhZE9TIiwibWFjT1MiLCJ3YXRjaE9TIiwidmlzaW9uT1MiXX0%2Cp_Ii9saWJyYXJ5L2dhdWdlL2xpbmVhcmNhcGFjaXR5Z2F1Z2VzdHlsZSI%2Cs_Tfq4GFvlqyVo2ZjM.png" "og:image:height": "630" "og:image:type": image/png "og:image:width": "1200" "og:title": "LinearCapacityGaugeStyle | Explore SwiftUI" "twitter:description": "A gauge style that displays a bar that fills from leading to trailing edges as the gauge’s current value increases" "twitter:image": "https://exploreswiftui.com/_og/d/c_Component%2Ctitle_LinearCapacityGaugeStyle%2Cdescription_~QSBnYXVnZSBzdHlsZSB0aGF0IGRpc3BsYXlzIGEgYmFyIHRoYXQgZmlsbHMgZnJvbSBsZWFkaW5nIHRvIHRyYWlsaW5nIGVkZ2VzIGFzIHRoZSBnYXVnZeKAmXMgY3VycmVudCB2YWx1ZSBpbmNyZWFzZXM%2Ccategory_Gauge%2Cimage_~L2FwaS9pbWFnZXMvNDMvdmFyaWFudHMvMjY3P3Y9MTc5MDA3MzQ3ODg0MiZyPTImdz0xMjgwJnE9ODUmZj1qcGVn%2CimageMode_crop%2CimagePosition_center%2CimageFrame_~cG9zaXRpb246IGFic29sdXRlOyByaWdodDogMDsgd2lkdGg6IDY0MHB4OyBoZWlnaHQ6IDQ4MHB4OyBkaXNwbGF5OiBmbGV4OyBvdmVyZmxvdzogaGlkZGVuOyBiYWNrZ3JvdW5kOiAjRkZGRkZGOyBib3gtc2hhZG93OiAwIC0xMHB4IDUwcHggcmdiYSgzNyw5OSwyMzUsMC4xOCk7IGJvcmRlci1sZWZ0OiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgdG9wOiA3NXB4OyBib3JkZXItdG9wOiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkIHJnYmEoMCwwLDAsMC4wNik7IGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IDMycHg7IGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6IDMycHg7%2Cprops_eyJwbGF0Zm9ybXMiOlsiaU9TIiwiaVBhZE9TIiwibWFjT1MiLCJ3YXRjaE9TIiwidmlzaW9uT1MiXX0%2Cp_Ii9saWJyYXJ5L2dhdWdlL2xpbmVhcmNhcGFjaXR5Z2F1Z2VzdHlsZSI%2Cs_Tfq4GFvlqyVo2ZjM.png" "twitter:title": "LinearCapacityGaugeStyle | Explore SwiftUI" --- > Index of every page on this site: [llms.txt](https://exploreswiftui.com/llms.txt) **Interactive previews**[ iPhone](https://exploreswiftui.com/iphone?element=43) # **LinearCapacityGaugeStyle** A gauge style that displays a bar that fills from leading to trailing edges as the gauge’s current value increases ![LinearCapacityGaugeStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/43/variants/267?v=1790073478842&r=2&w=800&q=80&f=webp) ### **Platform Compatibility** iOS 16.0+ iPadOS 16.0+ macOS 13.0+ watchOS 9.0+ visionOS 1.0+ ### **Tags** ### **SwiftUI Code** [ Docs](https://developer.apple.com/documentation/swiftui/gaugestyle/linearcapacity) ``` @State private var currentValue = 0.42 var body: some View { VStack { Gauge(value: currentValue) { Text("Foo") } Gauge(value: currentValue) { Text("Foo") } currentValueLabel: { Text("\(currentValue)") } .padding(.vertical) Gauge(value: currentValue) { Text("Foo") } currentValueLabel: { Text("42") } minimumValueLabel: { Text("0") } maximumValueLabel: { Text("100") } } .gaugeStyle(.linearCapacity) } ``` ### **Found an issue or have a suggestion?** Created: June 3, 2025Updated: December 27, 2025 ![Connect Wizard](https://exploreswiftui.com/_ipx/f_webp&q_80&s_48x48/images/connect-wizard-icon.png) **Connect Wizard** **Unlock insights App Store Connect doesn’t show you.** [** Get Started **](https://apps.apple.com/app/apple-store/id6747314580?pt=121213751&ct=Explore%20SwiftUI%20Banner&mt=8) ### **More Gauge Components ** [**View all **](https://exploreswiftui.com/library/gauge) ![Gauge Colors - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/48/variants/261?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Gauge Colors** Customizing the colors of different styles with minimal effort ![CircularGaugeStyle - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/47/variants/263?v=1790073478842&r=2&w=412&q=75&f=webp) ### **CircularGaugeStyle** A gauge style that displays an open ring with a marker that appears at a point along the ring to indicate the gauge’s current value ![ LinearGaugeStyle - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/46/variants/264?v=1790073478842&r=2&w=412&q=75&f=webp) ### **LinearGaugeStyle** A gauge style that displays a bar with a marker that appears at a point along the bar to indicate the gauge’s current value ![AccessoryLinearCapacityGaugeStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/45/variants/257?v=1790073478842&r=2&w=412&q=75&f=webp) ### **AccessoryLinearCapacityGaugeStyle** A gauge style that displays bar that fills from leading to trailing edges as the gauge’s current value increases ![AccessoryLinearGaugeStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/44/variants/253?v=1790073478842&r=2&w=412&q=75&f=webp) ### **AccessoryLinearGaugeStyle** A gauge style that displays bar with a marker that appears at a point along the bar to indicate the gauge’s current value ![AccessoryCircularCapacityGaugeStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/42/variants/412?v=1790073478842&r=2&w=412&q=75&f=webp) ### **AccessoryCircularCapacityGaugeStyle** A gauge style that displays a closed ring that’s partially filled in to indicate the gauge’s current value ![AccessoryCircularGaugeStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/41/variants/219?v=1790073478842&r=2&w=412&q=75&f=webp) ### **AccessoryCircularGaugeStyle** A gauge style that displays an open ring with a marker that appears at a point along the ring to indicate the gauge’s current value ![Min Max Current Value Gauge - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/40/variants/231?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Min Max Current Value Gauge** Creates a gauge showing a value within a range and describes the gauge’s current, minimum, and maximum values ### **Explore Other Components ** [**Browse all **](https://exploreswiftui.com/) ![Placeholder Icon Product View - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/204/variants/553?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Placeholder Icon Product View** Creates a view to load an individual product from the App Store, and merchandise it using its promotional image and a custom placeholder icon. ![Glass effect - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/85/variants/33?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Glass effect** Applies the Liquid Glass effect to a view ![Preferred Top Column - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/256/variants/1967?v=1791379474964&r=2&w=412&q=75&f=webp) ### **Preferred Top Column** Controls which column appears on top of the stack when NavigationSplitView collapses into a single stack in certain contexts, such as on iPhone, when iPhone Duo is closed, or on Apple Watch. By default, the sidebar appears on top. In this case, the detail column does instead. ![TextFieldLink - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/76/variants/192?v=1790073478842&r=2&w=412&q=75&f=webp) ### **TextFieldLink** A control that requests text input from the user when pressed ![Text Format - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/99/variants/307?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Text Format** Creates a text view that displays the formatted representation of a nonstring type supported by a corresponding format style. ![Value Tab View - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/165/variants/616?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Value Tab View** Creates a tab view that uses a builder to create and specify selection values for its tabs. ![Content NavigationSplitView - iOS on iPhone Duo - Landscape - Fully Open - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/242/variants/1528?v=1790273533713&r=2&w=412&q=75&f=webp) ### **Content NavigationSplitView** Creates a three-column navigation split view. ![Disabled Toolbar Vertical Behavior - iOS on iPhone Duo - Landscape - Fully Open - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/246/variants/1636?v=1790277107518&r=2&w=412&q=75&f=webp) ### **Disabled Toolbar Vertical Behavior** Disables the vertical bar. ```json {"@context":"https://schema.org","@graph":[{"@id":"https://exploreswiftui.com/#website","@type":"WebSite","description":"A visual library for SwiftUI APIs, components, and modifiers","inLanguage":"en-US","name":"Explore SwiftUI","url":"https://exploreswiftui.com/","publisher":{"@id":"https://exploreswiftui.com/#identity"}},{"@id":"https://exploreswiftui.com/library/gauge/linearcapacitygaugestyle#webpage","@type":"WebPage","dateModified":"2025-12-27T19:11:23.282Z","datePublished":"2025-06-03T19:06:45.868Z","description":"A gauge style that displays a bar that fills from leading to trailing edges as the gauge’s current value increases","name":"LinearCapacityGaugeStyle","url":"https://exploreswiftui.com/library/gauge/linearcapacitygaugestyle","breadcrumb":{"@id":"https://exploreswiftui.com/library/gauge/linearcapacitygaugestyle#breadcrumb"},"isPartOf":{"@id":"https://exploreswiftui.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://exploreswiftui.com/library/gauge/linearcapacitygaugestyle"]}],"primaryImageOfPage":{"@id":"https://exploreswiftui.com/#logo"}},{"@id":"https://exploreswiftui.com/#identity","@type":"Organization","description":"A visual library for SwiftUI APIs, components, and modifiers","name":"Explore SwiftUI","url":"https://exploreswiftui.com","logo":{"@id":"https://exploreswiftui.com/#logo"},"sameAs":["https://x.com/Typ0genius","https://mastodon.social/@Typ0genius"]},{"@id":"https://exploreswiftui.com/library/gauge/linearcapacitygaugestyle#article","dateModified":"2025-12-27T19:11:23.282Z","datePublished":"2025-06-03T19:06:45.868Z","description":"A gauge style that displays a bar that fills from leading to trailing edges as the gauge’s current value increases","headline":"LinearCapacityGaugeStyle","inLanguage":"en-US","name":"LinearCapacityGaugeStyle","thumbnailUrl":"https://exploreswiftui.com/api/images/43/variants/267?v=1790073478842&r=2","url":"https://exploreswiftui.com/library/gauge/linearcapacitygaugestyle","@type":["Article","TechArticle"],"about":{"@type":"Thing","name":"SwiftUI"},"author":{"@id":"https://exploreswiftui.com/#identity"},"image":{"@id":"https://exploreswiftui.com/#/schema/image/1"},"isPartOf":{"@type":"WebSite","name":"Explore SwiftUI","url":"https://exploreswiftui.com"},"mainEntityOfPage":{"@id":"https://exploreswiftui.com/library/gauge/linearcapacitygaugestyle#webpage"},"publisher":{"@id":"https://exploreswiftui.com/#identity"}},{"@id":"https://exploreswiftui.com/library/gauge/linearcapacitygaugestyle#/schema/software-source-code/1","@type":"SoftwareSourceCode","codeRepository":"https://developer.apple.com/documentation/swiftui/gaugestyle/linearcapacity","codeSampleType":"full example","description":"A gauge style that displays a bar that fills from leading to trailing edges as the gauge’s current value increases","name":"LinearCapacityGaugeStyle SwiftUI Example","programmingLanguage":"Swift","runtimePlatform":"SwiftUI","text":"@State private var currentValue = 0.42\n\nvar body: some View {\n VStack {\n Gauge(value: currentValue) {\n Text(\"Foo\")\n }\n\n Gauge(value: currentValue) {\n Text(\"Foo\")\n } currentValueLabel: {\n Text(\"\\(currentValue)\")\n }\n .padding(.vertical)\n\n Gauge(value: currentValue) {\n Text(\"Foo\")\n } currentValueLabel: {\n Text(\"42\")\n } minimumValueLabel: {\n Text(\"0\")\n } maximumValueLabel: {\n Text(\"100\")\n }\n }\n .gaugeStyle(.linearCapacity)\n}","about":[{"@type":"Thing","name":"SwiftUI"},{"@type":"Thing","name":"Gauge"},{"@type":"Thing","name":"LinearCapacityGaugeStyle"}]},{"@id":"https://exploreswiftui.com/library/gauge/linearcapacitygaugestyle#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Home","item":"https://exploreswiftui.com","position":1},{"@type":"ListItem","name":"Gauge","item":"https://exploreswiftui.com/library/gauge","position":2},{"@type":"ListItem","name":"LinearCapacityGaugeStyle","item":"https://exploreswiftui.com/library/gauge/linearcapacitygaugestyle","position":3}]},{"@id":"https://exploreswiftui.com/#logo","@type":"ImageObject","caption":"Explore SwiftUI","contentUrl":"https://exploreswiftui.com/apple-touch-icon.png","inLanguage":"en","url":"https://exploreswiftui.com/apple-touch-icon.png"},{"@id":"https://exploreswiftui.com/#/schema/image/1","@type":"ImageObject","contentUrl":"https://exploreswiftui.com/api/images/43/variants/267?v=1790073478842&r=2","inLanguage":"en","url":"https://exploreswiftui.com/api/images/43/variants/267?v=1790073478842&r=2"}]} ```