Gradient Loader HTML CSS
Interesting loading page design in html css
Super
0
290
A simple loading page example with a beautiful design. HTML CSS
<!DOCTYPE html>
<html>
<head>
<title>Neumorphism Gradient Loader</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #240229;
}
.loader {
position: relative;
width: 200px;
height: 200px;
border: 4px solid #240229;
overflow: hidden;
border-radius: 50%;
box-shadow: -5px -5px 5px rgba(255, 255, 255, 0.1), 10px 10px 10px rgba(0, 0, 0, 0.4), inset -5px -5px 5px rgba(255, 255, 255, 0.2), inset 10px 10px 10px rgba(0, 0, 0, 0.4);
}
.loader:before {
content: "";
position: absolute;
top: 25px;
left: 25px;
right: 25px;
bottom: 25px;
z-index: 10;
background: #240229;
border-radius: 50%;
border: 2px solid #240229;
box-shadow: inset -2px -2px 5px rgba(255, 255, 255, 0.2), inset 3px 3px 5px rgba(0, 0, 0, 0.5);
}
.loader span {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-image: linear-gradient(-225deg, #ff057c 0%, #8d0b93 50%, #321575 100%);
filter: blur(20px);
z-index: -1;
animation: animate 0.5s linear infinite;
}
@keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="loader">
<span></span>
</div>
</body>
</html>
Our website is for sale! The domain and website has been running for more than 3 years, but it's time to part with it. There is no price, so I consider any offer. Contact us if you are interested in buying in the feedback form, we will discuss options, price and details for transferring the site. (script, database and everything else for the site to work).
