Shimmer: A super-light modifier that adds a shimmering effect to any SwiftUI View

Overview

SwiftUI-Shimmer

Shimmer is a super-light modifier that adds a shimmering effect to any SwiftUI View, for example, to show that an operation is in progress. It works well on light and dark modes, and across iOS, macOS, tvOS and watchOS.

import SwiftUI
import Shimmer
:
:
Text("SwiftUI Shimmer").modifier(Shimmer())

or more conveniently

Text("SwiftUI Shimmer").shimmering()

Light Mode Dark Mode

Optional Parameters ⚙️

  • active: Convenience parameter to conditionally enable the effect. Defaults to true.
  • duration: The duration of a shimmer cycle in seconds. Default: 1.5.
  • bounce: Whether to bounce (reverse) the animation back and forth. Defaults to false.

Bounce 3

Animated Skeletons ☠️

Of course, you can combine .shimmering(...) with the .redacted(...) modifier to create interesting animated skeleton views.

Loading

Text("Some text")
    .redacted(reason: .placeholder)
    .shimmering()

Installation

SwiftUI-Shimmer can be installed using Swift Package Manager.

Use the package URL to search for the URLImage package: https://github.com/markiv/SwiftUI-Shimmer.

For how-to integrate package dependencies refer to Adding Package Dependencies to Your App documentation.

What About UIKit?

For an older, UIKit-based shimmer effect, see UIView-Shimmer.

You might also like...
MotionBlur allows you to add motion blur effect to iOS animations.
MotionBlur allows you to add motion blur effect to iOS animations.

MotionBlur MotionBlur allows you to add motion blur effect to your animations (currently only position's change). See the accompanying blog post to le

SYBlinkAnimationKit is a blink effect animation framework for iOS, written in Swift.
SYBlinkAnimationKit is a blink effect animation framework for iOS, written in Swift.

SYBlinkAnimationKit is a blink effect animation framework for iOS, written in Swift 👀 Demo There are 5 types of animation for component. border borde

Allows a swipe on any part of the screen to start an interruptible pop animation to the previous view
Allows a swipe on any part of the screen to start an interruptible pop animation to the previous view

Lazy Pop SwiftUI Swiping on any part of the screen starts an interruptible pop animation to the previous view. Forked from https://github.com/rishi420

Create a smooth transition between any two SwiftUI Views
Create a smooth transition between any two SwiftUI Views

GZMatchedTransformEffect Create a smooth transition between any two SwiftUI Views. It is very similar to the built-in .matchedGeometryEffect() modifie

Twinkle is a Swift and easy way to make any UIView in your iOS or tvOS app twinkle.
Twinkle is a Swift and easy way to make any UIView in your iOS or tvOS app twinkle.

Twinkle ✨ Twinkle is a Swift and easy way to make any UIView in your iOS or tvOS app twinkle. This library creates several CAEmitterLayers and animate

SwiftUI animated image view that works on iOS and layout just as SwiftUI.Image

SwiftUI.AnimatedImage SwiftUI animated image view that works on iOS and layout just as SwiftUI.Image Screen.Recording.2021-07-31.at.02.18.33.mov Insta

Inspired by Fabric - Answers animation. Allows to
Inspired by Fabric - Answers animation. Allows to "build" given view with pieces. Allows to "destroy" given view into pieces

ADPuzzleAnimation Whats inside Custom animation for UIView inspired by Fabric - Answers animation. Easy to use To create your first animation you need

A drawer view implemented by SwiftUI
A drawer view implemented by SwiftUI

DrawerView-SwiftUI A drawer view implemented by SwiftUI. This is not just simply a demo, instead, it can be directly used in project as a module as it

Pure SwiftUI state-driven library to present view sequences and hierarchies.
Pure SwiftUI state-driven library to present view sequences and hierarchies.

PathPresenter swiftUIOnboarding.mp4 Pure SwiftUI routing with transitions, animations, and .sheet() support. In SwiftUI, View is a function of the sta

Comments
  • Custom Gradient Support

    Custom Gradient Support

    Hello there 👋

    I'm going to be using a shimmer in my application and thought this package was great! However, I desired more customization over the gradient.

    Overview

    I change GradientMask to supply the definition used for the underlying LinearGradient. The default values match the current gradient.

    Example
    Text("Shimmering")
    	.shimmering(gradientMask: .init(
    		centerOpacity: 0.8,
    		edgeOpacity: 0.3,
    		startPoint: .topLeading,
    		endPoint: .bottomTrailing,
    		width: 0.1))
    

    Since GradientMask.startPoint and GradientMask.endPoint are properties, this allows the gradient to "move" in different directions. Due to this, I think that this overrides #4.

    Right to Left Example

    https://user-images.githubusercontent.com/20747774/201496531-581444e8-5d9e-4204-82bf-802ce0ec05ee.mov

    Top to Bottom Example

    https://user-images.githubusercontent.com/20747774/201496550-99f90a1a-9c99-4b07-ab97-d48116244210.mov

    Inverse mask

    Currently, the gradient is applied as a plain .mask(...) which doesn't suite my needs, as it changes the opacity of the underlying view to the opacity of the edge points of the LinearGradient, and I don't think that a shimmer should change the opacity of the underlying view. GradientMask.inverse determines whether the mask should be inverted or not, therefore having the shimmer effect be the gradient itself, and not a mask over the gradient. I personally think this should be the default behavior but I won't change the current implementation.

    Current Implementation Example

    https://user-images.githubusercontent.com/20747774/201496252-16c66f36-68ee-4034-8ad5-6b414892965d.mov

    Inverted Mask Example

    https://user-images.githubusercontent.com/20747774/201496481-64b57e6b-e59d-4c8b-b9b9-ba7528bebda1.mov

    Other

    • I provide two view functions used to determine the mask
    • Remove the defaults to the Shimmer object. Redundant for this package's use.
    • Some personal linting styles applied
    • Previews are updated to show GradientMask customization
    • Update documentation. The phrases where the default was provided was redundant as they are already shown in the Xcode preview while you are reading them.
    opened by LePips 0
  • add: RTL support

    add: RTL support

    Shimme should animate from the leading to the trailing responding to the language direction. Also, the slash effect should be face forward. (aka forward slash)

    opened by MojtabaHs 0
  • High CPU load even if hidden

    High CPU load even if hidden

    Hi. If I have a view like this:

    	@ViewBuilder var listView: some View {
    		if isLoading {
    			skeletonView.shimmer()
    		} else {
    			listView
    		}
    	}
    

    Then even if isLoading is false is still consumes CPU. The more cells the more consumption. I have about 36% on my iPhone 11 even if there's no shimmering view on screen. If remove shimmering then CPU load is 0%.

    opened by denis-obukhov 1
Owner
Vikram Kriplaney
🇮🇳🇪🇸🇮🇨🇨🇭 🇨🇦🇬🇭🇱🇰
Vikram Kriplaney
An easy way to add a shimmering effect to any view with just one line of code. It is useful as an unobtrusive loading indicator.

LoadingShimmer An easy way to add a shimmering effect to any view with just single line of code. It is useful as an unobtrusive loading indicator. Thi

Jogendra 1.4k Jan 6, 2023
RippleEffectView - A Neat Rippling View Effect

RippleEffectView Not only Uber-like animated screen background. RippleEffectView inspired by RayWenderlich.com article How To Create an Uber Splash Sc

Alex Sergeev 318 Dec 13, 2022
RetroBubbleText - A simple effect used in Retrogram which renders text with a fun bubble-style outline in SwiftUI

Retro Bubble Text This is a simple effect used in Retrogram which renders text w

Simeon Saëns 5 Aug 29, 2022
Simple and light weight facebook login library for UIKit & SwiftUI

MjFbLogin Simple and light weight facebook login library which provides support for UIKit & SwiftUI Example To run the example project, clone the repo

Mohammad Jeeshan 2 Jul 3, 2022
A UICollectionViewLayout subclass that adds custom transitions/animations to the UICollectionView without effecting your existing code.

AnimatedCollectionViewLayout Normally a UICollectionView has no transition effects when you scroll from one item to another. There are lots of ways to

Jin Wang 4.5k Jan 1, 2023
UIView category that adds shake animation

UIView category that adds a shake animation like the password field of the OSX login screen. Screenshot Setup with CocoaPods Add pod 'UIView+Shake' to

Andrea Mazzini 498 Nov 20, 2022
Library for creating swipe actions for any SwiftUI View

SwipeActions Library for creating swipe actions for any SwiftUI View, similar to

Alexander Kraev 24 Dec 26, 2022
A lightweight loading animation that can be applied to any SwiftUI view with 1 line of code.

SimpleAFLoader A lightweight loading animation that can be applied to any SwiftUI view with 1 line of code. All animations are built using the SwiftUI

Fahim Rahman 2 Aug 25, 2022
🎨 Gradient animation effect like Instagram

Pastel ?? Gradient animation effect like Instagram Example override func viewDidLoad() { super.viewDidLoad() let pastelView = PastelView(fram

Cruz 3.4k Jan 1, 2023
Genie - A Playground to recreate the macOS Genie Effect.

Genie A Playground to recreate the macOS Genie Effect. For more information, please read the accompanying blog post: Recreating the macOS Genie Effect

Harshil Shah 66 Nov 18, 2022