From 36537a1b71aa8b812dd02ee5477af7d5b3a766e3 Mon Sep 17 00:00:00 2001
From: gurramtejaswini <91879214+gurramtejaswini@users.noreply.github.com>
Date: Thu, 21 Nov 2024 23:49:48 -0700
Subject: [PATCH] Create circular progress bar.html

---
 circular progress bar.html | 90 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 90 insertions(+)
 create mode 100644 circular progress bar.html
diff --git a/circular progress bar.html b/circular progress bar.html
new file mode 100644
index 00000000..5a469fa4
--- /dev/null
+++ b/circular progress bar.html	
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CSS Circular Progress Bar</title>
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        background-color: #f5f5f5;
+        font-family: Arial, sans-serif;
+      }
+
+      .progress-circle {
+        width: 150px;
+        height: 150px;
+        position: relative;
+      }
+
+      .circle {
+        width: 100%;
+        height: 100%;
+        background: #e6e6e6;
+        border-radius: 50%;
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+      }
+
+      .mask {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        clip: rect(0, 150px, 150px, 75px); /* Clip the circle in half */
+      }
+
+      .fill {
+        width: 100%;
+        height: 100%;
+        background: #4caf50;
+        border-radius: 50%;
+        position: absolute;
+        clip: rect(0, 75px, 150px, 0);
+        transform: rotate(0deg);
+        animation: rotateFill 2s linear infinite;
+      }
+
+      .inside-circle {
+        width: 120px;
+        height: 120px;
+        background: #fff;
+        border-radius: 50%;
+        position: absolute;
+        z-index: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 1.5em;
+        font-weight: bold;
+        color: #333;
+      }
+
+      @keyframes rotateFill {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="progress-circle">
+      <div class="circle">
+        <div class="mask">
+          <div class="fill"></div>
+        </div>
+        <div class="inside-circle">70%</div>
+      </div>
+    </div>
+  </body>
+</html>
