From 06bad8bd047b31593b3a20aba10daa8e3529d16d Mon Sep 17 00:00:00 2001
From: Shreyans2004 <128773151+Shreyans2004@users.noreply.github.com>
Date: Wed, 9 Aug 2023 16:31:23 +0000
Subject: [PATCH] up-down animation added
---
.../up-down loading animation/index.html | 13 ++++++++++
.../up-down loading animation/styles.css | 26 +++++++++++++++++++
2 files changed, 39 insertions(+)
create mode 100644 Frontend-Projects/up-down loading animation/index.html
create mode 100644 Frontend-Projects/up-down loading animation/styles.css
diff --git a/Frontend-Projects/up-down loading animation/index.html b/Frontend-Projects/up-down loading animation/index.html
new file mode 100644
index 0000000000..75844d2505
--- /dev/null
+++ b/Frontend-Projects/up-down loading animation/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+ Document
+
+
+
+ Loading........
+
+
+
\ No newline at end of file
diff --git a/Frontend-Projects/up-down loading animation/styles.css b/Frontend-Projects/up-down loading animation/styles.css
new file mode 100644
index 0000000000..402c7fe947
--- /dev/null
+++ b/Frontend-Projects/up-down loading animation/styles.css
@@ -0,0 +1,26 @@
+body{
+ width:100vw;
+height: 100vh;
+display: flex;
+justify-content: center;
+align-items: center;
+flex-direction: column;
+
+}
+#main{
+ border-radius: 50%;
+ width: 40%;
+ height: 40%;
+ animation: animate 4s linear infinite ;
+background-size: 20em 20em;
+ background-image: repeating-conic-gradient(DeepPink 0deg, DeepPink,90deg,white 90deg ,white 180deg, DeepPink 180deg, DeepPink 270deg,white 270deg ,white 360deg);
+}
+@keyframes animate {
+ 0%{
+ transform: rotateX(0deg);
+ }
+ 100%{
+ transform: rotateX(360deg);
+ }
+
+}
\ No newline at end of file