feat: release v1.0.0

src/components/page-loading/loading.module.css

@@ -0,0 +1,66 @@
+
+.loading-wrap {
+  background-color: #ffffff;
+  opacity: 1;
+  background-image:  repeating-linear-gradient(to right, transparent 0, transparent 2px, #ffffff 2px, #ffffff 6px, transparent 6px, transparent 8px), repeating-linear-gradient(to bottom, transparent 0, transparent 2px, #ffffff 2px, #ffffff 6px, transparent 6px, transparent 8px), linear-gradient(to bottom, #f3f3f3 0.72px, transparent 0.72px), linear-gradient(to right, #f3f3f3 0.72px, transparent 0.72px) ;
+  background-size: 100% 100%, 100% 100%, 24px 24px, 24px 24px;
+  background-position: 0 0, 0 0, 0 -0.24px, -0.24px 0;
+
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 100vw;
+  height: 100vh;
+  align-items: center;
+  justify-content: center;
+}
+
+/*region*/
+.logo{
+  width: 64px;
+  height: 64px;
+  object-fit: contain;
+}
+
+/*endregion ----------------*/
+.loader2 {
+  --color-1: #6b7280;
+  --size: 1px;
+  font-size: calc(18 * var(--size));
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: bold;
+  display: inline-block;
+  letter-spacing: calc(2 * var(--size));
+  color: var(--color-1);
+  -webkit-mask-image: linear-gradient(
+    90deg,
+    transparent 0%,
+    #000 30%,
+    #000 70%,
+    transparent 100%
+  );
+  mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
+  -webkit-mask-size: 250% 100%;
+  mask-size: 250% 100%;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  box-sizing: border-box;
+  animation: animloader2 2s linear infinite;
+}
+
+@keyframes animloader2 {
+  0% {
+    -webkit-mask-position: 150% 0;
+    mask-position: 150% 0;
+  }
+  100% {
+    -webkit-mask-position: -150% 0;
+    mask-position: -150% 0;
+  }
+}