diff --git a/circular-progress-bar-loader/circular-progress-bar-demo.mp4 b/circular-progress-bar-loader/circular-progress-bar-demo.mp4
new file mode 100644
index 00000000..4dfe8cba
Binary files /dev/null and b/circular-progress-bar-loader/circular-progress-bar-demo.mp4 differ
diff --git a/circular-progress-bar-loader/index.html b/circular-progress-bar-loader/index.html
new file mode 100644
index 00000000..05d59245
--- /dev/null
+++ b/circular-progress-bar-loader/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ Circle of Circles
+
+
+
+
+
+
diff --git a/circular-progress-bar-loader/style.css b/circular-progress-bar-loader/style.css
new file mode 100644
index 00000000..45ae768d
--- /dev/null
+++ b/circular-progress-bar-loader/style.css
@@ -0,0 +1,33 @@
+body {
+ height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.circle-container {
+ height: 60px;
+ width: 60px;
+ border-radius: 50%;
+ border: 25px dotted black;
+ animation: spin 1.5s ease-in infinite normal;
+}
+
+@keyframes spin {
+ 0% {
+ border: 25px dotted rgb(1, 1, 1);
+ transform: rotate(0deg);
+ }
+ 25% {
+ border: 25px dotted #3e3b39;
+ }
+ 50% {
+ border: 25px dotted #a7a7a7;
+ }
+ 75% {
+ border: 25px dotted #b7b7b7;
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
\ No newline at end of file