Set up App Loading or Progress indicator using dialog box in Flutter

Ideally, the progress indicator is shown on top of everything, preventing the user from interacting with the UI.

we want is to display a context so that the user knows, what he is actually waiting for. So let’s add some descriptive text and put everything in a container to make it stand out from the rest of the widget.

Full code example below:

import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: ApplicationBase(), ); } } class ApplicationBase extends StatefulWidget { const ApplicationBase({Key? key}) : super(key: key); @override _ApplicationBaseState createState() => _ApplicationBaseState(); } class _ApplicationBaseState extends State<ApplicationBase> { int _counter = 0; // flutter thread to load data Future loadDataAsync() async { return Future.delayed(Duration(seconds: 5), () { setState(() { _counter++; }); }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("My Test App"), ), body: Center( child: Text('Count = $_counter') ), floatingActionButton: FloatingActionButton( onPressed: () { _onPressed(context); }, child: Icon(Icons.add), ), ); } void _onPressed(BuildContext context) async { // showing progress bar at dialog DialogBuilder(context).showLoadingIndicator(); // loading data in thread and using [await] to wait for completion of task await loadDataAsync(); // hiding dialog DialogBuilder(context).hideOpenDialog(); } } class DialogBuilder { DialogBuilder(this.context); final BuildContext context; void showLoadingIndicator() { showDialog( context: context, //disable disappear dialog on touch on screen barrierDismissible: false, builder: (BuildContext context) { return WillPopScope( //this will prevent close dialog on press back button onWillPop: () async => false, child: AlertDialog( shape: RoundedRectangleBorder( borderRadius: BorderRadius.all(Radius.circular(8.0)) ), backgroundColor: Colors.black87, content: Container( padding: EdgeInsets.all(16), color: Colors.black87, child: Column( mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.min, children: [ Padding( child: Container( child: CircularProgressIndicator( strokeWidth: 3 ), width: 40, height: 40 ), padding: EdgeInsets.only(bottom: 16) ), Padding( child: Text( 'Please wait ...', style: TextStyle( color: Colors.white, fontSize: 16 ), textAlign: TextAlign.center, ), padding: EdgeInsets.only(bottom: 4) ) ] ), ), ), ); }, ); } void hideOpenDialog() { //disappear dialog Navigator.of(context).pop(); } }

Now, what we have is something like that:

Stylish CSS3 Loader

Example

Html Content

<div class="load-more-option"></div>

CSS Content

<style type="text/css">
    .load-more-option, .load-more-option:before, .load-more-option:after {
        border-radius: 50%;
        width: 2.5em;
        height: 2.5em;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation: load_more_options 1.8s infinite ease-in-out;
        animation: load_more_options 1.8s infinite ease-in-out;
    }
    .load-more-option {
        color: #37829e;
        font-size: 10px;
        margin: 80px auto;
        position: relative;
        text-indent: -9999em;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-animation-delay: -0.16s;
        animation-delay: -0.16s;
    }
    .load-more-option:before, .load-more-option:after {
        content: '';
        position: absolute;
        top: 0;
    }
    .load-more-option:before {
        left: -3.5em;
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
    }
    .load-more-option:after {
        left: 3.5em;
    }
    @-webkit-keyframes load_more_options {
        0%,
        80%,
        100% {
            box-shadow: 0 2.5em 0 -1.3em;
        }
        40% {
            box-shadow: 0 2.5em 0 0;
        }
    }
    @keyframes load_more_options {
        0%,
        80%,
        100% {
            box-shadow: 0 2.5em 0 -1.3em;
        }
        40% {
            box-shadow: 0 2.5em 0 0;
        }
    }
</style>

Another Example Given Below

Example

HTML Content

<div class="loader"></div>
<div class="loader2"></div>

CSS Content

.loader {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid lightgray;
  border-top: 4px solid #3498db;
  border-bottom: 4px solid #3498db;
  animation: spinxxx 2s linear infinite;
  -webkit-animation: spinxxx 2s linear infinite;
}
.loader2{
  width: 80px;
  height: 80px;
  margin: 16px;
  margin-top: -107px;
  margin-left: 20px;
  border-radius: 50%;
  border: 4px solid lightgray;
  border-top: 4px solid #3498db;
  animation: spinxxx2 2s linear infinite;
  -webkit-animation: spinxxx2 2s linear infinite;
}

@-webkit-keyframes spinxxx {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spinxxx {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@-webkit-keyframes spinxxx2 {
  0% { -webkit-transform: rotate(360deg); }
  100% { -webkit-transform: rotate(0deg); }
}

@keyframes spinxxx2 {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}