Do loaders work on all iOS versions?

Presets use standard SwiftUI views compatible with iOS 15+; adjust for your deployment target.

Can I customize colors?

Yes. Pick colors in the controls and they appear in the generated code.

⚙️Loaders 🌈Gradients 🪪Cards ⚡Animations 🔔Alerts 📸Photo Picker 🕶️Shadows 🔘Buttons 🧩Grids 🎨Palettes 🔍JSON → Model 🌐API Generator 📝Postman → Code 📋JSON Format 🔐Base64

Loader Generator

Loader Style

Size: 50px

Animation Speed: 1s

Stroke Width: 4px

Primary Color

Secondary Color

Show Background Dimming

Opacity: 0.3

Include Helper Classes (Color Extension)

Uncheck if you already have Color extension helper classes in your project

Loader Generator

Loader Style

Size: 50px

Animation Speed: 1s

Stroke Width: 4px

Primary Color

Secondary Color

Show Background Dimming

Opacity: 0.3

Include Helper Classes (Color Extension)

Uncheck if you already have Color extension helper classes in your project

Generated Swift Code

4 blocks

Usage Example

import SwiftUI

// MARK: - Usage Example

struct ContentView: View {

@State private var isLoading = false

var body: some View {

VStack(spacing: 20) {

Button("Load Data") {

isLoading = true

// Simulate async work

DispatchQueue.main.asyncAfter(deadline: .now() + 2) {

isLoading = false

}

.ringLoader(isLoading: $isLoading)

}

Ring Loader

// MARK: - Ring Loader

struct RingLoader: View {

@State var size: CGFloat = 50

@State var primaryColor: Color = Color(hex: "#F26F29")

@State var secondaryColor: Color = Color(hex: "#F03224")

@State var speed: Double = 1

@State var strokeWidth: CGFloat = 4

@State private var rotation: Double = 0

var body: some View {

Circle()

.trim(from: 0, to: 0.7)

.stroke(

LinearGradient(

colors: [primaryColor, secondaryColor],

startPoint: .topLeading,

endPoint: .bottomTrailing

style: StrokeStyle(lineWidth: strokeWidth, lineCap: .round)

)

.frame(width: size, height: size)

.rotationEffect(.degrees(rotation))

.onAppear {

withAnimation(.linear(duration: speed).repeatForever(autoreverses: false)) {

rotation = 360

}

Loader Modifier

// MARK: - Ring Loader Modifier

struct RingLoaderModifier: ViewModifier {

@Binding var isLoading: Bool

func body(content: Content) -> some View {

ZStack {

content

if isLoading {

Color.black.opacity(0.3)

.ignoresSafeArea()

RingLoader(size: 50, primaryColor: Color(hex: "#F26F29"), secondaryColor: Color(hex: "#F03224"), speed: 1, strokeWidth: 4)

}

extension View {

func ringLoader(isLoading: Binding<Bool>) -> some View {

self.modifier(RingLoaderModifier(isLoading: isLoading))

}

Color Extension

Optional

// MARK: - Color Extension

extension Color {

init(hex: String) {

let hex = hex.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)

var int: UInt64 = 0

Scanner(string: hex).scanHexInt64(&int)

let a, r, g, b: UInt64

switch hex.count {

case 3: // RGB (12-bit)

(a, r, g, b) = (255, (int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17)

case 6: // RGB (24-bit)

(a, r, g, b) = (255, int >> 16, int >> 8 & 0xFF, int & 0xFF)

case 8: // ARGB (32-bit)

(a, r, g, b) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF)

default:

(a, r, g, b) = (255, 0, 0, 0)

}

self.init(

.sRGB,

red: Double(r) / 255,

green: Double(g) / 255,

blue: Double(b) / 255,

opacity: Double(a) / 255

)

}

Loader Generator

Loader Style

Size: 50px

Animation Speed: 1s

Stroke Width: 4px

Primary Color

Secondary Color

Show Background Dimming

Opacity: 0.3

Include Helper Classes (Color Extension)

Uncheck if you already have Color extension helper classes in your project

Device Preview

Generated Swift Code

4 blocks

Usage Example

import SwiftUI

// MARK: - Usage Example

struct ContentView: View {

@State private var isLoading = false

var body: some View {

VStack(spacing: 20) {

Button("Load Data") {

isLoading = true

// Simulate async work

DispatchQueue.main.asyncAfter(deadline: .now() + 2) {

isLoading = false

}

.ringLoader(isLoading: $isLoading)

}

Ring Loader

// MARK: - Ring Loader

struct RingLoader: View {

@State var size: CGFloat = 50

@State var primaryColor: Color = Color(hex: "#F26F29")

@State var secondaryColor: Color = Color(hex: "#F03224")

@State var speed: Double = 1

@State var strokeWidth: CGFloat = 4

@State private var rotation: Double = 0

var body: some View {

Circle()

.trim(from: 0, to: 0.7)

.stroke(

LinearGradient(

colors: [primaryColor, secondaryColor],

startPoint: .topLeading,

endPoint: .bottomTrailing

style: StrokeStyle(lineWidth: strokeWidth, lineCap: .round)

)

.frame(width: size, height: size)

.rotationEffect(.degrees(rotation))

.onAppear {

withAnimation(.linear(duration: speed).repeatForever(autoreverses: false)) {

rotation = 360

}

Loader Modifier

// MARK: - Ring Loader Modifier

struct RingLoaderModifier: ViewModifier {

@Binding var isLoading: Bool

func body(content: Content) -> some View {

ZStack {

content

if isLoading {

Color.black.opacity(0.3)

.ignoresSafeArea()

RingLoader(size: 50, primaryColor: Color(hex: "#F26F29"), secondaryColor: Color(hex: "#F03224"), speed: 1, strokeWidth: 4)

}

extension View {

func ringLoader(isLoading: Binding<Bool>) -> some View {

self.modifier(RingLoaderModifier(isLoading: isLoading))

}

Color Extension

Optional

// MARK: - Color Extension

extension Color {

init(hex: String) {

let hex = hex.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)

var int: UInt64 = 0

Scanner(string: hex).scanHexInt64(&int)

let a, r, g, b: UInt64

switch hex.count {

case 3: // RGB (12-bit)

(a, r, g, b) = (255, (int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17)

case 6: // RGB (24-bit)

(a, r, g, b) = (255, int >> 16, int >> 8 & 0xFF, int & 0xFF)

case 8: // ARGB (32-bit)

(a, r, g, b) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF)

default:

(a, r, g, b) = (255, 0, 0, 0)

}

self.init(

.sRGB,

red: Double(r) / 255,

green: Double(g) / 255,

blue: Double(b) / 255,

opacity: Double(a) / 255

)

}

728×90

between-tool-content · Ad slot ready

SwiftUI Loader Generator

Generate SwiftUI loading indicators for common patterns (ring, pulse, dots) with configurable colors and sizing.

Copy the code output and drop it into your SwiftUI project.

How to use

Choose a loader style (ring, pulse, dots) and set colors and size.
Preview the animation in the device frame.
Copy the SwiftUI code when it matches your design.
Overlay it in a ZStack while async work runs.

Responsive

in-content · Ad slot ready

Examples (copy-paste)

Overlay loader while loading

ZStack {
  ContentView()

  if isLoading {
    Color.black.opacity(0.25).ignoresSafeArea()
    ProgressView().scaleEffect(1.2)
  }
}

FAQs

Do loaders work on all iOS versions?: Presets use standard SwiftUI views compatible with iOS 15+; adjust for your deployment target.
Can I customize colors?: Yes. Pick colors in the controls and they appear in the generated code.

Related tools

SwiftUI Gradient Generator

SwiftUI tool

SwiftUI Card Generator

SwiftUI tool

SwiftUI Animation Generator

SwiftUI tool

SwiftUI Alert Generator

SwiftUI tool

SwiftUI Photo Picker Generator

SwiftUI tool