Javascript 重新创建此预加载屏幕--看起来像gif而不是编码动画

这里是编码新手！ 我已经试着重新创建这个预加载屏幕（）好几个小时了，但我似乎没有把它做好。所有的在线教程都展示了如何制作动画微调器和加载器，但我喜欢这个徽标。我觉得我走错了方向。我一直在尝试使附加的gif成为我的预加载屏幕。 这是我目前的代码：

    <div id="dvLoading"></div>
*/----CSS----/*
   #dvLoading{
    background:#000       url(https://media.giphy.com/media/l4JyJHAF8blvfplf2/source.gif) no-repeat center center;
  display: blocks;
  position:relative;
  left: 50%;
  top: 50%;
  height: 150px;
  width: 150px;
  position: fixed;
  z-index: 1000;
   margin: -75px 0 0 -75px;
}
*/----JQ----/*
        $(window).load(function(){
       $('#dvLoading').fadeOut(2000);
    });

*/----CSS----/*
#DV加载{
背景：#000 url(https://media.giphy.com/media/l4JyJHAF8blvfplf2/source.gif)无重复中心；
显示：块；
位置：相对位置；
左：50%；
最高：50%；
高度：150像素；
宽度：150px；
位置：固定；
z指数：1000；
利润率：-75px 0-75px；
}
*/----JQ----/*
$（窗口）。加载（函数（）{
$（#dvLoading'）。淡出（2000年）；
});

。jquery有什么问题吗

---

任何帮助都将不胜感激

这只是一个缩放和不透明度循环

正文{
背景#ed4424；
位置：相对位置；
高度：100vh；
}
img{
位置：绝对位置；
宽度：100px；
高度：100px；
左：50%；
最高：50%；
变换原点：左；
-webkit动画：THROB 8s无限；
-moz动画：悸动8秒无限；
-o-动画：悸动8秒无限；
动画：悸动8秒无限；
}
@-webkit关键帧悸动{
0%{不透明度：1；变换：缩放（1）平移（-50%，-50%）；}
50%{不透明度：0.4；变换：缩放（0.7）平移（-50%，-50%）；}
100%{不透明度：1；变换：缩放（1）平移（-50%，-50%）；}
}
@-moz关键帧悸动{
0%{不透明度：1；变换：缩放（1）平移（-50%，-50%）；}
50%{不透明度：0.4；变换：缩放（0.7）平移（-50%，-50%）；}
100%{不透明度：1；变换：缩放（1）平移（-50%，-50%）；}
}
@-o关键帧跳动{
0%{不透明度：1；变换：缩放（1）平移（-50%，-50%）；}
50%{不透明度：0.4；变换：缩放（0.7）平移（-50%，-50%）；}
100%{不透明度：1；变换：缩放（1）平移（-50%，-50%）；}
}
@关键帧悸动{
0%{不透明度：1；变换：缩放（1）平移（-50%，-50%）；}
50%{不透明度：0.4；变换：缩放（0.7）平移（-50%，-50%）；}
100%{不透明度：1；变换：缩放（1）平移（-50%，-50%）；}
}

---

啊！谢谢你，塞格。现在，要将它插入到站点中，使它只在加载时出现&之后它就会消失，我所需要的就是修改JS？var preload=document.getElementById（“覆盖”）；addEventListener（'load'，function（）{overlay.style.display='none'；}）Sweet。谢谢你，伙计。