From 72bc49cd21837d8eb7b8ce6bdbdb2c7a0726a6a6 Mon Sep 17 00:00:00 2001 From: Byte Bender <136265142+BYT-Bender@users.noreply.github.com> Date: Sat, 12 Oct 2024 19:46:31 +0530 Subject: [PATCH 1/5] Create index.html --- Art/BYT-Bender-square-loader/index.html | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 Art/BYT-Bender-square-loader/index.html diff --git a/Art/BYT-Bender-square-loader/index.html b/Art/BYT-Bender-square-loader/index.html new file mode 100644 index 000000000..62873e4f9 --- /dev/null +++ b/Art/BYT-Bender-square-loader/index.html @@ -0,0 +1,14 @@ + + + + + + Document + + + +
+
+
+ + From d16b50719ef64396612cce89191dcf4cbd91aafc Mon Sep 17 00:00:00 2001 From: Byte Bender <136265142+BYT-Bender@users.noreply.github.com> Date: Sat, 12 Oct 2024 19:46:53 +0530 Subject: [PATCH 2/5] Create style.css --- Art/BYT-Bender-square-loader/style.css | 93 ++++++++++++++++++++++++++ 1 file changed, 93 insertions(+) create mode 100644 Art/BYT-Bender-square-loader/style.css diff --git a/Art/BYT-Bender-square-loader/style.css b/Art/BYT-Bender-square-loader/style.css new file mode 100644 index 000000000..7fbd27278 --- /dev/null +++ b/Art/BYT-Bender-square-loader/style.css @@ -0,0 +1,93 @@ +**, *::before, *::after { + box-sizing: border-box; +} + +* { + margin: 0; + padding: 0; +} + +:root { + --color: white; + --size-square: 3vmin; +} + +html, body { + height: 100vh; + width: 100vw; +} + +body { + display: flex; + background: rgb(81,0,255); + background: linear-gradient(90deg, rgba(81,0,255,1) 0%, rgba(166,0,255,1) 35%, rgba(243,0,255,1) 100%); +} + +.container { + height: 100%; + width: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.loader { + position: relative; +} + +.loader::before, +.loader::after { + content: ''; + position: absolute; + width: var(--size-square); + height: var(--size-square); + background-color: var(--color); +} + +.loader::before { + top: calc(50% - var(--size-square)); + left: calc(50% - var(--size-square)); + animation: loader-1 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite; +} + +.loader::after { + top: 50%; + left: 50%; + animation: loader-2 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite; +} + +@keyframes loader-1 { + 0%, 100% { + transform: none; + } + + 25% { + transform: translateX(100%); + } + + 50% { + transform: translateX(100%) translateY(100%); + } + + 75% { + transform: translateY(100%); + } +} + +@keyframes loader-2 { + 0%, 100% { + transform: none; + } + + 25% { + transform: translateX(-100%); + } + + 50% { + transform: translateX(-100%) translateY(-100%); + } + + 75% { + transform: translateY(-100%); + } +} From e9f8e597baa73e08120938ae675065f4fa12e533 Mon Sep 17 00:00:00 2001 From: Byte Bender <136265142+BYT-Bender@users.noreply.github.com> Date: Sat, 12 Oct 2024 19:50:52 +0530 Subject: [PATCH 3/5] Update index.html --- Art/BYT-Bender-square-loader/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Art/BYT-Bender-square-loader/index.html b/Art/BYT-Bender-square-loader/index.html index 62873e4f9..e4e966be1 100644 --- a/Art/BYT-Bender-square-loader/index.html +++ b/Art/BYT-Bender-square-loader/index.html @@ -4,7 +4,7 @@ Document - +
From a97db50cc634b535fa9f3fdd0a8b5c2600ae47b9 Mon Sep 17 00:00:00 2001 From: Byte Bender <136265142+BYT-Bender@users.noreply.github.com> Date: Sat, 12 Oct 2024 19:51:20 +0530 Subject: [PATCH 4/5] Rename style.css to styles.css --- Art/BYT-Bender-square-loader/{style.css => styles.css} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename Art/BYT-Bender-square-loader/{style.css => styles.css} (100%) diff --git a/Art/BYT-Bender-square-loader/style.css b/Art/BYT-Bender-square-loader/styles.css similarity index 100% rename from Art/BYT-Bender-square-loader/style.css rename to Art/BYT-Bender-square-loader/styles.css From 66f1188d77bd65a776e92ffec956fb552295fff6 Mon Sep 17 00:00:00 2001 From: Byte Bender <136265142+BYT-Bender@users.noreply.github.com> Date: Sat, 12 Oct 2024 19:51:54 +0530 Subject: [PATCH 5/5] Create meta.json --- Art/BYT-Bender-square-loader/meta.json | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 Art/BYT-Bender-square-loader/meta.json diff --git a/Art/BYT-Bender-square-loader/meta.json b/Art/BYT-Bender-square-loader/meta.json new file mode 100644 index 000000000..26f056e66 --- /dev/null +++ b/Art/BYT-Bender-square-loader/meta.json @@ -0,0 +1,4 @@ +{ + "artName": "Square Loader", + "githubHandle": "BYT-Bender" +}