new loading progress circle

style.css

@@ -2,9 +2,7 @@ body {
   margin: 0;
   background-color: #000;
   color: #fff;
-  font-family: Monospace;
-  font-size: 13px;
-  line-height: 24px;
+  font-family: Georgia, serif;
   overscroll-behavior: none;
 }
 
@@ -30,7 +28,6 @@ body {
   position: absolute;
   left: 0;
   width: 100%;
-  font-family: Georgia, serif;
   background: transparent;
   justify-content: center;
   z-index: 1;
@@ -39,32 +36,43 @@ body {
 
 #message.loading {
   display: flex;
-  top: 30vh;
+  flex-direction: column;
+  top: 20vh;
+  width: 100%;
+  margin: auto;
+  align-items: center;
+  gap: 5rem;
+  text-align: center;
+  font-size: 1.7em;
 }
 
 #progressCircle {
   display: flex;
-  width: 200px;
-  height: 200px;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  width: 150px;
+  height: 150px;
+  border: 4px solid dimgray;
   border-radius: 50%;
-  background: conic-gradient(#1da8b7 var(--progress), dimgray 0deg);
   font-size: 0;
+  font-size: 3vh;
+  font-weight: 700;
+  font-family: system-ui;
+  text-align: center;
 }
 
 #progressCircle::after {
-  content: attr(data-progress) '%';
+  content: "";
   display: flex;
-  justify-content: center;
-  flex-direction: column;
-  width: 100%;
-  margin: 4px;
+  position: absolute;
+  width: 150px;
+  height: 150px;
+  top: -4px;
+  left: -4px;
+  border: 4px solid #1da8b7;
   border-radius: 50%;
-  color: white;
-  background: black;
-  font-size: 3vh;
-  font-weight: 400;
-  font-family: system-ui;
-  text-align: center;
+  mask: conic-gradient(black var(--progress), transparent var(--progress));
 }
 
 #message a {