From 25b38baf18de94e0ecb8fb3915378d117b85ab83 Mon Sep 17 00:00:00 2001
From: maxfedorov <10705898+maxfedorov@users.noreply.github.com>
Date: Fri, 14 Feb 2025 18:22:24 +0100
Subject: [PATCH] Add dual ring pulse loader (#2917)
* Add dual ring pulse loader
* Revert "Add dual ring pulse loader"
This reverts commit db2d82da7180cc0e1cfabb4bff526c3bc0b7c021.
* Add dual ring pulse loader
(cherry picked from commit db2d82da7180cc0e1cfabb4bff526c3bc0b7c021)
* Update folder name
* rename folder
---
.../index.html | 15 ++++++
.../meta.json | 4 ++
.../styles.css | 54 +++++++++++++++++++
3 files changed, 73 insertions(+)
create mode 100644 Art/maxfedorov-dual-ring-pulse-loader/index.html
create mode 100644 Art/maxfedorov-dual-ring-pulse-loader/meta.json
create mode 100644 Art/maxfedorov-dual-ring-pulse-loader/styles.css
diff --git a/Art/maxfedorov-dual-ring-pulse-loader/index.html b/Art/maxfedorov-dual-ring-pulse-loader/index.html
new file mode 100644
index 000000000..af27d3c5c
--- /dev/null
+++ b/Art/maxfedorov-dual-ring-pulse-loader/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+ Dual Ring Pulse Loader
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Art/maxfedorov-dual-ring-pulse-loader/meta.json b/Art/maxfedorov-dual-ring-pulse-loader/meta.json
new file mode 100644
index 000000000..77c3eeefc
--- /dev/null
+++ b/Art/maxfedorov-dual-ring-pulse-loader/meta.json
@@ -0,0 +1,4 @@
+{
+ "artName": "Dual Ring Pulse Loader",
+ "githubHandle": "maxfedorov"
+}
\ No newline at end of file
diff --git a/Art/maxfedorov-dual-ring-pulse-loader/styles.css b/Art/maxfedorov-dual-ring-pulse-loader/styles.css
new file mode 100644
index 000000000..3fd6d6551
--- /dev/null
+++ b/Art/maxfedorov-dual-ring-pulse-loader/styles.css
@@ -0,0 +1,54 @@
+body {
+ height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.loader {
+ position: relative;
+ width: 100px;
+ height: 100px;
+}
+
+.ring {
+ position: absolute;
+ border: 4px solid transparent;
+ border-radius: 50%;
+}
+
+.outer {
+ width: 100px;
+ height: 100px;
+ border-top: 4px solid #ff3366;
+ border-right: 4px solid #ff3366;
+ animation: spin 2s linear infinite, pulse 1.5s ease-in-out infinite;
+}
+
+.inner {
+ width: 70px;
+ height: 70px;
+ top: 15px;
+ left: 15px;
+ border-bottom: 4px solid #33ffcc;
+ border-left: 4px solid #33ffcc;
+ animation: spin 2s linear infinite reverse, pulse 1.5s ease-in-out infinite 0.5s;
+}
+
+@keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+@keyframes pulse {
+ 0%, 100% {
+ transform: scale(1) rotate(0deg);
+ }
+ 50% {
+ transform: scale(1.1) rotate(180deg);
+ }
+}
\ No newline at end of file