Scribd
Upload
5 views2 pages

file5

This document is an HTML template for a loading page featuring a spinning loader animation and a brand name 'Hyshru'. The page is styled using CSS to center the loader and apply animations for both the loader and the brand name. It utilizes Google Fonts for typography and is designed to be responsive across different devices.

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
5 views2 pages

file5

This document is an HTML template for a loading page featuring a spinning loader animation and a brand name 'Hyshru'. The page is styled using CSS to center the loader and apply animations for both the loader and the brand name. It utilizes Google Fonts for typography and is designed to be responsive across different devices.

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/ 2

<!

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>
<link href="https://fonts.googleapis.com/css2?
family=Poppins:wght@600&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
font-family: 'Poppins', sans-serif;
}
.loader-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.loader {
width: 80px;
height: 80px;
border-radius: 50%;
border: 6px solid transparent;
border-top: 6px solid red;
border-right: 6px solid blue;
animation: spin 1.5s linear infinite;
}
.brand-name {
position: absolute;
font-size: 20px;
font-weight: bold;
color: #333;
animation: fadeInOut 2s ease-in-out infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes fadeInOut {
0%, 100% {
opacity: 0.3;
}
50% {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="loader-container">
<div class="loader"></div>
<div class="brand-name">Hyshru</div>
</div>
</body>
</html>

You might also like