ProgressSpinner is a circular indicator for an ongoing operation. Use indeterminate mode when the remaining time is unknown, or determinate mode with a 0-100 value when progress is known. Use ProgressBar for linear progress, Skeleton for known loading layouts, PageLoadingBar for route loading, and BlockLoader or ScreenLoader for blocking loading states.
Getting Started
Forms
Components
78
Action Required
Alert
Announcement
Avatar
Badge
Block Loader
Bottom Sheet
Calendar
Card
Card Overlay
Carousel
Chips
Code Highlighter
Color Picker
Color Switcher
Command Bar
Comment Editor
Comparison Slider
Confirm
Cookie Popup
Crop
Datepicker
Dialog
Digit Roller
Divider
Drawer
Emoji Picker
Empty State
Events
Expand
Expansion Panel
File Type
Filter Builder
Gauge
Grid
Guided Tour
Headless Stepper
Icon
Image Placeholder
Image Resizer
Image Viewer
Image Zoom Viewer
Incidents
Keyboard
Layout
List
Marquee
Menu
Notifications
Paginator
Popover
Progress Bar
Progress Spinner
Resizable Container
Screen Loader
Sidenav
Signature Pad
Skeleton
Slider
Snackbar
Sort
Split Pane
Step Tracker
Stepper
Suggestions
Table
Tabs
Thumbnail Maker
Tiles
Timeline
Timepicker
Toolbar
Tooltip
Tree
Typed Signature Pad
Upload
Video Viewer
Libraries
Progress Spinner
The NgStarter Angular Spinner component lets you show a circular indicator for an ongoing operation. Use ngs-progress-spinner when a compact circular loading indicator is needed inside a button, overlay, media viewer, widget, small page area, or next to an action. It includes examples for Basic Progress Spinner, Configurable Progress Spinner, and Configurable spinner.
Basic Progress Spinner
Use the basic spinner for compact loading states inside buttons, overlays, media viewers, widgets, or small page areas.
Configurable Progress Spinner
Configure mode, value, color, diameter, and stroke width when the spinner needs to match the operation scope or show known progress.
Progress spinner configuration
Result: