Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/markiv/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, watchOS and visionOS.
https://github.com/markiv/SwiftUI-Shimmer
ios macos shimmer skeleton swift swiftui tvos visionos watch
Last synced: about 1 month ago
JSON representation
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, watchOS and visionOS.
- Host: GitHub
- URL: https://github.com/markiv/SwiftUI-Shimmer
- Owner: markiv
- License: mit
- Created: 2021-03-23T18:14:34.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-01-28T11:42:38.000Z (6 months ago)
- Last Synced: 2024-04-24T02:02:43.231Z (3 months ago)
- Topics: ios, macos, shimmer, skeleton, swift, swiftui, tvos, visionos, watch
- Language: Swift
- Homepage:
- Size: 246 KB
- Stars: 903
- Watchers: 12
- Forks: 55
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-swiftui - markiv/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. (Samples)
README
# 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, left-to-right and right-to-left layout directions, and across all Apple platforms: iOS, macOS, tvOS, watchOS and even visionOS! 📱💻🖥️📺⌚️🥽✨
 
## Usage
```swift
import SwiftUI
import Shimmer
⋮
⋮
Text("SwiftUI Shimmer").modifier(Shimmer())
```
or more conveniently
```swift
Text("SwiftUI Shimmer").shimmering()
```
## Optional Parameters ⚙️
- `active`: Convenience parameter to conditionally enable the effect. Defaults to `true`.
- `animation`: A custom animation. Defaults to `Shimmer.defaultAnimation`.
- `gradient`: A custom gradient. Defaults to `Shimmer.defaultGradient`.
- `bandSize`: The size of the animated mask's "band". Defaults to 0.2 unit points, which corresponds to 20% of the extent of the gradient.
### Backward Compatible 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`.
- `delay`: A delay in seconds. Defaults to `0`.
## Custom Animations
You can supply any custom animation:
```swift
Text("Loading...")
.shimmering(
active: isAnimating,
animation: .easeInOut(duration: 2).repeatCount(5, autoreverses: false).delay(1)
)
```
## Gradient Mode
In addition to the original masking mode (which is still the default), Shimmer now supports additional modes to apply the gradient, including as a background or an overlay with a custom blend mode:
```swift
Text("Custom Gradient Mode").bold()
.font(.largeTitle)
.shimmering(
gradient: Gradient(colors: [.clear, .orange, .white, .green, .clear]),
bandSize: 0.5,
mode: .overlay()
)
```
## Animated Skeletons ☠️
Of course, you can combine `.shimmering(...)` with the `.redacted(...)` modifier to create interesting animated skeleton views.
```swift
Text("Some text")
.redacted(reason: .placeholder)
.shimmering()
```
## Right-To-Left (RTL) Support
The mask and animation now adjusts automatically to the environment's `layoutDirection` in order to better support
different languages and locales.
## Installation
### Swift Package Manager
Use the package URL or search for the SwiftUI-Shimmer package: [https://github.com/markiv/SwiftUI-Shimmer](https://github.com/markiv/SwiftUI-Shimmer).
For how-to integrate package dependencies refer to [Adding Package Dependencies to Your App documentation](https://developer.apple.com/documentation/xcode/adding_package_dependencies_to_your_app).
### Cocoapods
Add this to your Podfile:
```ruby
pod 'SwiftUI-Shimmer', :git => 'https://github.com/markiv/SwiftUI-Shimmer.git'
```
## What About UIKit?
For an older, UIKit-based shimmer effect, see [UIView-Shimmer](https://github.com/markiv/UIView-Shimmer).