u

code/link56/link56-frontend/src/components/CustomLoading.vue

@@ -0,0 +1,76 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  inContainer: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const containerClass = computed(() => {
+  return props.inContainer ? 'container-inner' : 'container-fixed'
+})
+</script>
+
+<template>
+  <div :class="containerClass">
+    <!-- From Uiverse.io by nazeer004 -->
+    <div class="loader">
+      <span>link56.net</span>
+      <span>link56.net</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container-inner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.container-fixed {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/* From Uiverse.io by nazeer004 */
+.loader {
+  position: relative;
+}
+
+.loader span {
+  position: absolute;
+  color: #fff;
+  transform: translate(-50%, -50%);
+  font-size: 38px;
+  letter-spacing: 5px;
+}
+
+.loader span:nth-child(1) {
+  color: transparent;
+  -webkit-text-stroke: 0.3px rgb(0, 57, 244);
+}
+
+.loader span:nth-child(2) {
+  color: rgb(0, 4, 255);
+  -webkit-text-stroke: 1px rgb(17, 0, 255);
+  animation: uiverse723 3s ease-in-out infinite;
+}
+
+@keyframes uiverse723 {
+  0%,
+  100% {
+    clip-path: polygon(0% 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);
+  }
+
+  50% {
+    clip-path: polygon(0% 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
+  }
+}
+</style>