.png)
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--bg1: #09334f;
--bg2: #072a40;
--wrm: #d1faff;
--deg: -12deg;
--sz: 15vmin;
--spd: 2.05s;
}
@property --deg {
syntax: '<angle>';
inherits: false;
initial-value: -12deg;
}
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg1);
}
.loader {
width: var(--sz);
height: var(--sz);
background: conic-gradient(from var(--deg) at 50% 50%, var(--bg1) 0, var(--wrm) 25deg 50deg, var(--bg1) 51deg 100%);
clip-path: polygon(0% 0%, 40% 0%, 50% 10%, 60% 0%, 100% 0%, 100% 40%, 90% 50%, 100% 60%, 100% 100%, 60% 100%, 50% 90%, 40% 100%, 0% 100%, 0% 60%, 10% 50%, 0% 40%);
animation: spin var(--spd) linear 0s infinite;
display: flex;
align-items: center;
justify-content: center;
position: relative;
border-radius: calc(var(--sz) / 10);
}
.loader:hover {
animation: spin var(--spd) linear 0s infinite, rotation var(--spd) linear 0s infinite;
}
.loader:before {
content: "";
position: absolute;
width: calc(100% - calc(var(--sz) / 10));
height: calc(100% - calc(var(--sz) / 10));
border-radius: calc(var(--sz) / 20);
background: var(--bg2);
clip-path: polygon(0% 0%, 38% 0%, 50% 12%, 62% 0%, 100% 0%, 100% 38%, 88% 50%, 100% 62%, 100% 100%, 62% 100%, 50% 88%, 38% 100%, 0% 100%, 0% 62%, 12% 50%, 0% 38%);
}
@keyframes spin {
0% {
--deg: -12deg;
}
100% {
--deg: 348deg;
}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
</style>
</head>
<body>
<div class="loader"></div>
</body>
</html>
.png)
Contact Us!
0 Comments
type your comment...