SwiftUI animation example
SwiftUI Loading Animation: Activity Rings Loader
ProgressView gives you a system spinner; this gives your app a loader with personality. Three concentric rings sweep at different speeds with rounded caps and a soft glow, the way Apple's Activity rings look. When the done input flips to true, every ring closes to a full circle and a checkmark draws in the middle.
- 4.1 KB file
- 6 live inputs
- SwiftUI runtime
How this activity rings loader works
- Each ring's head and tail move at different rates, so its length breathes while it spins.
- Setting done to true eases every ring to a full circle, then draws the checkmark in 250 ms.
- A "finished" event fires once the checkmark completes.
Add it to your SwiftUI app
Install ExodeUI (Swift Package), download the file below, and paste this. The code updates as you customize. Other runtimes are in the other tabs.
import SwiftUI
import ExodeUI
// Add swiftui-loader.exode to your app target (download it below).
struct SwiftuiLoaderView: View {
@StateObject private var controller = ExodeUIController()
private let json = (try? String(contentsOf: Bundle.main.url(forResource: "swiftui-loader", withExtension: "exode")!)) ?? "{}"
var body: some View {
ExodeUICanvas(
artboardJson: json,
fit: "Layout",
controller: controller,
onReady: { },
onTrigger: { name, _ in
// fires: 'finished'
}
)
.frame(height: 520)
}
}Inputs
| Input | Type | Default | Range |
|---|---|---|---|
done | Boolean | false | — |
speed | Number | 1 | 0.3 – 3 |
accent | Text | #fa114f | hex colour |
accent2 | Text | #92e82a | hex colour |
accent3 | Text | #1eeaef | hex colour |
bg | Text | #000000 | hex colour |
Events: finished
More SwiftUI animations
Shimmer Reveal TextA headline whose words rise and focus in one by one, with a periodic shimmer across the gradient text.Hold to Confirm ButtonA press-and-hold button: a fill runs while held, drains on early release and confirms when full.Context Menu PopLong-press a card to lift it, dim the background and spring an iOS-style context menu open beside it.Mesh Gradient BackgroundA living mesh-style gradient of drifting color points that bend toward your touch.Tilt Parallax PosterA poster card that tilts toward the pointer while its layers separate in depth under a moving glare.Spring Response ComparisonThree springs (snappy, smooth, bouncy) racing the same distance so response and bounce are easy to compare.
The same idea in other frameworks: React orbit loader · Flutter bouncing bars loader · JavaScript segmented ring spinner