pre loader trial version #2

Sahiti-Dev · Nov 12, 2021 · 0fe3311 · 0fe3311
1 parent b509b06
commit 0fe3311
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 53 deletions.
diff --git a/css/preloader.css b/css/preloader.css
@@ -0,0 +1,54 @@
+
+/* new loader page */
+
+
+#ploader {
+    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/6963bbf342d87b3a2150bd8f59682b89.jpg);
+    -webkit-background-clip: text;
+    background-size: contain;
+    width: 100%;
+    text-align: center;
+    color: transparent;
+  }
+  #ploader::before {
+    content: attr(data-heading);
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    background: linear-gradient(45deg, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0) 100%);
+    -webkit-background-clip: text;
+    color: transparent;
+    mix-blend-mode: screen;
+    animation: shine 1s infinite;
+    background-size: 200%;
+    /* text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2), -2px 2px 10px rgba(0, 0, 0, 0.2), -2px -2px 10px rgba(0, 0, 0, 0.2); */
+  }
+  @keyframes shine {
+    0% {
+        background-position: -100%;
+   }
+    100% {
+        background-position: 100%;
+   }
+  }
+  /* Not needed for demo */
+  /* @font-face {
+    font-family: 'frozen';
+    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Ice%20kingdom%20-%20Bold%20-%20Por%20Kustren.woff');
+  } */
+
+  #ploader{
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    position: absolute;
+    font-size: 12vw;
+    margin: 0;
+    font-family: 'frozen', serif;
+    font-weight: 700;
+  }
+
+
+  /* new loader page */
+
diff --git a/home.html b/home.html
@@ -39,6 +39,7 @@
     <!-- Link Swiper's CSS -->
 
     <link rel="stylesheet" href="css/swiper-bundle.min.css">
+    <link rel="stylesheet" href="css/preloader.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link href="https://fonts.googleapis.com/css2?family=PT+Serif&family=Raleway:wght@300;500&display=swap" rel="stylesheet">
     <!-- Global site tag (gtag.js) - Google Analytics -->

diff --git a/style.css b/style.css
@@ -2540,56 +2540,3 @@ height: 40px;
   top: 0px;
   left: 0px;
 }
-
-/* new loader page */
-
-
-#ploader {
-  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/6963bbf342d87b3a2150bd8f59682b89.jpg);
-  -webkit-background-clip: text;
-  background-size: contain;
-  width: 100%;
-  text-align: center;
-  color: transparent;
-}
-#ploader::before {
-  content: attr(data-heading);
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  background: linear-gradient(45deg, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0) 100%);
-  -webkit-background-clip: text;
-  color: transparent;
-  mix-blend-mode: screen;
-  animation: shine 1s infinite;
-  background-size: 200%;
-  /* text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2), -2px 2px 10px rgba(0, 0, 0, 0.2), -2px -2px 10px rgba(0, 0, 0, 0.2); */
-}
-@keyframes shine {
-  0% {
-      background-position: -100%;
- }
-  100% {
-      background-position: 100%;
- }
-}
-/* Not needed for demo */
-/* @font-face {
-  font-family: 'frozen';
-  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Ice%20kingdom%20-%20Bold%20-%20Por%20Kustren.woff');
-} */
-
-#ploader{
-  top: 40%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  position: absolute;
-  font-size: 12vw;
-  margin: 0;
-  font-family: 'frozen', serif;
-  font-weight: 700;
-}
-
-
-/* new loader page */