Scribd
Upload
9 views1 page

File

This document is an HTML page designed to display a loading animation. It features a centered circular loader that rotates, created using CSS animations and styles. The loader consists of two overlapping shapes, one red and one blue, which rotate continuously to indicate loading status.

Uploaded by

bolap14336
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
9 views1 page

File

This document is an HTML page designed to display a loading animation. It features a centered circular loader that rotates, created using CSS animations and styles. The loader consists of two overlapping shapes, one red and one blue, which rotate continuously to indicate loading status.

Uploaded by

bolap14336
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 1

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading Page</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.loader {
width: 100px;
height: 100px;
position: relative;
}
.loader::before,
.loader::after {
content: "";
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
clip-path: polygon(50% 50%, 100% 0, 100% 100%, 50% 100%);
animation: rotate 1s linear infinite;
}
.loader::before {
background: red;
transform-origin: center;
}
.loader::after {
background: blue;
clip-path: polygon(50% 50%, 0 0, 0 100%, 50% 100%);
transform-origin: center;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="loader"></div>
</body>
</html>

You might also like