Simple inline ellipsis loader

Pure css ellipsis loader

by UDany

HTML

<p>
  <span class="ellipsis-loader">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </span>
</p>

<h1>
  <span class="ellipsis-loader">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </span>
</h1>

SCSS

body {
  text-align: center;
}

.ellipsis-loader {
	display: inline-block;
	height: 1em;

	.dot {
		display: inline-block;
		border-radius: 50%;
		height: .4em;
		width: .4em;
		margin-bottom: .3em;

		background: #90939E;
		opacity: .1;
		transform: scale(1);

		+ .dot { margin-left: .3em; }

		animation: ellipsis-loader-dot;
		animation-duration: 1s;
		animation-iteration-count: infinite;

		&:nth-child(2) { animation-delay: .3s; }
		&:nth-child(3) { animation-delay: .6s; }
	}
}

@keyframes ellipsis-loader-dot {
	0% { opacity: .2; transform: scale(1); }

	30% { opacity: 1; transform: scale(1.2); }
	40% { opacity: 1; transform: scale(1.2); }

	90% { opacity: .2; transform: scale(1); }
}