JSFiddle - React, Tailwind, and code Playground

by amitrdx

HTML

<div class="loading-animation" style="display: block;">
				<div class="msanim-spinner">
					<span class="side side-left">
						<span class="fill"></span>
					</span>
					<span class="side side-right">
						<span class="fill"></span>
					</span>
				</div>
				<div class="msanim-spinner-after" data-msanim-tablet-bgsrc="bgSm" data-msanim-desktop-bgsrc="bg" style="background-image: url(http://www.microsoft.com/microsoft-hololens/Assets/img/anim/home/HeroRoom_bg_md.jpg);/* background: transparent; */"></div>
			</div>

CSS

.msanim-spinner-after {
  content: "";
  background: white;
  background-position: center center;
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  top: 4px;
  left: 4px;
  display: block;
}
[data-msanim] .loading-animation {
  position: absolute;
  z-index: 100;
  top: 50%;
  left: 50%;
  margin: -16px 0 0 -16px;
}
.msanim-spinner {
  position: relative;
  border-radius: 100%;
  width: 32px;
  height: 32px;
  background: #dddddd;
}
.msanim-spinner .side-left {
  left: 0;
}
.msanim-spinner .side {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
}
.msanim-spinner .side-right {
  left: 50%;
}
.msanim-spinner .side {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
}