Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
Artois
/
microfolie
2
0
Салаа 0
Файлууд Асуудлууд 0 Хуулах хүсэлтүүд 0 Мэдлэгийн сан
Эх сурвалжийг харах

Ajout loader

Arthur Brandao 5 жил өмнө
parent
7673f86193
commit
21dfb01b37
2 өөрчлөгдсөн 76 нэмэгдсэн , 1 устгасан
Өөрчлөллтийг нэгтгэж харах Өөрчлөлтийн статистик харах
  1. 68 0
      WebContent/WEB-INF/tags/loader.tag
  2. 8 1
      WebContent/scan/index.jsp

+ 68 - 0
WebContent/WEB-INF/tags/loader.tag
Файл харах 

@@ -0,0 +1,68 @@
 
+<%@ tag language="java" pageEncoding="UTF-8"%>
 
+<%@ attribute required="true" name="name" type="java.lang.String" %>
 
+
 
+<style>
 
+	#${name}main {
 
+	  position: absolute;
 
+	  top: calc(50% - 20px);
 
+	  left: calc(50% - 20px);
 
+	}
 
+	@keyframes ${name}main {
 
+	  0% { left: -100px }
 
+	  100% { left: 110%; }
 
+	}
 
+	#${name}box {
 
+	  width: 50px;
 
+	  height: 50px;
 
+	  background: #fff;
 
+	  animation: animate .5s linear infinite;
 
+	  position: absolute;
 
+	  top: 0;
 
+	  left: 0;
 
+	  border-radius: 3px;
 
+	}
 
+	@keyframes animate {
 
+	  17% { border-bottom-right-radius: 3px; }
 
+	  25% { transform: translateY(9px) rotate(22.5deg); }
 
+	  50% {
 
+	    transform: translateY(18px) scale(1,.9) rotate(45deg) ;
 
+	    border-bottom-right-radius: 40px;
 
+	  }
 
+	  75% { transform: translateY(9px) rotate(67.5deg); }
 
+	  100% { transform: translateY(0) rotate(90deg); }
 
+	} 
+	#${name}shadow { 
+	  width: 50px;
 
+	  height: 5px;
 
+	  background: #000;
 
+	  opacity: 0.1;
 
+	  position: absolute;
 
+	  top: 59px;
 
+	  left: 0;
 
+	  border-radius: 50%;
 
+	  animation: shadow .5s linear infinite;
 
+	}
 
+	@keyframes ${name}shadow {
 
+	  50% {
 
+	    transform: scale(1.2,1);
 
+	  }
 
+	}
 
+</style>
 
+
 
+<div id="${name}" class="modal loader red">
 
+    <div class="modal-content" style="overflow: hidden;">
 
+    	<div class="row">
 
+    		<div class="col s12 center-align">
 
+    			<h4 class="white-text">Chargement</h4>
 
+    		</div>
 
+    	</div>
 
+    	<div class="row mtop-5 mbot-5">
 
+    		<div class="col s12">
 
+    			<div id="${name}main">
 
+				  	<div id="${name}shadow"></div>
 
+				  	<div id="${name}box"></div>
 
+				</div>
 
+    		</div>
 
+    	</div>
 
+	</div>
 
+</div>

+ 8 - 1
WebContent/scan/index.html → WebContent/scan/index.jsp
Файл харах 

@@ -1,3 +1,7 @@
 
+<%@ page language="java" contentType="text/html; charset=UTF-8"
 
+    pageEncoding="UTF-8"%>
 
+<%@ taglib prefix="tag" tagdir="/WEB-INF/tags" %>
 
+
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html>
 
 <html>
 
 
 
@@ -73,6 +77,8 @@
 
             </div>    
             </div>    
         </div>
 
         </div>
 
     </div>
 
     </div>
 
+    <!--  Loader  -->
 
+    <tag:loader name="loader" />
 
 
 
     <!-- Script -->
 
     <!-- Script -->
 
     <script type="text/javascript" src="../js/jquery.min.js"></script>
 
     <script type="text/javascript" src="../js/jquery.min.js"></script>
 
@@ -83,7 +89,8 @@
 
     <script type="text/javascript">
 
     <script type="text/javascript">
 
     	$(document).ready(() => {
 
     	$(document).ready(() => {
 
     		const okPopup = M.Modal.getInstance($('#ok-popup'));
 
     		const okPopup = M.Modal.getInstance($('#ok-popup'));
 
-    		const errPopup = M.Modal.getInstance($('#err-popup'))
 
+    		const errPopup = M.Modal.getInstance($('#err-popup'));
 
+    		const loader = M.Modal.getInstance($('#loader'));
 
     		
     		
     		// Lecteur cookie espace
 
     		// Lecteur cookie espace
 
             const espace = getCookie("microfolies.lens.espace");
 
             const espace = getCookie("microfolies.lens.espace");