This code creates a loading animation using HTML and CSS. The animation consists of four colored squares (yellow, red, green, and blue) arranged in a square pattern. Each square moves along a specific path using CSS animations.
Loading Animation
The HTML code consists of a div element with a class of “base” that contains four div elements with classes of “yellow”, “red”, “green”, and “blue”. These inner div elements represent the colored squares.
The CSS code sets the height and width of the base div element and centers it on the page using display: flex and align-items: center; justify-content: center;. It also sets the height and width of each inner div element and positions them absolutely within the base div.
Read more : How to make QR Code Generator using JavaFX & Fxml v1.0
For each colored square, the CSS code defines an animation using @keyframes and a name (e.g. slideY for the yellow square). The animation consists of four transform properties that move the square along a specific path. The animation is set to repeat indefinitely using animation: slideY 3s linear infinite;.
Finally, the CSS code adds a 1-pixel solid border around each colored square to make them easier to see.
In summary, this code creates a simple but visually appealing loading animation using CSS animations and four colored squares.
<html>
<head>
<title>Loading Animation v2</title>
</head>
<body>
<div class="base">
<div class="yellow"></div>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
</body>
</html>*, *::after, *::before{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.base{
height: 150px;
width: 150px;
display: flex;
align-items: center;
justify-content: center;
}
.base div{
height: 50px;
width: 50px;
position: absolute;
}
.yellow{
background-color: yellow;
left: calc(50% - 50px);
top: calc(50% - 0px);
animation: slideY 3s linear infinite;
border: 1px solid yellow;
}
@keyframes slideY {
0%{
transform: translateX(0px);
}
25%{
transform: translateX(50px);
}
50%{
transform: translateX(50px) translateY(-50px);
}
75%{
transform: translateX(0px) translateY(-50px);
}
}
.red{
background-color: red;
left: calc(50% - 0px);
top: calc(50% - 0px);
animation: slideR 3s linear infinite;
border: 1px solid red;
}
@keyframes slideR {
0%{
transform: translateY(0px);
}
25%{
transform: translateY(-50px);
}
50%{
transform: translateX(-50px) translateY(-50px);
}
75%{
transform: translateX(-50px) translateY(0px);
}
}
.green{
background-color: lime;
left: calc(50% - 0px);
top: calc(50% - 50px);
animation: slideG 3s linear infinite;
border: 1px solid lime;
}
@keyframes slideG {
0%{
transform: translateX(0px);
}
25%{
transform: translateX(-50px);
}
50%{
transform: translateX(-50px) translateY(50px);
}
75%{
transform: translateX(0px) translateY(50px);
}
}
.blue{
background-color: aqua;
left: calc(50% - 50px);
top: calc(50% - 50px);
animation: slideB 3s linear infinite;
border: 1px solid aqua;
}
@keyframes slideB {
0%{
transform: translateY(0px);
}
25%{
transform: translateY(50px);
}
50%{
transform: translateX(50px) translateY(50px);
}
75%{
transform: translateX(50px) translateY(0px);
}
}