Square loading icons

Developer
Khalkeus
Size
2,249 Kb
Views
8,096
  1. Square loading icons Previews
  2. Square loading icons HTML Codes
  3. Square loading icons CSS Codes

How do I make an square loading icons?

Wanted to dip my toe into css animation. What is a square loading icons? How do you make a square loading icons? This script and codes were developed by Khalkeus on 11 November 2022, Friday.

Square loading icons Previews
IQ Test

Square loading icons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>square loading icons</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="holder">	<div class="inner">	<div class="square" style="animation-name: rotate;"></div>	<div class="square" style="animation-name: rotate2;"></div>	<div class="square" style="animation-name: rotate3;"></div>	</div>	<div class="inner">	<div class="square" style="animation-name: squarecircle;"></div>	</div>	<div class="inner">	<div class="square" style=" animation-name: threed;"></div>	<div class="square" style=" animation-name: threed2;"></div>	</div>	<div class="inner">	<div class="square" style=" animation-name: scale; animation-duration: 2.5s;"></div>	<div class="square" style=" animation-name: none;"></div>	</div>	<div class="inner">	<div class="square" style=" animation-name: pulse; animation-duration: 1s; width: 2px; height: 2px; margin-left: 30px; margin-top: 30px; animation-delay: 0s;"></div>	<div class="square" style=" animation-name: pulse; animation-duration: 1s; width: 2px; height: 2px; margin-left: 40px; margin-top: 30px; animation-delay: .1s;"></div>	<div class="square" style=" animation-name: pulse; animation-duration: 1s; width: 2px; height: 2px; margin-left: 50px; margin-top: 30px; animation-delay: .2s;"></div>	<div class="square" style=" animation-name: pulse; animation-duration: 1s; width: 2px; height: 2px; margin-left: 30px; margin-top: 40px; animation-delay: .7s;"></div>	<div class="square" style=" animation-name: pulse; animation-duration: 1s; width: 2px; height: 2px; margin-left: 50px; margin-top: 40px; animation-delay: .3s;"></div>	<div class="square" style=" animation-name: pulse; animation-duration: 1s; width: 2px; height: 2px; margin-left: 30px; margin-top: 50px; animation-delay: .6s;"></div>	<div class="square" style=" animation-name: pulse; animation-duration: 1s; width: 2px; height: 2px; margin-left: 40px; margin-top: 50px; animation-delay: .5s;"></div>	<div class="square" style=" animation-name: pulse; animation-duration: 1s; width: 2px; height: 2px; margin-left: 50px; margin-top: 50px; animation-delay: .4s;"></div>	</div>	<div class="inner">	<div class="cube">	<div class="square" style=" animation-name: rot; animation-duration: 2.5s"></div>	<div class="square" style=" animation-name: rot; animation-duration: 2.5s; animation-direction: reverse;"></div>	</div>	</div>	<div class="inner">	<div class="square" style=" animation-name: scaleside;"></div>	</div>	<div class="inner">	<div class="square" style=" animation-name: rotscale;"></div>	</div>	<div class="inner">	<div class="square" style=" animation-name: cornerrot; transform-origin: top left;"></div>	<div class="square" style=" animation-name: cornerrot; transform-origin: top right;"></div>	<div class="square" style=" animation-name: cornerrot; transform-origin: bottom left;"></div>	<div class="square" style=" animation-name: cornerrot; transform-origin: bottom right;"></div>	</div>
</div>
</body>
</html>

Square loading icons - Script Codes CSS Codes

html, body{	width: 100%;	height: 100%;	overflow: hidden;	margin: 0px;	padding: 0px;	background: black;
}
.holder{	width: 320px;	height: 320px;	position: absolute;	top: 50%;	left: 50%;	margin: -160px 0 0 -160px;	display: grid;	grid-gap: 10px;	grid-template-columns: 100px 100px 100px;	grid-auto-rows: minmax(100px, auto);
}
.inner{	border: 3px solid white;
}
@keyframes rotate{	0%{	transform: rotate(0deg);	}	20%{	/*transform: rotate(180deg);*/	}	40%{	transform: rotate(360deg);	}	100%{	transform: rotate(360deg);	}
}
@keyframes rotate2{	0%{	transform: rotate(0deg);	}	40%{	/*transform: rotate(180deg);*/	}	80%{	transform: rotate(360deg);	}	100%{	transform: rotate(360deg);	}
}
@keyframes rotate3{	0%{	transform: rotate(0deg);	}	30%{	/*transform: rotate(180deg);*/	}	60%{	transform: rotate(360deg);	}	100%{	transform: rotate(360deg);	}
}
@keyframes squarecircle{	0%{	border-radius: 0;	transform: rotate(0deg);	}	50%{	border-radius: 20px;	transform: rotate(180deg);	}	100%{	border-radius: 0;	transform: rotate(360deg);	}
}
@keyframes threed{	0%{	transform: rotate3d(1, 0, 0, 0deg);	}	100%{	transform: rotate3d(1, 0, 0, 360deg);	}
}
@keyframes threed2{	0%{	transform: rotate3d(0, 1, 0, 0deg);	}	100%{	transform: rotate3d(0, 1, 0, 360deg);	}
}
@keyframes scale{	0%{	transform: scale(1) rotate(0deg);	}	100%{	transform: scale(0) rotate(180deg);	}
}
@keyframes pulse{	0%{	transform: scale(1);	}	50%{	transform: scale(0);	}	100%{	transform: scale(1);	}
}
@keyframes rot{	0%{	transform: rotate(0deg);	}	100%{	transform: rotate(90deg);	}
}
@keyframes scaleside{	0%{	transform: scale(1, 1);	}	25%{	transform: scale(1, .2);	}	50%{	transform: scale(.2, .2);	}	75%{	transform: scale(.2, 1);	}	100%{	transform: scale(1, 1);	}
}
@keyframes rotscale{	0%{	transform: rotate(0deg) scale(1);	}	50%{	transform: rotate(180deg) scale(0);	}	100%{	transform: rotate(360deg) scale(1);	}
}
@keyframes cornerrot{	0%{	transform: rotate(0deg);	}	50%{	transform: rotate(90deg);	}	100%{	transform: rotate(0deg);	}
}
.square{	width: 20px;	height: 20px;	margin: 34px;	border: 3px solid white;	position: fixed;	transform: rotate(0deg);	animation-duration: 5s;	animation-iteration-count: infinite;	animation-timing-function: ease;
}
Square loading icons - Script Codes
Square loading icons - Script Codes
Home Page Home
Developer Khalkeus
Username khalkeus
Uploaded November 11, 2022
Rating 4.5
Size 2,249 Kb
Views 8,096
Do you need developer help for Square loading icons?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Khalkeus (khalkeus) Script Codes
Name
Planet Generator
Character generator
Warpspeed
Boids iii
Metaballs
Soft
Rasterization
Cannon.js test
Css loaders ii
Particle fire
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!