HTML and CSS Pre-Loader (Two in One)

HTML and CSS Pre-Loader (Two in One)

Website preloader making is not a difficult task so it can be make by using only HTML and CSS.

So this preloader is made using css properties and it has two in one animations.

to switching animation just comment and uncomment a part of css code.

Watch Video Tutorial

https://youtu.be/3TK8R7q1rvc

Live Preview.!

HTML Code

<div class="pre-loader">
  <div class="segment">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
  </div>
  <div class="segment">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
  </div>
  <div class="segment">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
  </div>
  <div class="segment">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
  </div>
  <div class="segment">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
  </div>
  <div class="segment">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
  </div>
  <div class="segment">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
  </div>
  <div class="segment">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
  </div>
  <div class="segment">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
  </div>
</div>

CSS Code

.pre-loader{
	width: 80px;
	height: 80px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	overflow: hidden;
	animation: animationTwo 5s linear infinite alternate-reverse;
}
.pre-loader .segment{
	width: 10px;
	height: 50%;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	transform-origin: bottom;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 10px;
	box-sizing: border-box;
}
.segment:nth-child(2){
	transform: translateX(-50%) rotate(45deg);
}
.segment:nth-child(3){
	transform: translateX(-50%) rotate(90deg);
}
.segment:nth-child(4){
	transform: translateX(-50%) rotate(135deg);
}
.segment:nth-child(5){
	transform: translateX(-50%) rotate(180deg);
}
.segment:nth-child(6){
	transform: translateX(-50%) rotate(225deg);
}
.segment:nth-child(7){
	transform: translateX(-50%) rotate(270deg);
}
.segment:nth-child(8){
	transform: translateX(-50%) rotate(315deg);
}
.segment span{
	width: 5px;
	height: 5px;
	border-radius: 50%;
	visibility: hidden;
	animation: animationOne 0.8s linear infinite;
}
/* Animation One */
.segment:nth-child(1) span{
	background: red;
	animation-delay: 0.1s;
}
.segment:nth-child(2) span{
	background: yellow;
	animation-delay: 0.2s;
}
.segment:nth-child(3) span{
	background: pink;
	animation-delay: 0.3s;
}
.segment:nth-child(4) span{
	background: purple;
	animation-delay: 0.4s;
}
.segment:nth-child(5) span{
	background: blue;
	animation-delay: 0.5s;
}
.segment:nth-child(6) span{
	background: brown;
	animation-delay: 0.6s;
}
.segment:nth-child(7) span{
	background: green;
	animation-delay: 0.7s;
}
.segment:nth-child(8) span{
	background: orange;
	animation-delay: 0.8s;
}
/* Animation Two */
.segment > span:nth-child(1) {
	animation-delay: 0.9s;
}
.segment > span:nth-child(2){
	animation-delay: 1s;
}
.segment > span:nth-child(3){
	animation-delay: 1.1s;
}
.segment > span:nth-child(4){
	animation-delay: 1.2s;
}
.segment > span:nth-child(5){
	animation-delay: 1.3s;
}
@keyframes animationOne{
	0%{
		visibility: visible;
		opacity: 1;
	}
	50%{
		visibility: hidden;
	}
	75%{
		visibility: visible;
	}
	100%{
		visibility: hidden;
		opacity: 0;
	}
}
@keyframes animationTwo{
	0%{
		transform: translate(-50%, -50%) rotate(0deg);
	}
	100%{
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

Simple Calculator using HTML CSS and JavaScript

Random Winner Picker System in JavaScript

Quote Maker UI Design in Adobe XD

Convert Quote Maker UI Design into HTML CSS