Custom Loading Indicators in Flutter using SpinKit

By default, people use Circular Progress Indicator in their flutter applications which is inside the material package. But we can use custom animated loading indicators in flutter using a plugin Flutter Spinkit.

We will see all the available loading animated indicators in this article. First, we need to add the plugin in the pubspec.yaml file under dependencies.

Flutter Spinkit Plugin:

Flutter SpinKit Dependency

Then, we have to import that package into our program file for using it in our code.

importing spinkit package

For this example, we will just create an appbar with the title “Spinkit” and the list of animated loading indicators.

Simple code for demonstrating spinkit

In the above example, we have just set the background color as blue and created an appBar and then placed the loading indicator in the center.

There are lot more loading indicators in this package. All of those are listed below for easy access.

  1. SpinKitRotatingCircle(color: Colors.white)

2. SpinKitRotatingPlain(color: Colors.white)

3. SpinKitChasingDots(color: Colors.white)

4. SpinKitPumpingHeart(color: Colors.white)

5. SpinKitPulse(color: Colors.white)

6. SpinKitDoubleBounce(color: Colors.white)

7. SpinKitWave(color: Colors.white, type: SpinKitWaveType.start)

8. SpinKitWanderingCubes(color: Colors.white)

9. SpinKitThreeBounce(color: Colors.white)

10. SpinKitFadingFour(color: Colors.white)

11. SpinKitCircle(color: Colors.white)

12. SpinKitFadingCube(color: Colors.white)

13. SpinKitCubeGrid(color: Colors.white)

14. SpinKitFoldingCube(color: Colors.white)

15. SpinKitRing(color: Colors.white)

16. SpinKitDualRing(color: Colors.white)

17. SpinKitRipple(color: Colors.white)

18. SpinKitFadingGrid(color: Colors.white)

19. SpinKitHourGlass(color: Colors.white)

20. SpinKitSpinningCircle(color: Colors.white),

21. SpinKitFadingCircle(color: Colors.white)

22. SpinKitPouringHourglass(color: Colors.white)

The entire SpinKit loading indicators Code has been written in here.


The end.




Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Create your own Wordcloud in Python

Why I make music — and how it teaches me to build better software

How to render an array of data in Vue

Another Eden Hack NEW — Get Unlimited gold and chrono stones [Android & iOS]

Working with the Github API for the first time! A beginners tale …

Serverless Data Procesing


Basic JavaScript Design Patterns — Decorators, Facades, and Proxies

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Vishnuvarshan P

Vishnuvarshan P

More from Medium

Importance of Flutter State Management

How to Maintain Browser Data in Flutter Web Between Chrome Runs?

Why should you use Flutter?


Flutter Journey….