Loading Animation

In this example below you will see how to do a Loading Animation with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Cylthus, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Cylthus ©
  • HTML
  • CSS
  • JavaScript
    <div id="loading1">
	<center><p>Loading...</p></center>
	<div id="loadingBar1"></div>
</div>

<div id="loading2">
	<p>Loading</p>
	<div id="loadingBar2"></div>
</div>

<div id="load3">
	<div class="dot" id="dotone"></div>
	<div class="dot" id="dottwo"></div>
	<div class="dot" id="dotthree"></div>
</div>

/*Downloaded from https://www.codeseek.co/Cylthus/loading-animation-WMjObZ */
    #loading1{
	p{
		font-family: Sans-serif;
		width:300px;
		color:lightgrey;
		font-weight:bold;
	}
	#loadingBar1{
		height:3px;
		animation:2s linear loadbar1 infinite;
		background-color:
#ff755e;
	}
}
body,html{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
	margin:0px;
	flex-direction: column;
}
#loading2{
	width:75px;
	height:75px;
	margin-top:50px;
	border-radius:100%;
	border-top: 2px solid lightgrey;
	border-right: 2px solid lightgrey;
	border-bottom: 4px solid #ff755e;
	border-left: 4px solid #ff755e;
	display:flex;
	align-items:center;
	justify-content:center;
	animation:rotate .5s ease-in-out infinite;
	p{
		font-family:sans-serif;
		font-weight:bold;
		color:lightgrey;
		
	}
}

@keyframes loadbar1{
	0%{
		width:0px;
	}
	100%{
		width:300px;
	}
}
.dot{
	width:10px;
	height: 10px;
	background-color:lightgrey;
	border-radius:100%;
	margin-left:2px;
	margin-right:2px;
}
#dotone, #dottwo, #dotthree{
	animation: dothop 1s ease-in-out infinite;
}
#dottwo{
	animation-delay:.2s;
}
#dotthree{
	animation-delay:.4s;
}
#load3{
	margin-top:30px;
	display:flex;
	align-items:center;
	justify-content:center;
}
@keyframes rotate{
	0%{
		transform:rotate(0deg);
	}
	100%{
		transform:rotate(360deg);
	}
}

@keyframes dothop{
	25%{
		margin-top:-25px;
	}
	50%{
		margin-top:0px;
	}
	100%{
		margin-top:0px;
	}
}


/*Downloaded from https://www.codeseek.co/Cylthus/loading-animation-WMjObZ */
    

Comments