右端からフェードアウトしていく風のものはあったのですが両端からは見つからなかったので自作。
白いボックスを両端から出して背景を覆い隠しているだけです。
#loading{width:100vw;height:100vh;transition:all1s;background-color:#274bd2;position:fixed;top:0;left:0;z-index:9999;}.fadeout{display:none;}#left_bk,#right_bk{width:0;height:100vh;background-color:rgba(255,255,255,0.8);border:none;position:absolute;top:0;z-index:2;}#line{width:3px;height:100vh;background-color:#274bd2;border:none;position:absolute;top:0;left:47.5vw;z-index:3;}#left_bk{left:0;}#right_bk{right:0;}.anime5{animation:animemove50.3slinearforwards;}/*1.5sかけて*/.anime7{animation:animemove71.5slinearforwards;}@keyframesanimemove5{0%{}100%{width:50vw;}/*50vwまで拡大*/}@keyframesanimemove7{0%{}100%{left:calc(100%-54px);}}
constbody=document.getElementsByTagName('body')[0];functionfadeOut(){left_bk.classList.add('fadeout');right_bk.classList.add('fadeout');loading.classList.add('fadeout');}window.onload=function(){setTimeout(cartain,700);setTimeout(blueline,1000);setTimeout(fadeOut,2000);};functioncartain(){left_bk.classList.add('anime5');right_bk.classList.add('anime5');$("#loading").animate({opacity:0},{duration:500,easing:'linear'});}functionblueline(){line.classList.add('anime7');}
<divid="loading"><divid="left_bk"></div><divid="right_bk"></div></div><divid="line"></div><script src="loading.js"></script>