Add a css3 loader in starting

dkdndes · Mar 13, 2018 · eb01e49 · eb01e49
1 parent 55278e3
commit eb01e49
Show file tree

Hide file tree

Showing 2 changed files with 151 additions and 4 deletions.
diff --git a/css/pythonbooks.css b/css/pythonbooks.css
@@ -9,7 +9,7 @@
  */
 
 /*
- NOTE FROM REVOLUNET : 
+ NOTE FROM REVOLUNET :
  Only Bootstrap styles needed for PythonBooks are here.
 */
 
@@ -118,6 +118,145 @@ body {
   color: #333333;
   background-color: #ffffff;
 }
+
+/* css for loader */
+#loader-wrapper {
+  position: relative;
+  top:0;
+  left:0;
+  width:100%;
+  height: 100%;
+}
+
+#loader{
+  display: block;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 150px;
+  height: 150px;
+  margin: -75px 0 0 -75px;
+  margin-top: 100px;
+  border: 6px solid transparent;
+  border-radius: 50%;
+  border-top-color:#3498db;
+  z-index: 10001;
+
+  -webkit-animation: spin 1.5s linear infinite;
+  animation: spin 1.5s linear infinite;
+}
+
+#loader::before {
+  content:"";
+  position: absolute;
+  top:5px;
+  left:5px;
+  right:5px;
+  bottom:5px;
+  border:6px solid transparent;
+  border-radius: 50%;
+  border-top-color:#e74c3c;
+
+  -webkit-animation: spin 1.5s linear infinite;
+  animation: spin 1.5s linear infinite;
+}
+
+#loader::after {
+  content:"";
+  position: absolute;
+  top:15px;
+  left:15px;
+  right:15px;
+  bottom:15px;
+  border:6px solid transparent;
+  border-radius: 50%;
+  border-top-color: #f9c922;
+
+  -webkit-animation: spin 1.5s linear infinite;
+  animation: spin 1.5s linear infinite;
+}
+
+@-webkit-keyframes spin{
+  0% {
+    -webkit-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spin {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+}
+
+#loader-wrapper .loader-section {
+    position: fixed;
+    top: 0;
+    width: 50%;
+    height: 100%;
+    background-color: #000;
+    z-index: 10000;
+}
+
+#loader-wrapper .loader-section.section-left {
+    left: 0;
+}
+
+#loader-wrapper .loader-section.section-right {
+    right: 0;
+}
+
+/* Loaded */
+.loaded #loader-wrapper .loader-section.section-left {
+    -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
+    -ms-transform: translateX(-100%);  /* IE 9 */
+    transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */
+
+    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+            transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+}
+
+.loaded #loader-wrapper .loader-section.section-right {
+    -webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */
+    -ms-transform: translateX(100%);  /* IE 9 */
+    transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */
+
+    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+            transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+}
+
+.loaded #loader {
+    opacity: 0;
+    -webkit-transition: all 0.3s ease-out;
+            transition: all 0.3s ease-out;
+}
+
+.loaded #loader-wrapper{
+  visibility: hidden;
+}
+
+.no-js #loader-wrapper {
+    display: none;
+}
+.no-js h1 {
+    color: #222222;
+}
+
+/* end of css for loader */
+
 a {
   color: #0088cc;
   text-decoration: none;
@@ -1292,7 +1431,7 @@ a.jsbookslinks {
   width: 140px;
   height: 184px;
   background: rgba(54, 109, 156,.9) url('../img/view.png') no-repeat center;
-  z-index: 10;
+  z-index: 5;
   -webkit-transition:opacity .2s linear;
   -moz-transition:opacity .2s linear;
   -o-transition:opacity .2s linear;
@@ -1668,7 +1807,7 @@ ul#social_buttons li a:hover {
     width: 140px;
     height: 184px;
   }
-  
+
 }
 
 @media (min-width: 768px) and (max-width: 979px) {

diff --git a/index.html b/index.html
@@ -39,6 +39,13 @@ <h1>The best free Python resources</h1>
         </ul>
     </div>
 
+    <!-- adding loader -->
+    <div id="loader-wrapper">
+      <div id="loader"></div>
+      <div class="loader-section section-left"></div>
+      <div class="loader-section section-right"></div>
+    </div>
+
     <div class="container">
         <!-- ==========================
         JOBS
@@ -127,6 +134,7 @@ <h1>The best free Python resources</h1>
 
 
     $(document).ready(function() {
+      $('body').addClass('loaded');
       $.getJSON('./issues.json?' + Math.random(), function(data) {
         var template = $('#booktpl').html();
         data.books.sort(randOrd);
@@ -146,7 +154,7 @@ <h1>The best free Python resources</h1>
          <div class="span4 booksection {{ level }}">
           <a target="_blank" href="{{url}}">
             <div class="view"></div>
-            <div title="{{ title }}" id="cover" style="background:black url('{{cover}}') no-repeat center;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;">
+            <div title="{{ title }}" id="cover" style="background:black url('{{cover}}') no-repeat center;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;z-index:50">
             </div>
             <h2 title="{{ title }}">{{title}}</h2>
           </a>