From 92e426b316717a9b1e20bdc56b777a15a6ee0741 Mon Sep 17 00:00:00 2001
From: Gabriel De Los Rios <gabriel.delosrios@tutamail.com>
Date: Thu, 1 Jan 2026 22:14:58 -0300
Subject: [PATCH] feat(loading): add loading screen as web component

---
 .../scan-loading-screen.css                   | 1011 +++++++++++++++++
 .../scan-loading-screen.js                    |   21 +
 2 files changed, 1032 insertions(+)
 create mode 100644 public/scan-loading-screen/scan-loading-screen.css
 create mode 100644 public/scan-loading-screen/scan-loading-screen.js

diff --git a/public/scan-loading-screen/scan-loading-screen.css b/public/scan-loading-screen/scan-loading-screen.css
new file mode 100644
index 0000000..a501d5b
--- /dev/null
+++ b/public/scan-loading-screen/scan-loading-screen.css
@@ -0,0 +1,1011 @@
+:host {
+  align-items: center;
+  background-color: #000;
+  display: flex;
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+
+.container {
+  font-size: 0.5vh;
+  margin: auto;
+}
+
+.barcode {
+  margin: 0 auto;
+  position: relative;
+}
+
+.barcode > div {
+  float: left;
+  margin-right: 2em;
+  transform-origin: 0 0;
+}
+.barcode > div:nth-child(1) {
+  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 0%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 3.4482758621%);
+}
+.barcode > div:nth-child(2) {
+  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 3.4482758621%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 6.8965517241%);
+}
+.barcode > div:nth-child(3) {
+  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 6.8965517241%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 10.3448275862%);
+}
+.barcode > div:nth-child(4) {
+  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 10.3448275862%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 13.7931034483%);
+}
+.barcode > div:nth-child(5) {
+  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 13.7931034483%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 17.2413793103%);
+}
+.barcode > div:nth-child(6) {
+  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 17.2413793103%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 20.6896551724%);
+}
+.barcode > div:nth-child(7) {
+  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 20.6896551724%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 24.1379310345%);
+}
+.barcode > div:nth-child(8) {
+  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 24.1379310345%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 27.5862068966%);
+}
+.barcode > div:nth-child(9) {
+  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 27.5862068966%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 31.0344827586%);
+}
+.barcode > div:nth-child(10) {
+  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 31.0344827586%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 34.4827586207%);
+}
+.barcode > div:nth-child(11) {
+  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 34.4827586207%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 37.9310344828%);
+}
+.barcode > div:nth-child(12) {
+  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 37.9310344828%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 41.3793103448%);
+}
+.barcode > div:nth-child(13) {
+  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 41.3793103448%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 44.8275862069%);
+}
+.barcode > div:nth-child(14) {
+  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 44.8275862069%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 48.275862069%);
+}
+.barcode > div:nth-child(15) {
+  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 48.275862069%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 51.724137931%);
+}
+.barcode > div:nth-child(16) {
+  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 51.724137931%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 55.1724137931%);
+}
+.barcode > div:nth-child(17) {
+  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 55.1724137931%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 58.6206896552%);
+}
+.barcode > div:nth-child(18) {
+  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 58.6206896552%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 62.0689655172%);
+}
+.barcode > div:nth-child(19) {
+  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 62.0689655172%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 65.5172413793%);
+}
+.barcode > div:nth-child(20) {
+  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 65.5172413793%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 68.9655172414%);
+}
+.barcode > div:nth-child(21) {
+  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 68.9655172414%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 72.4137931034%);
+}
+.barcode > div:nth-child(22) {
+  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 72.4137931034%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 75.8620689655%);
+}
+.barcode > div:nth-child(23) {
+  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 75.8620689655%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 79.3103448276%);
+}
+.barcode > div:nth-child(24) {
+  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 79.3103448276%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 82.7586206897%);
+}
+.barcode > div:nth-child(25) {
+  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 82.7586206897%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 86.2068965517%);
+}
+.barcode > div:nth-child(26) {
+  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 86.2068965517%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 89.6551724138%);
+}
+.barcode > div:nth-child(27) {
+  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 89.6551724138%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 93.1034482759%);
+}
+.barcode > div:nth-child(28) {
+  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 93.1034482759%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 96.5517241379%);
+}
+.barcode > div:nth-child(29) {
+  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 96.5517241379%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 100%);
+}
+.barcode > div:nth-child(30) {
+  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 100%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 103.4482758621%);
+}
+
+.barcode div:nth-child(1),
+.barcode div:nth-child(2),
+.barcode div:nth-child(15),
+.barcode div:nth-child(16),
+.barcode div:nth-child(29),
+.barcode div:nth-child(30) {
+  height: 27em;
+}
+
+.barcode div:nth-child(1),
+.barcode div:nth-child(2),
+.barcode div:nth-child(3),
+.barcode div:nth-child(5),
+.barcode div:nth-child(8),
+.barcode div:nth-child(10),
+.barcode div:nth-child(12),
+.barcode div:nth-child(13),
+.barcode div:nth-child(15),
+.barcode div:nth-child(16),
+.barcode div:nth-child(18),
+.barcode div:nth-child(19),
+.barcode div:nth-child(22),
+.barcode div:nth-child(25),
+.barcode div:nth-child(27),
+.barcode div:nth-child(28),
+.barcode div:nth-child(29),
+.barcode div:nth-child(30) {
+  width: 0.6em;
+}
+
+.barcode div:nth-child(3),
+.barcode div:nth-child(4),
+.barcode div:nth-child(5),
+.barcode div:nth-child(6),
+.barcode div:nth-child(7),
+.barcode div:nth-child(8),
+.barcode div:nth-child(9),
+.barcode div:nth-child(10),
+.barcode div:nth-child(11),
+.barcode div:nth-child(12),
+.barcode div:nth-child(13),
+.barcode div:nth-child(14),
+.barcode div:nth-child(17),
+.barcode div:nth-child(18),
+.barcode div:nth-child(19),
+.barcode div:nth-child(20),
+.barcode div:nth-child(21),
+.barcode div:nth-child(22),
+.barcode div:nth-child(23),
+.barcode div:nth-child(24),
+.barcode div:nth-child(25),
+.barcode div:nth-child(26),
+.barcode div:nth-child(27),
+.barcode div:nth-child(28) {
+  height: 24em;
+}
+
+.barcode div:nth-child(6),
+.barcode div:nth-child(7),
+.barcode div:nth-child(9),
+.barcode div:nth-child(11),
+.barcode div:nth-child(14),
+.barcode div:nth-child(23),
+.barcode div:nth-child(24) {
+  width: 1.2em;
+}
+
+.barcode div:nth-child(17),
+.barcode div:nth-child(20),
+.barcode div:nth-child(21),
+.barcode div:nth-child(26) {
+  width: 1.8em;
+}
+
+.barcode div:nth-child(4) {
+  width: 2.4em;
+}
+
+.barcode div:nth-child(1),
+.barcode div:nth-child(2),
+.barcode div:nth-child(3),
+.barcode div:nth-child(4),
+.barcode div:nth-child(6),
+.barcode div:nth-child(7),
+.barcode div:nth-child(8),
+.barcode div:nth-child(11),
+.barcode div:nth-child(13),
+.barcode div:nth-child(14),
+.barcode div:nth-child(15),
+.barcode div:nth-child(16),
+.barcode div:nth-child(18),
+.barcode div:nth-child(19),
+.barcode div:nth-child(22),
+.barcode div:nth-child(24),
+.barcode div:nth-child(25),
+.barcode div:nth-child(29),
+.barcode div:nth-child(30) {
+  margin-right: 0.6em;
+}
+
+.barcode div:nth-child(12),
+.barcode div:nth-child(17),
+.barcode div:nth-child(20),
+.barcode div:nth-child(21),
+.barcode div:nth-child(23),
+.barcode div:nth-child(26),
+.barcode div:nth-child(28) {
+  margin-right: 1.2em;
+}
+
+.barcode div:nth-child(5),
+.barcode div:nth-child(9),
+.barcode div:nth-child(10),
+.barcode div:nth-child(27) {
+  margin-right: 1.8em;
+}
+
+@keyframes bar-1 {
+  0%, 16% {
+    transform: scaleY(0);
+  }
+  66% {
+    transform: scaleY(1);
+  }
+  81% {
+    opacity: 1;
+  }
+  91% {
+    opacity: 0;
+  }
+  99.5% {
+    transform: scaleY(1);
+    opacity: 0;
+  }
+  100% {
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+.barcode > div:nth-child(1) {
+  animation: bar-1 5s ease-out infinite forwards;
+}
+
+@keyframes bar-2 {
+  0%, 24% {
+    transform: scaleY(0);
+  }
+  61% {
+    transform: scaleY(1);
+  }
+  81% {
+    opacity: 1;
+  }
+  93% {
+    opacity: 0;
+  }
+  99.5% {
+    transform: scaleY(1);
+    opacity: 0;
+  }
+  100% {
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+.barcode > div:nth-child(2) {
+  animation: bar-2 5s ease-out infinite forwards;
+}
+
+@keyframes bar-3 {
+  0%, 18% {
+    transform: scaleY(0);
+  }
+  61% {
+    transform: scaleY(1);
+  }
+  72% {
+    opacity: 1;
+  }
+  93% {
+    opacity: 0;
+  }
+  99.5% {
+    transform: scaleY(1);
+    opacity: 0;
+  }
+  100% {
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+.barcode > div:nth-child(3) {
+  animation: bar-3 5s ease-out infinite forwards;
+}
+
+@keyframes bar-4 {
+  0%, 3% {
+    transform: scaleY(0);
+  }
+  47% {
+    transform: scaleY(1);
+  }
+  81% {
+    opacity: 1;
+  }
+  88% {
+    opacity: 0;
+  }
+  99.5% {
+    transform: scaleY(1);
+    opacity: 0;
+  }
+  100% {
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+.barcode > div:nth-child(4) {
+  animation: bar-4 5s ease-out infinite forwards;
+}
+
+@keyframes bar-5 {
+  0%, 2% {
+    transform: scaleY(0);
+  }
+  67% {
+    transform: scaleY(1);
+  }
+  73% {
+    opacity: 1;
+  }
+  93% {
+    opacity: 0;
+  }
+  99.5% {
+    transform: scaleY(1);
+    opacity: 0;
+  }
+  100% {
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+.barcode > div:nth-child(5) {
+  animation: bar-5 5s ease-out infinite forwards;
+}
+
+@keyframes bar-6 {
+  0%, 14% {
+    transform: scaleY(0);
+  }
+  54% {
+    transform: scaleY(1);
+  }
+  74% {
+    opacity: 1;
+  }
+  93% {
+    opacity: 0;
+  }
+  99.5% {
+    transform: scaleY(1);
+    opacity: 0;
+  }
+  100% {
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+.barcode > div:nth-child(6) {
+  animation: bar-6 5s ease-out infinite forwards;
+}
+
+@keyframes bar-7 {
+  0%, 9% {
+    transform: scaleY(0);
+  }
+  60% {
+    transform: scaleY(1);
+  }
+  76% {
+    opacity: 1;
+  }
+  89% {
+    opacity: 0;
+  }
+  99.5% {
+    transform: scaleY(1);
+    opacity: 0;
+  }
+  100% {
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+.barcode > div:nth-child(7) {
+  animation: bar-7 5s ease-out infinite forwards;
+}
+
+@keyframes bar-8 {
+  0%, 27% {
+    transform: scaleY(0);
+  }
+  48% {
+    transform: scaleY(1);
+  }
+  73% {
+    opacity: 1;
+  }
+  93% {
+    opacity: 0;
+  }
+  99.5% {
+    transform: scaleY(1);
+    opacity: 0;
+  }
+  100% {
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+.barcode > div:nth-child(8) {
+  animation: bar-8 5s ease-out infinite forwards;
+}
+
+@keyframes bar-9 {
+  0%, 16% {
+    transform: scaleY(0);
+  }
+  50% {
+    transform: scaleY(1);
+  }
+  73% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 0;
+  }
+  99.5% {
+    transform: scaleY(1);
+    opacity: 0;
+  }
+  100% {
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+.barcode > div:nth-child(9) {
+  animation: bar-9 5s ease-out infinite forwards;
+}
+
+@keyframes bar-10 {
+  0%, 9% {
+    transform: scaleY(0);
+  }
+  57% {
+    transform: scaleY(1);
+  }
+  80% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 0;
+  }
+  99.5% {
+    transform: scaleY(1);
+    opacity: 0;
+  }
+  100% {
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+.barcode > div:nth-child(10) {
+  animation: bar-10 5s ease-out infinite forwards;
+}
+
+@keyframes bar-11 {
+  0%, 14% {
+    transform: scaleY(0);
+  }
+  58% {
+    transform: scaleY(1);
+  }
+  75% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 0;
+  }
+  99.5% {
+    transform: scaleY(1);
+    opacity: 0;
+  }
+  100% {
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+.barcode > div:nth-child(11) {
+  animation: bar-11 5s ease-out infinite forwards;
+}
+
+@keyframes bar-12 {
+  0%, 15% {
+    transform: scaleY(0);
+  }
+  60% {
+    transform: scaleY(1);
+  }
+  75% {
+    opacity: 1;
+  }
+  93% {
+    opacity: 0;
+  }
+  99.5% {
+    transform: scaleY(1);
+    opacity: 0;
+  }
+  100% {
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+.barcode > div:nth-child(12) {
+  animation: bar-12 5s ease-out infinite forwards;
+}
+
+@keyframes bar-13 {
+  0%, 8% {
+    transform: scaleY(0);
+  }
+  53% {
+    transform: scaleY(1);
+  }
+  75% {
+    opacity: 1;
+  }
+  91% {
+    opacity: 0;
+  }
+  99.5% {
+    transform: scaleY(1);
+    opacity: 0;
+  }
+  100% {
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+.barcode > div:nth-child(13) {
+  animation: bar-13 5s ease-out infinite forwards;
+}
+
+@keyframes bar-14 {
+  0%, 17% {
+    transform: scaleY(0);
+  }
+  47% {
+    transform: scaleY(1);
+  }
+  76% {
+    opacity: 1;
+  }
+  91% {
+    opacity: 0;
+  }
+  99.5% {
+    transform: scaleY(1);
+    opacity: 0;
+  }
+  100% {
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+.barcode > div:nth-child(14) {
+  animation: bar-14 5s ease-out infinite forwards;
+}
+
+@keyframes bar-15 {
+  0%, 26% {
+    transform: scaleY(0);
+  }
+  49% {
+    transform: scaleY(1);
+  }
+  81% {
+    opacity: 1;
+  }
+  89% {
+    opacity: 0;
+  }
+  99.5% {
+    transform: scaleY(1);
+    opacity: 0;
+  }
+  100% {
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+.barcode > div:nth-child(15) {
+  animation: bar-15 5s ease-out infinite forwards;
+}
+
+@keyframes bar-16 {
+  0%, 21% {
+    transform: scaleY(0);
+  }
+  55% {
+    transform: scaleY(1);
+  }
+  72% {
+    opacity: 1;
+  }
+  92% {
+    opacity: 0;
+  }
+  99.5% {
+    transform: scaleY(1);
+    opacity: 0;
+  }
+  100% {
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+.barcode > div:nth-child(16) {
+  animation: bar-16 5s ease-out infinite forwards;
+}
+
+@keyframes bar-17 {
+  0%, 23% {
+    transform: scaleY(0);
+  }
+  50% {
+    transform: scaleY(1);
+  }
+  77% {
+    opacity: 1;
+  }
+  88% {
+    opacity: 0;
+  }
+  99.5% {
+    transform: scaleY(1);
+    opacity: 0;
+  }
+  100% {
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+.barcode > div:nth-child(17) {
+  animation: bar-17 5s ease-out infinite forwards;
+}
+
+@keyframes bar-18 {
+  0%, 21% {
+    transform: scaleY(0);
+  }
+  68% {
+    transform: scaleY(1);
+  }
+  81% {
+    opacity: 1;
+  }
+  91% {
+    opacity: 0;
+  }
+  99.5% {
+    transform: scaleY(1);
+    opacity: 0;
+  }
+  100% {
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+.barcode > div:nth-child(18) {
+  animation: bar-18 5s ease-out infinite forwards;
+}
+
+@keyframes bar-19 {
+  0%, 8% {
+    transform: scaleY(0);
+  }
+  68% {
+    transform: scaleY(1);
+  }
+  81% {
+    opacity: 1;
+  }
+  93% {
+    opacity: 0;
+  }
+  99.5% {
+    transform: scaleY(1);
+    opacity: 0;
+  }
+  100% {
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+.barcode > div:nth-child(19) {
+  animation: bar-19 5s ease-out infinite forwards;
+}
+
+@keyframes bar-20 {
+  0%, 2% {
+    transform: scaleY(0);
+  }
+  67% {
+    transform: scaleY(1);
+  }
+  79% {
+    opacity: 1;
+  }
+  89% {
+    opacity: 0;
+  }
+  99.5% {
+    transform: scaleY(1);
+    opacity: 0;
+  }
+  100% {
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+.barcode > div:nth-child(20) {
+  animation: bar-20 5s ease-out infinite forwards;
+}
+
+@keyframes bar-21 {
+  0%, 16% {
+    transform: scaleY(0);
+  }
+  53% {
+    transform: scaleY(1);
+  }
+  73% {
+    opacity: 1;
+  }
+  89% {
+    opacity: 0;
+  }
+  99.5% {
+    transform: scaleY(1);
+    opacity: 0;
+  }
+  100% {
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+.barcode > div:nth-child(21) {
+  animation: bar-21 5s ease-out infinite forwards;
+}
+
+@keyframes bar-22 {
+  0%, 25% {
+    transform: scaleY(0);
+  }
+  56% {
+    transform: scaleY(1);
+  }
+  78% {
+    opacity: 1;
+  }
+  88% {
+    opacity: 0;
+  }
+  99.5% {
+    transform: scaleY(1);
+    opacity: 0;
+  }
+  100% {
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+.barcode > div:nth-child(22) {
+  animation: bar-22 5s ease-out infinite forwards;
+}
+
+@keyframes bar-23 {
+  0%, 7% {
+    transform: scaleY(0);
+  }
+  61% {
+    transform: scaleY(1);
+  }
+  73% {
+    opacity: 1;
+  }
+  92% {
+    opacity: 0;
+  }
+  99.5% {
+    transform: scaleY(1);
+    opacity: 0;
+  }
+  100% {
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+.barcode > div:nth-child(23) {
+  animation: bar-23 5s ease-out infinite forwards;
+}
+
+@keyframes bar-24 {
+  0%, 1% {
+    transform: scaleY(0);
+  }
+  59% {
+    transform: scaleY(1);
+  }
+  81% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 0;
+  }
+  99.5% {
+    transform: scaleY(1);
+    opacity: 0;
+  }
+  100% {
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+.barcode > div:nth-child(24) {
+  animation: bar-24 5s ease-out infinite forwards;
+}
+
+@keyframes bar-25 {
+  0%, 19% {
+    transform: scaleY(0);
+  }
+  52% {
+    transform: scaleY(1);
+  }
+  80% {
+    opacity: 1;
+  }
+  93% {
+    opacity: 0;
+  }
+  99.5% {
+    transform: scaleY(1);
+    opacity: 0;
+  }
+  100% {
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+.barcode > div:nth-child(25) {
+  animation: bar-25 5s ease-out infinite forwards;
+}
+
+@keyframes bar-26 {
+  0%, 5% {
+    transform: scaleY(0);
+  }
+  62% {
+    transform: scaleY(1);
+  }
+  78% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 0;
+  }
+  99.5% {
+    transform: scaleY(1);
+    opacity: 0;
+  }
+  100% {
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+.barcode > div:nth-child(26) {
+  animation: bar-26 5s ease-out infinite forwards;
+}
+
+@keyframes bar-27 {
+  0%, 13% {
+    transform: scaleY(0);
+  }
+  68% {
+    transform: scaleY(1);
+  }
+  79% {
+    opacity: 1;
+  }
+  88% {
+    opacity: 0;
+  }
+  99.5% {
+    transform: scaleY(1);
+    opacity: 0;
+  }
+  100% {
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+.barcode > div:nth-child(27) {
+  animation: bar-27 5s ease-out infinite forwards;
+}
+
+@keyframes bar-28 {
+  0%, 11% {
+    transform: scaleY(0);
+  }
+  62% {
+    transform: scaleY(1);
+  }
+  77% {
+    opacity: 1;
+  }
+  91% {
+    opacity: 0;
+  }
+  99.5% {
+    transform: scaleY(1);
+    opacity: 0;
+  }
+  100% {
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+.barcode > div:nth-child(28) {
+  animation: bar-28 5s ease-out infinite forwards;
+}
+
+@keyframes bar-29 {
+  0%, 3% {
+    transform: scaleY(0);
+  }
+  55% {
+    transform: scaleY(1);
+  }
+  73% {
+    opacity: 1;
+  }
+  88% {
+    opacity: 0;
+  }
+  99.5% {
+    transform: scaleY(1);
+    opacity: 0;
+  }
+  100% {
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+.barcode > div:nth-child(29) {
+  animation: bar-29 5s ease-out infinite forwards;
+}
+
+@keyframes bar-30 {
+  0%, 13% {
+    transform: scaleY(0);
+  }
+  49% {
+    transform: scaleY(1);
+  }
+  79% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 0;
+  }
+  99.5% {
+    transform: scaleY(1);
+    opacity: 0;
+  }
+  100% {
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+.barcode > div:nth-child(30) {
+  animation: bar-30 5s ease-out infinite forwards;
+}
\ No newline at end of file
diff --git a/public/scan-loading-screen/scan-loading-screen.js b/public/scan-loading-screen/scan-loading-screen.js
new file mode 100644
index 0000000..5bf9dbc
--- /dev/null
+++ b/public/scan-loading-screen/scan-loading-screen.js
@@ -0,0 +1,21 @@
+class ScanLoadingScreen extends HTMLElement {
+    constructor() {
+        super();
+        const shadowRoot = this.attachShadow({mode: 'open'});
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = '/scan-loading-screen/scan-loading-screen.css';
+        const container = document.createElement('div');
+        container.classList.add('container');
+        const barcode = document.createElement('div');
+        barcode.classList.add('barcode');
+        for(let i = 0; i < 30; i++) {
+            const div = document.createElement('div');
+            barcode.appendChild(div);
+        }
+        container.appendChild(barcode);
+        shadowRoot.appendChild(link);
+        shadowRoot.appendChild(container);
+    }
+}
+customElements.define('scan-loading-screen', ScanLoadingScreen);
\ No newline at end of file