Spinner
An animated loading spinner component for indicating ongoing processes
An animated loading spinner component for indicating ongoing processes.
When to use this
- Loading states: Show that content or data is being loaded
- Processing: Indicate that a background process is running
- Async operations: Display during API calls or file uploads
- Indeterminate progress: When the completion time is unknown
Basic implementation
Basic implementation
import 'package:flutter/material.dart';
import 'package:remix/remix.dart';
class SpinnerExample extends StatelessWidget {
const SpinnerExample({super.key});
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
spacing: 16,
children: [
RemixSpinner(style: styleDefault),
RemixSpinner(style: styleWithTrack),
RemixSpinner(style: styleCustomColors),
],
);
}
RemixSpinnerStyle get styleDefault {
return RemixSpinnerStyle().indicatorColor(Colors.blue);
}
RemixSpinnerStyle get styleWithTrack {
return RemixSpinnerStyle()
.indicatorColor(Colors.green)
.trackColor(Colors.green.withValues(alpha: 0.2));
}
RemixSpinnerStyle get styleCustomColors {
return RemixSpinnerStyle()
.indicatorColor(Colors.redAccent)
.trackColor(Colors.red.withValues(alpha: 0.15))
.duration(2.s);
}
}
Fortal styles
Remix includes Fortal-themed style helpers for this component:
Fortal base style
import 'package:flutter/material.dart';
import 'package:remix/remix.dart';
class FortalSpinnerExample extends StatelessWidget {
const FortalSpinnerExample({super.key});
@override
Widget build(BuildContext context) {
return Row(
spacing: 16,
children: [
RemixSpinner(style: FortalSpinnerStyle.solid()),
RemixSpinner(style: FortalSpinnerStyle.soft()),
],
);
}
}
See the FortalSpinnerStyle source code for all available options.