add animation

css/index.css

@@ -16,7 +16,7 @@ div.sidebar div:nth-of-type(n+1) span{
 
 div.sidebar div:nth-of-type(n+1) a{
 	text-decoration: none;
-	transition:all ease .2s;
+	transition:all ease .1s;
 	padding-left: 2px;
 	border-radius:5px;
 	box-shadow: 1px 1px 2px #999;

css/myui.css

@@ -8,6 +8,7 @@ body,
 html {
 	margin: 0;
 	padding: 0;
+	height: 100%;
 }
 
 body {
@@ -365,6 +366,64 @@ body {
 	margin-bottom: 10px
 }
 
+.loading{
+	display: block;
+	position:absolute;
+	top:50%;
+	left:50%;
+	transform:translate(-50%,-50%);
+	width:100px;
+	height:100px;
+	z-index:100;
+	animation:fadeIn .2s ease .5s forwards;
+	opacity: 0;
+}
+
+.loading span{
+	display: block;
+	position: absolute;
+	top:0px;
+	left: 45px;
+	height:10px;
+	width:10px;
+	background:white;
+	border-radius: 10px;
+	transform-origin: 5px 50px;
+	animation: load 2s cubic-bezier(.6,0,.4,1) infinite;
+	
+}
+
+.loading span:nth-of-type(1){
+	animation-delay: .125s
+}
+.loading span:nth-of-type(2){
+	animation-delay: .250s
+}
+.loading span:nth-of-type(3){
+	animation-delay: .375s
+}
+.loading span:nth-of-type(4){
+	animation-delay: .5s
+}
+.loading span:nth-of-type(5){
+	animation-delay: .625s
+}
+.loading span:nth-of-type(6){
+	animation-delay: .750s
+}
+
+@keyframes load {
+	0%{
+		transform:rotate(0deg)
+	}
+	50% {
+		transform:rotate(360deg);
+	}
+	100%{
+		transform:rotate(360deg);
+	}
+}
+
 @keyframes fadeIn {
 	from {
 		opacity: 0

index.html

@@ -43,7 +43,14 @@
 			</div>
 		</div>
 	</div>
-	<!-- <div class="mask"></div> -->
+	<div class="loading">
+			<span></span>
+			<span></span>
+			<span></span>
+			<span></span>
+			<span></span>
+			<span></span>
+	</div>
 	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
 	<script src="js/drag.js"></script>
 	<script src="js/initialize.js"></script>

js/index.js

@@ -18,6 +18,10 @@ $.ajax({
 	success: function (response) {
 		var lastIndex = response.length - 1;
 
+		if(response.length <= index){
+			return;
+		}
+
 		listContent(response, lastIndex);
 
 		if (response[lastIndex]['hasCode'])

js/initialize.js

@@ -127,6 +127,7 @@ function listContent(json, num) {
 			sidebar.append($('<div>').append($('<span>').append(' · ' + json[index]['title'])));
 		}
 	}
+	$('.loading').remove();
 }
 
 function getQueryString(param) {

js/view.js

@@ -5,7 +5,9 @@
 		url: "content.json?timestamp=" + (new Date()).valueOf(),
 		dataType: "json",
 		success: function (response) {
-
+			
+			if (response.length <= index)
+				return;
 			listContent(response, index);
 
 			if (response[index]['hasCode'])

view.html

@@ -43,7 +43,14 @@
 			</div>
 		</div>
 	</div>
-	<!-- <div class="mask"></div> -->
+	<div class="loading">
+			<span></span>
+			<span></span>
+			<span></span>
+			<span></span>
+			<span></span>
+			<span></span>
+	</div>
 	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
 	<script src="js/drag.js"></script>
 	<script src="js/initialize.js"></script>