Author : MD TAREQ HASSAN | Updated : 2021/01/17

Using SpinKit

Put css link in html head

<link href="css/spinkit.min.css" rel="stylesheet" />
<!-- or -->
<link href="https://raw.githubusercontent.com/tobiasahlin/SpinKit/master/spinkit.min.css" rel="stylesheet" />

Usage

<app>
	<div class="container d-flex min-vh-100">
		<div class="m-auto">
			<div class="sk-circle sk-center mb-sm-3">
				<div class="sk-circle-dot"></div>
				<div class="sk-circle-dot"></div>
				<div class="sk-circle-dot"></div>
				<div class="sk-circle-dot"></div>
				<div class="sk-circle-dot"></div>
				<div class="sk-circle-dot"></div>
				<div class="sk-circle-dot"></div>
				<div class="sk-circle-dot"></div>
				<div class="sk-circle-dot"></div>
				<div class="sk-circle-dot"></div>
				<div class="sk-circle-dot"></div>
				<div class="sk-circle-dot"></div>
			</div>
			<h2 class="text-sm-center">loading...</h2>
		</div>
	</div>
</app>

Simple spinner

Courtesy: https://stephanwagner.me/only-css-loading-spinner

@keyframes spinner {
  to {transform: rotate(360deg);}
}
 
.spinner:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #000;
  animation: spinner .6s linear infinite;
}

Usage

<div class="spinner"></div>

Using FontAwesome

<p class="h2"><i class="fas fa-spin fa-spinner"></i>loading...</p>

Other solutions