aboutsummaryrefslogtreecommitdiff
path: root/src/app/anime/video
diff options
context:
space:
mode:
Diffstat (limited to 'src/app/anime/video')
-rw-r--r--src/app/anime/video/loading.css346
-rw-r--r--src/app/anime/video/loading.jsx9
2 files changed, 355 insertions, 0 deletions
diff --git a/src/app/anime/video/loading.css b/src/app/anime/video/loading.css
new file mode 100644
index 0000000..aa3a519
--- /dev/null
+++ b/src/app/anime/video/loading.css
@@ -0,0 +1,346 @@
+.loadingContainer {
+ color: white;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 80dvh;
+}
+
+
+.text-flicker-in-glow {
+ -webkit-animation: text-flicker-in-glow 4s linear both;
+ animation: text-flicker-in-glow 4s linear both;
+ font-size: 36px;
+ font-family: "Kanit";
+}
+
+/* ----------------------------------------------
+ * Generated by Animista on 2024-3-21 9:58:16
+ * Licensed under FreeBSD License.
+ * See http://animista.net/license for more info.
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+/**
+ * ----------------------------------------
+ * animation text-flicker-in-glow
+ * ----------------------------------------
+ */
+
+@-webkit-keyframes text-flicker-in-glow {
+ 0% {
+ opacity: 0;
+ }
+
+ 10% {
+ opacity: 0;
+ text-shadow: none;
+ }
+
+ 10.1% {
+ opacity: 1;
+ text-shadow: none;
+ }
+
+ 10.2% {
+ opacity: 0;
+ text-shadow: none;
+ }
+
+ 20% {
+ opacity: 0;
+ text-shadow: none;
+ }
+
+ 20.1% {
+ opacity: 1;
+ text-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
+ }
+
+ 20.6% {
+ opacity: 0;
+ text-shadow: none;
+ }
+
+ 30% {
+ opacity: 0;
+ text-shadow: none;
+ }
+
+ 30.1% {
+ opacity: 1;
+ text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
+ }
+
+ 30.5% {
+ opacity: 1;
+ text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
+ }
+
+ 30.6% {
+ opacity: 0;
+ text-shadow: none;
+ }
+
+ 45% {
+ opacity: 0;
+ text-shadow: none;
+ }
+
+ 45.1% {
+ opacity: 1;
+ text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
+ }
+
+ 50% {
+ opacity: 1;
+ text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
+ }
+
+ 55% {
+ opacity: 1;
+ text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
+ }
+
+ 55.1% {
+ opacity: 0;
+ text-shadow: none;
+ }
+
+ 57% {
+ opacity: 0;
+ text-shadow: none;
+ }
+
+ 57.1% {
+ opacity: 1;
+ text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
+ }
+
+ 60% {
+ opacity: 1;
+ text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
+ }
+
+ 60.1% {
+ opacity: 0;
+ text-shadow: none;
+ }
+
+ 65% {
+ opacity: 0;
+ text-shadow: none;
+ }
+
+ 65.1% {
+ opacity: 1;
+ text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
+ }
+
+ 75% {
+ opacity: 1;
+ text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
+ }
+
+ 75.1% {
+ opacity: 0;
+ text-shadow: none;
+ }
+
+ 77% {
+ opacity: 0;
+ text-shadow: none;
+ }
+
+ 77.1% {
+ opacity: 1;
+ text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
+ }
+
+ 85% {
+ opacity: 1;
+ text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
+ }
+
+ 85.1% {
+ opacity: 0;
+ text-shadow: none;
+ }
+
+ 86% {
+ opacity: 0;
+ text-shadow: none;
+ }
+
+ 86.1% {
+ opacity: 1;
+ text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
+ }
+
+ 100% {
+ opacity: 1;
+ text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
+ }
+}
+
+@keyframes text-flicker-in-glow {
+ 0% {
+ opacity: 0;
+ }
+
+ 10% {
+ opacity: 0;
+ text-shadow: none;
+ }
+
+ 10.1% {
+ opacity: 1;
+ text-shadow: none;
+ }
+
+ 10.2% {
+ opacity: 0;
+ text-shadow: none;
+ }
+
+ 20% {
+ opacity: 0;
+ text-shadow: none;
+ }
+
+ 20.1% {
+ opacity: 1;
+ text-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
+ }
+
+ 20.6% {
+ opacity: 0;
+ text-shadow: none;
+ }
+
+ 30% {
+ opacity: 0;
+ text-shadow: none;
+ }
+
+ 30.1% {
+ opacity: 1;
+ text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
+ }
+
+ 30.5% {
+ opacity: 1;
+ text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
+ }
+
+ 30.6% {
+ opacity: 0;
+ text-shadow: none;
+ }
+
+ 45% {
+ opacity: 0;
+ text-shadow: none;
+ }
+
+ 45.1% {
+ opacity: 1;
+ text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
+ }
+
+ 50% {
+ opacity: 1;
+ text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
+ }
+
+ 55% {
+ opacity: 1;
+ text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
+ }
+
+ 55.1% {
+ opacity: 0;
+ text-shadow: none;
+ }
+
+ 57% {
+ opacity: 0;
+ text-shadow: none;
+ }
+
+ 57.1% {
+ opacity: 1;
+ text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
+ }
+
+ 60% {
+ opacity: 1;
+ text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
+ }
+
+ 60.1% {
+ opacity: 0;
+ text-shadow: none;
+ }
+
+ 65% {
+ opacity: 0;
+ text-shadow: none;
+ }
+
+ 65.1% {
+ opacity: 1;
+ text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
+ }
+
+ 75% {
+ opacity: 1;
+ text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
+ }
+
+ 75.1% {
+ opacity: 0;
+ text-shadow: none;
+ }
+
+ 77% {
+ opacity: 0;
+ text-shadow: none;
+ }
+
+ 77.1% {
+ opacity: 1;
+ text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
+ }
+
+ 85% {
+ opacity: 1;
+ text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
+ }
+
+ 85.1% {
+ opacity: 0;
+ text-shadow: none;
+ }
+
+ 86% {
+ opacity: 0;
+ text-shadow: none;
+ }
+
+ 86.1% {
+ opacity: 1;
+ text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
+ }
+
+ 100% {
+ opacity: 1;
+ text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
+ }
+}
+
+@media (prefers-color-scheme: light) {
+ .loadingContainer {
+ color: black;
+ }
+} \ No newline at end of file
diff --git a/src/app/anime/video/loading.jsx b/src/app/anime/video/loading.jsx
new file mode 100644
index 0000000..dfa397c
--- /dev/null
+++ b/src/app/anime/video/loading.jsx
@@ -0,0 +1,9 @@
+import "./loading.css";
+
+export default function Loading() {
+ return (
+ <div className="loadingContainer">
+ <p className="text-flicker-in-glow">Loading</p>
+ </div>
+ );
+}
generated by cgit v1.2.3 (git 2.25.1) at 2026-05-30 21:01:08 +0000