@uiowa/spinner
v21.0.0
Published
(action-spinner) rotating circle spinner, used for actions such as button clicks. (loading-bar) beeping blocks, used for loading promises. (uiowa-ring) rotating golden and black spinner, used as loading indicator.
Readme
@uiowa/spinner
CHANGELOG
- v21 Angular 19+; standalone components
- v19 Angular 19+
- v13 Angular 13+
- v12 Angular 12+
- v10 Angular 10+
- v6 Angular 6+
DEMO
This library only contains three components and doesn't have third party dependencies.
Components
action-spinnerRotating circles. Used for action promise or waiting for page rendering. Allow to set spinner size. By default, size is 1rem.
loading-barBeeping blocks. Used for server side data loading. Allow to set spinner size. By default, size is 1rem.
uiowa-ringRotating spinner with Golden and Black colors. Used as loading indicator. Allow to set spinner size. By default, size is 4rem.
loading-placeholderCarousel style one stripe spinner in a white background with box shadow. Allow to fit the parent container.
Usage
<div>
<action-spinner />
</div>
<div>
<action-spinner size="2" />
</div>
<div>
<action-spinner size="9" />
</div>
Loading... <loading-bar />
Loading... <loading-bar size="1.5" />
<div style="color:red;">
<span style="font-size:2rem;">Validating ...</span>
<loading-bar size="2" />
</div>
<h2>Title2 <action-spinner size="1.25" /></h2>
<uiowa-ring /> // default size = 4rem
<uiowa-ring size="2" />
<div style="height: 100px">
<loading-placeholder />
</div>@NgModule({
declarations: [...],
imports: [...,
ActionSpinner,
LoadingBar,
LoadingPlaceholder,
UiowaRing], // import as needed
providers: []
})
export class App {}