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.

								
									<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>