ActivityIndicatorView
A number of preset loading indicators created with SwiftUI
Install / Use
/learn @exyte/ActivityIndicatorViewREADME
<a href="https://exyte.com/"><picture><source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/exyte/media/master/common/header-dark.png"><img src="https://raw.githubusercontent.com/exyte/media/master/common/header-light.png"></picture></a>
<a href="https://exyte.com/"><picture><source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/exyte/media/master/common/our-site-dark.png" width="80" height="16"><img src="https://raw.githubusercontent.com/exyte/media/master/common/our-site-light.png" width="80" height="16"></picture></a> <a href="https://twitter.com/exyteHQ"><picture><source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/exyte/media/master/common/twitter-dark.png" width="74" height="16"><img src="https://raw.githubusercontent.com/exyte/media/master/common/twitter-light.png" width="74" height="16"> </picture></a> <a href="https://exyte.com/contacts"><picture><source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/exyte/media/master/common/get-in-touch-dark.png" width="128" height="24" align="right"><img src="https://raw.githubusercontent.com/exyte/media/master/common/get-in-touch-light.png" width="128" height="24" align="right"></picture></a>
<img src="https://raw.githubusercontent.com/exyte/media/master/ActivityIndicatorView/demo.gif" width="480" /> <p><h1 align="left">ActivityIndicatorView</h1></p> <p><h4>A number of preset loading indicators created with SwiftUI</h4></p>Usage
Create an indicator like this:
ActivityIndicatorView(isVisible: $showLoadingIndicator, type: .default)
where
showLoadingIndicator - bool value you may change to display or hide the indicator
type - value from ActivityIndicatorView.IndicatorType enum
You may alter it with standard SwiftUI means like this:
ActivityIndicatorView(isVisible: $showLoadingIndicator, type: .default)
.frame(width: 50.0, height: 50.0)
.foregroundColor(.red)
Or specify another indicator type:
ActivityIndicatorView(isVisible: $showLoadingIndicator, type: .growingArc(.red, lineWidth: 4))
.frame(width: 50.0, height: 50.0)
Indicator types
Each indicator type has a number of parameters that have reasonable defaults. You can change them as you see fit, but it is advised to not set them too high or too low.
default - iOS UIActivityIndicator style
.default(count: 8)
arcs
.arcs(count: 3, lineWidth: 2)
rotatingDots
.rotatingDots(count: 5)
flickeringDots
.flickeringDots(count: 8)
scalingDots
.scalingDots(count: 3, inset: 2)
opacityDots
.opacityDots(count: 3, inset: 4)
equalizer
.equalizer(count: 5)
growingArc - add custom color for growing Arc, the default value is Color.black
.growingArc(.red, lineWidth: 4)
growingCircle - no parameters
gradient - circle with angular gradient border stroke, pass colors like this:
.gradient([.white, .red], lineWidth: 4)
Examples
To try ActivityIndicatorView examples:
- Clone the repo
https://github.com/exyte/ActivityIndicatorView.git - Open
ActivityIndicatorViewExample.xcodeproj - Try it!
Installation
Swift Package Manager
dependencies: [
.package(url: "https://github.com/exyte/ActivityIndicatorView.git")
]
Requirements
- iOS 13+ / watchOS 6+ / tvOS 13+ / macOS 10.15+
- Xcode 11+
Our other open source SwiftUI libraries
PopupView - Toasts and popups library
AnchoredPopup - Anchored Popup grows "out" of a trigger view (similar to Hero animation)
Grid - The most powerful Grid container
ScalingHeaderScrollView - A scroll view with a sticky header which shrinks as you scroll
AnimatedTabBar - A tabbar with a number of preset animations
MediaPicker - Customizable media picker
Chat - Chat UI framework with fully customizable message cells, input view, and a built-in media picker
OpenAI Wrapper lib for OpenAI REST API
AnimatedGradient - Animated linear gradient
ConcentricOnboarding - Animated onboarding flow
FloatingButton - Floating button menu
ProgressIndicatorView - A number of animated progress indicators
FlagAndCountryCode - Phone codes and flags for every country
SVGView - SVG parser
LiquidSwipe - Liquid navigation animation
Related Skills
node-connect
346.4kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
107.2kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
346.4kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
qqbot-media
346.4kQQBot 富媒体收发能力。使用 <qqmedia> 标签,系统根据文件扩展名自动识别类型(图片/语音/视频/文件)。
