feat:added shimmer for iframe

dev1abhi · Mar 30, 2024 · c4cd481 · c4cd481
1 parent 730b435
commit c4cd481
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/movie_details/movie_details.css b/movie_details/movie_details.css
@@ -153,6 +153,22 @@ width: 100%
   margin: 5px; /* Add some spacing between images */
 }
 
+@keyframes shimmer {
+  0% {
+    background-position: -1000px;
+  }
+  100% {
+    background-position: 1000px;
+  }
+}
+
+.shimmer-bg {
+  background: linear-gradient(to right, rgba(16, 32, 47, 0.1) 0%, rgba(16, 32, 47, 0.3) 50%, rgba(33, 100, 161, 0.1) 100%);
+  background-size: 1000px 100%;
+  animation: shimmer 1.5s infinite linear;
+}
+
+
 
  /* CSS for sidebar div*/
 

diff --git a/movie_details/movie_details.html b/movie_details/movie_details.html
@@ -94,7 +94,7 @@
     <center>
     <div id="videoPlayer" style="background-color: rgb(3, 16, 27);color: black;  ">
       <center>
-        <iframe id="movieIframe" src="" width="80%"  style="margin-bottom: -5px;" frameborder="0" allowfullscreen></iframe>
+        <iframe id="movieIframe" src="" width="80%"  style="margin-bottom: -5px;" frameborder="0" allowfullscreen class="shimmer-bg" ></iframe>
       </center>
       </div>
 

diff --git a/series_details/series_details.html b/series_details/series_details.html
@@ -99,7 +99,7 @@
       </div>
 
     <div id="buttons">
-        <button id="Trailerbtn" class="btn">Watch Trailer</button>
+        <button id="Trailerbtn" class="btn">Trailer</button>
 
         <button id="Server1Btn" class="btn" >Server 1</button>