Sharingan Loader in HTML & CSS for loading screen

 Sharingan as you may know,is strong prowress in Naruto world.In this world,we try to

replicate it using HTML and CSS only.

BASIC HTML STRUCTURE-

Starting with building the basic structure using HTML - 

<div class="sharingan">
		<div class="pupil"></div>
		<div class="iris"></div>
		<div class="tomoes">
			<div class="tomoe-area">
				<div class="tomoe"></div>
			</div>
			<div class="tomoe-area">
				<div class="tomoe"></div>
			</div>
			<div class="tomoe-area">
				<div class="tomoe"></div>
			</div>
		</div>
</div>

We create three divs for

• pupil region
• iris region
• And, of course tomoes region (that black spot that rotates). It also includes sub div- tomoe-area

We have our basic structure ready, now we can move on to styling this to give it a final touch.

Designing our Blank Structure 

Starting with Body, we set :

1. display to flex ,for responsiveness
2. margin,padding to 0 , as a customary :P
3. and,align all items to center

body{
	display: flex;
	width: 100%;
	height: 100vh;
	justify-content: center;
	align-items: center;
	background: #222;
}

For the pupil and iris ,we create an empty div and apply border-radius:50% to make it circular.

.pupil{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 80px;
	height: 80px;
	background: #000;
	border-radius: 50%;
	transform: translate(-50%,-50%);
	box-shadow: 0 0 100px 10px #000;
}

.iris{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 200px;
	transform: translate(-50%,-50%);
	border: 1px solid #000;
	border-radius: 50%;
}

Now for the tomoes we need to create an animation,and for that we'll create a keyframe : rotateIris

.tomoes{
	height: 100%;
	width: 100%;
	animation: rotateIris 1.4s infinite;
}

@keyframes rotateIris{
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(360deg);
	}
}

Now,for the interesting part and as no symbol is present for tomoe, we create our tomoe using a particular set of values-

.tomoe::before{
	content: '';
	position: absolute;
	top: -30.3%;
	left: 3.1%;
	width: calc(var(--tomoe-size) * 1.51);
	height: calc(var(--tomoe-size) * 1.69);
	border-radius: 50%;
	border-top: calc(var(--tomoe-size) / 2.6) solid #000;
	border-left: calc(var(--tomoe-size) / 9.7) solid transparent;
	transform: rotate(-35deg);
}

And now as we need the same tomoe in three different location, we use CSS property of nth child -

.tomoe-area:first-child{
	transform: translate(-50%,-50%);
}
.tomoe-area:nth-child(2){
	transform: translate(-50%,-50%) rotate(120deg);
}
.tomoe-area:nth-child(3){
	transform: translate(-50%,-50%) rotate(-120deg);
}

Live Demo and Source Code -

Now we are finally done with our code. Let's have a look at our live demo-

⭐ Source Code - Github

There are lots of possibilities for creating interesting effects and experiences with CSS, which is one of the reasons why I love working with it so much. It’s thrilling and rewarding to implement an idea that was hitherto just that — an idea.

Have feedback? Let me know; I’d be happy to hear it  colonsemy@gmail.com

Written by Coding Attack