将Precent添加到预加载器

Question

我有一个小的预装载器，我已经使用了一段时间。我想为它增加一个百分比，如1 2 3 100;

已加载页面的百分比。

有没有办法用窗口加载来实现这个目的？ 我看了一下jsfiddle codepens和jquery，但一直无法得到答案。我还想，如果padge已加载，它不会等到文本为100％，它会淡出加载器。

＆＃13;

＆＃13;

$(window).on('load', function () {	
    $('.loading-screen').fadeOut(); 
    $('#loadingScreen').delay(400).fadeOut('slow');
    $('body').delay(400).css({ 'overflow': 'visible' });
});

＆＃13;

#loadingScreen {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 10000;
}

.loading-screen {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -10px 0px 0px -10px;
}

.preloader {
	border: 4px solid #838383;
	border-radius: 50%;
	border-top: 4px solid #dddddd;
	width: 40px;
	height: 40px;
	-webkit-animation: spin 0.6s linear infinite;
	animation: spin 0.6s linear infinite;
	box-shadow: 0 0 1px #999;
	filter: blur(0.7px);
}

@-webkit-keyframes spin {
 0% {
-webkit-transform: rotate(0deg);
	 transform: rotate(0deg);
}
 100% {
-webkit-transform: rotate(360deg);
	 transform: rotate(360deg);
}
}
 @keyframes spin {
 0% {
transform: rotate(0deg);
}
 100% {
transform: rotate(360deg);
}
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loadingScreen">
  <div class="loading-screen">
    <div class="preloader"></div>
  </div>

＆＃13;

＆＃13;

＆＃13;