ローディングプログレスバーのバーがうまく表示されない。

こんにちは、今jQuery のライブラリを使ってローディングプログレスバーを実装しようとしていますが、プログレスバーがうまく表示されません。
.load-coverの要素の後ろにはいりこんでいるような感じになり、.load-coverの要素が開くと残像が見えるようなかんじです...
できれば、数字のカウントアップの下に同時進行でバーのプログレスも表示したいとおもっています。
なにかアドバイスいただけますと嬉しいいです。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="style.css">
7  </head>
8  <body>
9    <div id="load">
10        <div id="load_text"></div>
11        <div class="load-cover load-cover-up"></div>
12        <div class="load-cover load-cover-down"></div>
13    </div>
14
15    <p>hello</p>
16
17    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
18    <script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.js"></script>
19    <script src="main.js"></script>
20
21  </body>
22</html>

CSS
1#load {
2	position: fixed;
3	width: 100%;
4	height: 100%;
5	z-index: 999;
6	text-align:center;
7	color:#fff;
8}
9
10#load-text {
11	position: absolute;
12	top: 50%;
13	left: 50%;
14    z-index: 999;
15	transform: translate(-50%, -50%);
16	color: #fff;
17	width: 100%;
18}
19
20/*画面のアニメーション*/
21.load-cover {
22    width: 100%;
23    height: 50%;
24    background-color: #62707d;
25    transition: all .2s cubic-bezier(.04, .435, .315, .9);
26    transform: scaleY(1);
27}
28.load-cover-up {
29    transform-origin: center top;
30}
31.load-cover-down {
32    position: absolute;
33    bottom: 0;
34    transform-origin: center bottom;
35}
36.load-cover-up.coveranime {
37    transform: scaleY(0);
38}
39.load-cover-down.coveranime {
40    transform: scaleY(0);
41}

jQuery
1var bar = new ProgressBar.Line(load, {
2	easing: 'easeInOut',
3	duration: 1000,
4	strokeWidth: 0.3,
5	color: '#555',
6	trailWidth: 0.3,
7	trailColor: '#bbb',
8	text: {			
9		style: {
10			position: 'absolute',
11            'z-index': '10',
12			left: '50%',
13			top: '50%',
14			padding: '0',
15			margin: '-30px 0 0 0',
16			transform:'translate(-50%,-50%)',
17			'font-size':'16px',
18			color: '#fff',
19		},
20		autoStyleContainer: false 
21	},
22	step: function(state, bar) {
23		bar.setText(Math.round(bar.value() * 100) + ' %'); 
24	}
25});
26
27//アニメーションスタート
28bar.animate(1.0, function () {
29	$("#load-text").fadeOut(10);
30	$(".load-cover-up").addClass("coveranime");
31	$(".load-cover-down").addClass("coveranime");
32	$("#load").fadeOut();
33});