Loaders

A simple yet versatile animated spinner component.

Examples

								
									<div class="loader loader-lg"></div>
									<div class="loader"></div>
									<div class="loader loader-sm"></div>
								
							
Colors

Using Bootstrap’s typical naming structure, you can create colored loaders depending on your needs.

								
									<div class="loader loader-primary"></div>
									<div class="loader loader-secondary"></div>
									<div class="loader loader-info"></div>
									<div class="loader loader-success"></div>
									<div class="loader loader-warning"></div>
									<div class="loader loader-danger"></div>
								
							
Loader helper

Indicate loading state of nearly any component with an .is-loading modifier.

Loading card

Card content
								
									<div class="card">
									<div class="card-header">
										<h4 class="card-title">
											Loading card
										</h4>
									</div>
									<div class="card-body is-loading is-loading-lg">
										Card content
									</div>
								</div>

								<div class="text-center">
									<a href="#" class="btn btn-lg btn-primary is-loading">
										Button
									</a>

									<a href="#" class="btn btn-white is-loading is-loading-sm">
										Button
									</a>
								</div>