1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8" />
5<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6<title>Diamond to Circle Loader</title>
7<style>
8 :root{
9 --teal:#0f97a8;
10 --white:#f7f7f7;
11 --stroke:rgba(210,235,245,.72);
12 --size:26px;
13 --border:3px;
14 --top-h:32.5vh;
15 --dur:1.25s;
16 }
17
18 html,body{
19 margin:0;
20 width:100%;
21 height:100%;
22 overflow:hidden;
23 background:var(--white);
24 font-family:sans-serif;
25 }
26
27 .scene{
28 position:relative;
29 width:100%;
30 height:100%;
31 background:
32 linear-gradient(to bottom,
33 var(--teal) 0,
34 var(--teal) var(--top-h),
35 var(--white) var(--top-h),
36 var(--white) 100%);
37 }
38
39 .loader{
40 position:absolute;
41 left:50%;
42 top:calc(var(--top-h) * 0.32);
43 width:var(--size);
44 height:var(--size);
45 transform:translate(-50%,-50%);
46 }
47
48 .shape{
49 width:100%;
50 height:100%;
51 box-sizing:border-box;
52 border:var(--border) solid var(--stroke);
53 animation: morph var(--dur) ease-in-out infinite;
54 transform-origin:center;
55 }
56
57 @keyframes morph{
58 0%{
59 transform:rotate(45deg) scale(1);
60 border-radius:0;
61 }
62 25%{
63 transform:rotate(22.5deg) scale(.96);
64 border-radius:28%;
65 }
66 50%{
67 transform:rotate(0deg) scale(.92);
68 border-radius:50%;
69 }
70 75%{
71 transform:rotate(22.5deg) scale(.96);
72 border-radius:28%;
73 }
74 100%{
75 transform:rotate(45deg) scale(1);
76 border-radius:0;
77 }
78 }
79</style>
80</head>
81<body>
82 <div class="scene">
83 <div class="loader">
84 <div class="shape"></div>
85 </div>
86 </div>
87</body>
88</html>