Loading indicators are an important part of making a mobile experience look and feel smooth and professional. A lot of developers use built-in progress bars or spinners, but custom animations can make your app look different, help with branding, and make it feel like it’s flowing.<\/p>\n
This guide will show you how to use Jetpack Compose (for Android) and Flutter to make a more complex custom loading animation for mobile apps. The goal is to make a fun-to-watch multi-ring spinner animation that spins in different directions, at different speeds, and with arcs of different shapes. Your UI will look fresh and new with this.<\/p>\n
A good loading animation will give you<\/p>\n
People believe they don’t have to wait as long.<\/p>\n
You can make complicated animated parts with very little code using Jetpack Compose<\/strong> and Flutter<\/strong>, two modern UI frameworks.<\/p>\n Developers can make UI in a declarative way with Jetpack Compose and use powerful APIs to add animations. We want to make a spinner with a lot of rings that are stacked on top of each other and spin by themselves.<\/p>\n First, we discuss the features of each animated ring:<\/p>\n Radius<\/p>\n<\/li>\n Color<\/p>\n<\/li>\n Stroke width<\/p>\n<\/li>\n Opacity<\/p>\n<\/li>\n Arc length<\/p>\n<\/li>\n Direction of rotation<\/p>\n<\/li>\n Rotation speed<\/p>\n<\/li>\n<\/ul>\n These properties allow full customization for each ring in the spinner.<\/p>\n RingConfig Model<\/strong><\/p>\n For smooth animations that never end, Compose has rememberInfiniteTransition<\/strong>.<\/p>\n Each ring has its own float animation that shows how it turns:<\/p>\n Independent rotation for each ring<\/p>\n<\/li>\n Control over speed and direction<\/p>\n<\/li>\n Smooth, continuous animation<\/p>\n<\/li>\n<\/ul>\n There are dashed arcs and a rotating effect on the rings drawn on Canvas.<\/p>\n This setup allows:<\/p>\n These pieces work together to make a loading animation that looks great and works well with Android apps that are up to date.<\/p>\n Spinner Composable Function<\/strong><\/p>\n <\/p>\n MainActivity.kt<\/strong><\/p>\n <\/p>\n Flutter has its own animation system that is based on controllers and custom painters, but it works in a similar way to declarative programming.<\/p>\n Check out the code below:<\/p>\n RingConfig.dart <\/strong>Model Class<\/p>\n <\/p>\n main.dart<\/strong><\/p>\nJetpack Compose for Android lets you make your own loading animation.<\/h3>\n
1. Model for Setting Up a Ring<\/h5>\n
\n
\r\ndata class RingConfig(\r\n val id: String,\r\n val radius: Float,\r\n val color: Color,\r\n val strokeWidth: Float,\r\n val opacity: Float,\r\n val arcLength: Float,\r\n val direction: Int, \/\/ +1 or -1\r\n val speed: Float \/\/ seconds per rotation\r\n)\r\n <\/code><\/pre>\n<\/div>\n2. Creating the Custom Loading Animation<\/h5>\n
\n
3. Drawing on a Canvas<\/h5>\n
\n
\r\n\r\n@Composable\r\nfun Loading(\r\n rings: List,\r\n size: Dp = 400.dp\r\n) {\r\n \/\/ All animations must be created here, NOT inside Canvas\r\n val transition = rememberInfiniteTransition()\r\n\r\n \/\/ Pre-calc animations for each ring\r\n val rotations = rings.map { ring ->\r\n transition.animateFloat(\r\n initialValue = 0f,\r\n targetValue = ring.direction * 360f,\r\n animationSpec = infiniteRepeatable(\r\n animation = tween(\r\n durationMillis = (ring.speed * 1000).toInt(),\r\n easing = LinearEasing\r\n ),\r\n repeatMode = RepeatMode.Restart\r\n )\r\n )\r\n }\r\n\r\n Box(\r\n modifier = Modifier.size(size),\r\n ) {\r\n Canvas(modifier = Modifier.fillMaxSize()) {\r\n\r\n val center = Offset(this.size.width \/ 2, this.size.height \/ 2)\r\n\r\n rings.forEachIndexed { index, ring ->\r\n val rotation = rotations[index].value\r\n\r\n val circumference = 2f * PI.toFloat() * ring.radius\r\n val dashArray = circumference * ring.arcLength\r\n val dashGap = circumference - dashArray\r\n\r\n rotate(rotation, pivot = center) {\r\n drawCircle(\r\n color = ring.color.copy(alpha = ring.opacity),\r\n radius = ring.radius,\r\n center = center,\r\n style = Stroke(\r\n width = ring.strokeWidth,\r\n cap = StrokeCap.Round,\r\n pathEffect = PathEffect.dashPathEffect(\r\n floatArrayOf(dashArray, dashGap),\r\n phase = 0f\r\n )\r\n )\r\n )\r\n }\r\n }\r\n }\r\n }\r\n}\r\n<\/code><\/pre>\n<\/div>\nHow to use this Loading Composable Function<\/h3>\n
\r\nclass MainActivity : ComponentActivity() {\r\n override fun onCreate(savedInstanceState: Bundle?) {\r\n super.onCreate(savedInstanceState)\r\n enableEdgeToEdge()\r\n setContent {\r\n LoaderTheme {\r\n CustomSpinLoading()\r\n }\r\n }\r\n }\r\n}\r\n\r\n@Composable\r\nfun CustomSpinLoading() {\r\n val rings = listOf(\r\n RingConfig(\r\n id = \"a\",\r\n radius = 50f,\r\n color = Color.Black,\r\n strokeWidth = 14f,\r\n opacity = 1f,\r\n arcLength = 0.6f,\r\n direction = -1,\r\n speed = 6f\r\n ),\r\n RingConfig(\r\n id = \"b\",\r\n radius = 80f,\r\n color = Color.Red,\r\n strokeWidth = 14f,\r\n opacity = 1f,\r\n arcLength = 0.8f,\r\n direction = 1,\r\n speed = 8f\r\n ),\r\n RingConfig(\r\n id = \"c\",\r\n radius = 120f,\r\n color = Color.Blue,\r\n strokeWidth = 14f,\r\n opacity = 0.9f,\r\n arcLength = 0.6f,\r\n direction = -1,\r\n speed = 9f\r\n ),\r\n RingConfig(\r\n id = \"d\",\r\n radius = 160f,\r\n color = Color.Green,\r\n strokeWidth = 14f,\r\n opacity = 0.8f,\r\n arcLength = 0.5f,\r\n direction = 1,\r\n speed = 9f\r\n ),\r\n\r\n RingConfig(\r\n id = \"e\",\r\n radius = 200f,\r\n color = Color.Cyan,\r\n strokeWidth = 14f,\r\n opacity = 0.8f,\r\n arcLength = 0.4f,\r\n direction = -1,\r\n speed = 8f\r\n )\r\n )\r\n\r\n Loading(rings = rings, size = 400.dp)\r\n}\r\n <\/code><\/pre>\n
\n\ud83d\udfe9 Flutter Loading Animation That You Can Change<\/h3>\n
\r\nclass RingConfig {\r\nfinal String id;\r\nfinal double radius;\r\nfinal Color color;\r\nfinal double strokeWidth;\r\nfinal double opacity;\r\nfinal double arcLength;\r\nfinal int direction; \/\/ +1 or -1\r\nfinal double speed; \/\/ seconds per rotation\r\n\r\nRingConfig({\r\nrequired this.id,\r\nrequired this.radius,\r\nrequired this.color,\r\nrequired this.strokeWidth,\r\nrequired this.opacity,\r\nrequired this.arcLength,\r\nrequired this.direction,\r\nrequired this.speed,\r\n});\r\n}\r\n<\/code><\/pre>\n
\nDrawing with CustomPainter<\/strong><\/p>\n \r\nimport 'dart:math';\r\nimport 'package:flutter\/cupertino.dart';\r\nimport 'RingConfig.dart';\r\n\r\nclass LoadingPainter extends CustomPainter {\r\nfinal List<RingConfig> rings;\r\nfinal List<Animation<double>> rotations;\r\n\r\nLoadingPainter(this.rings, this.rotations);\r\n\r\n@override\r\nvoid paint(Canvas canvas, Size size) {\r\nfinal center = Offset(size.width \/ 2, size.height \/ 2);\r\n\r\nfor (int i = 0; i < rings.length; i++) {\r\nfinal ring = rings[i];\r\nfinal rotation = rotations[i].value;\r\n\r\nfinal paint = Paint()\r\n..color = ring.color.withValues()\r\n..style = PaintingStyle.stroke\r\n..strokeWidth = ring.strokeWidth\r\n..strokeCap = StrokeCap.round;\r\n\r\nfinal circumference = 2 * pi * ring.radius;\r\nfinal dashLength = circumference * ring.arcLength;\r\nfinal dashGap = circumference - dashLength;\r\n\r\nfinal circlePath = Path()\r\n..addOval(Rect.fromCircle(center: center, radius: ring.radius));\r\n\r\nfinal dashedPath = _dashPath(circlePath, dashLength, dashGap);\r\n\r\ncanvas.save();\r\ncanvas.translate(center.dx, center.dy);\r\ncanvas.rotate(rotation * pi \/ 180);\r\ncanvas.translate(-center.dx, -center.dy);\r\n\r\ncanvas.drawPath(dashedPath, paint);\r\n\r\ncanvas.restore();\r\n}\r\n}\r\n\r\n@override\r\nbool shouldRepaint(covariant CustomPainter oldDelegate) => true;\r\n}\r\n\r\nPath _dashPath(Path source, double dashLength, double dashGap) {\r\nfinal Path dest = Path();\r\ndouble distance = 0.0;\r\n\r\nfor (final metric in source.computeMetrics()) {\r\nwhile (distance < metric.length) {\r\nfinal next = distance + dashLength;\r\ndest.addPath(metric.extractPath(distance, next), Offset.zero);\r\ndistance = next + dashGap;\r\n}\r\ndistance = 0.0;\r\n}\r\nreturn dest;\r\n}\r\n<\/code><\/pre>\n
\nCustom Loading Widget<\/strong><\/p>\n\r\nimport 'package:flutter\/cupertino.dart';\r\nimport 'RingConfig.dart';\r\nimport 'LoadingPainter.dart';\r\nimport 'package:flutter\/material.dart';\r\n\r\n\r\nclass Loading extends StatefulWidget {\r\n final List<RingConfig> rings;\r\n final double size;\r\n\r\n const Loading({super.key, required this.rings, this.size = 400});\r\n\r\n @override\r\n State<Loading> createState() => _LoadingState();\r\n}\r\n\r\nclass _LoadingState extends State<Loading> with TickerProviderStateMixin {\r\n late List<AnimationController> controllers;\r\n late List<Animation<double>> rotations;\r\n\r\n @override\r\n void initState() {\r\n super.initState();\r\n\r\n controllers = widget.rings.map((ring) {\r\n return AnimationController(\r\n duration: Duration(milliseconds: (ring.speed * 1000).toInt()),\r\n vsync: this,\r\n )..repeat();\r\n }).toList();\r\n\r\n rotations = List.generate(\r\n widget.rings.length,\r\n (i) => Tween<double>(\r\n begin: 0,\r\n end: widget.rings[i].direction * 360,\r\n ).animate(controllers[i]),\r\n );\r\n }\r\n\r\n @override\r\n void dispose() {\r\n for (var controller in controllers) {\r\n controller.dispose();\r\n }\r\n super.dispose();\r\n }\r\n\r\n @override\r\n Widget build(BuildContext context) {\r\n return SizedBox(\r\n width: widget.size,\r\n height: widget.size,\r\n child: AnimatedBuilder(\r\n animation: Listenable.merge(controllers),\r\n builder: (_, __) {\r\n return CustomPaint(painter: LoadingPainter(widget.rings, rotations));\r\n },\r\n ),\r\n );\r\n }\r\n}\r\n<\/code><\/pre>\nHow to use this Loading widget in Flutter?<\/h3>\n
\r\nimport 'package:flutter\/material.dart';\r\n\r\nimport 'RingConfig.dart';\r\nimport 'Loading.dart';\r\n\r\nvoid main() {\r\n runApp(const MyApp());\r\n}\r\n\r\nclass MyApp extends StatelessWidget {\r\n const MyApp({super.key});\r\n\r\n \/\/ This widget is the root of your application.\r\n @override\r\n Widget build(BuildContext context) {\r\n return MaterialApp(\r\n title: 'Custom Loading',\r\n theme: ThemeData(\r\n colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),\r\n ),\r\n home: const MyHomePage(title: 'Loading Animation'),\r\n );\r\n }\r\n}\r\n\r\nclass MyHomePage extends StatefulWidget {\r\n const MyHomePage({super.key, required this.title});\r\n\r\n final String title;\r\n\r\n @override\r\n State<MyHomePage> createState() => _MyHomePageState();\r\n}\r\n\r\nclass _MyHomePageState extends State<MyHomePage> {\r\n @override\r\n Widget build(BuildContext context) {\r\n final rings = [\r\n RingConfig(\r\n id: \"a\",\r\n radius: 25,\r\n color: Colors.black,\r\n strokeWidth: 8,\r\n opacity: 1,\r\n arcLength: 0.6,\r\n direction: -1,\r\n speed: 6,\r\n ),\r\n RingConfig(\r\n id: \"b\",\r\n radius: 40,\r\n color: Colors.red,\r\n strokeWidth: 8,\r\n opacity: 1,\r\n arcLength: 0.8,\r\n direction: 1,\r\n speed: 8,\r\n ),\r\n RingConfig(\r\n id: \"c\",\r\n radius: 60,\r\n color: Colors.blue,\r\n strokeWidth: 8,\r\n opacity: 0.9,\r\n arcLength: 0.6,\r\n direction: -1,\r\n speed: 9,\r\n ),\r\n RingConfig(\r\n id: \"d\",\r\n radius: 80,\r\n color: Colors.green,\r\n strokeWidth: 8,\r\n opacity: 0.8,\r\n arcLength: 0.5,\r\n direction: 1,\r\n speed: 9,\r\n ),\r\n RingConfig(\r\n id: \"e\",\r\n radius: 100,\r\n color: Colors.cyan,\r\n strokeWidth: 8,\r\n opacity: 0.8,\r\n arcLength: 0.4,\r\n direction: -1,\r\n speed: 8,\r\n ),\r\n ];\r\n\r\n return Scaffold(\r\n backgroundColor: Colors.white,\r\n body: Center(child: Loading(rings: rings, size: 400)),\r\n );\r\n }\r\n}\r\n<\/code><\/pre>\n
\n