Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jogboms/flutter_spinkit
✨ A collection of loading indicators animated with flutter. Heavily Inspired by http://tobiasahlin.com/spinkit.
https://github.com/jogboms/flutter_spinkit
android animation animation-library dart dartlang flutter flutter-plugin ios loaders loading loading-animations spinkit
Last synced: 2 days ago
JSON representation
✨ A collection of loading indicators animated with flutter. Heavily Inspired by http://tobiasahlin.com/spinkit.
- Host: GitHub
- URL: https://github.com/jogboms/flutter_spinkit
- Owner: jogboms
- License: mit
- Created: 2018-06-25T09:30:45.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-11-18T04:28:51.000Z (3 months ago)
- Last Synced: 2025-02-11T14:15:13.535Z (9 days ago)
- Topics: android, animation, animation-library, dart, dartlang, flutter, flutter-plugin, ios, loaders, loading, loading-animations, spinkit
- Language: Dart
- Homepage:
- Size: 3.03 MB
- Stars: 3,053
- Watchers: 33
- Forks: 314
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-loading-indicators - Flutter Spinkit - A collection of loading indicators animated with flutter. (Dart)
- awesome-coding - flutter_spinkit
- awesome-flutter - SpinKit - 各种精美的加载动画,作者:[Jeremiah Ogbomo](https://twitter.com/jogboms) (Uncategorized / Uncategorized)
- awesome-flutter - SpinKit - 各种精美的加载动画,作者:[Jeremiah Ogbomo](https://twitter.com/jogboms) (Uncategorized / Uncategorized)
README
# ✨ Flutter Spinkit
[](https://github.com/jogboms/flutter_spinkit/actions/workflows/main.yml) [](https://codecov.io/gh/jogboms/flutter_spinkit) [](https://pub.dartlang.org/packages/flutter_spinkit)
A collection of loading indicators animated with flutter. Heavily inspired by [@tobiasahlin](https://github.com/tobiasahlin)'s [SpinKit](https://github.com/tobiasahlin/SpinKit).
## 🎖 Installing
```yaml
dependencies:
flutter_spinkit: ^5.2.1
```### ⚡️ Import
```dart
import 'package:flutter_spinkit/flutter_spinkit.dart';
```## 🎮 How To Use
```dart
const spinkit = SpinKitRotatingCircle(
color: Colors.white,
size: 50.0,
);
``````dart
final spinkit = SpinKitFadingCircle(
itemBuilder: (BuildContext context, int index) {
return DecoratedBox(
decoration: BoxDecoration(
color: index.isEven ? Colors.red : Colors.green,
),
);
},
);
``````dart
final spinkit = SpinKitSquareCircle(
color: Colors.white,
size: 50.0,
controller: AnimationController(vsync: this, duration: const Duration(milliseconds: 1200)),
);
```For more info, please, refer to the `showcase.dart` in the example.
## 🚀 Showcase
![]()
RotatingPlain
![]()
DoubleBounce
![]()
Wave
![]()
WanderingCubes
![]()
FadingFour
![]()
FadingCube
![]()
Pulse
![]()
ChasingDots
![]()
ThreeBounce
![]()
Circle
![]()
CubeGrid
![]()
FadingCircle
![]()
RotatingCircle
![]()
FoldingCube
![]()
PumpingHeart
![]()
HourGlass
![]()
PouringHourGlass
![]()
PouringHourGlassRefined
![]()
FadingGrid
![]()
Ring
![]()
Ripple
![]()
SpinningCircle
![]()
SpinningLines
![]()
SquareCircle
![]()
DualRing
![]()
PianoWave
![]()
DancingSquare
![]()
ThreeInOut
![]()
WaveSpinner
![]()
PulsingGrid
> Some GIF images gotten from [Android Spinkit](https://github.com/ybq/Android-SpinKit).
## 🐛 Bugs/Requests
If you encounter any problems feel free to open an issue. If you feel the library is
missing a feature, please raise a ticket on Github and I'll look into it.
Pull request are also welcome.### ❗️ Note
For help getting started with Flutter, view our online
[documentation](https://flutter.io/).For help on editing plugin code, view the [documentation](https://flutter.io/platform-plugins/#edit-code).
## ☀️ Authors
![]()
## ⭐️ License
MIT License