CSS Only Page Loading Animation

Here are the HTML and CSS files' text.
HTML (index.html)

<div class="box">
<span class="c1"></span>
<span class="c2"></span>
<span class="c3"></span></div>

CSS (style.css)

.box {position: absolute; top: 50%; left: 50%;
transform: translate(-50%,-50%);}

.box span {height: 40px; width: 40px;
border-radius: 50%; margin: 0 6px;
display: inline-block;}

.c1 {background: #262626;
animation: c1 1s infinite;}
.c2 {background: #262626;
animation: c2 1s infinite;}
.c3 {background: #262626;
animation: c3 1s infinite;}

@keyframes c1{0%{transform: scale(1);}
25%{transform: scale(1);}
50%{transform: scale(1.4);}
75%{transform: scale(1);}
100%{transform: scale(1);}}

@keyframes c2{0%{transform: scale(1);}
25%{transform: scale(1);}
50%{transform: scale(1);}
75%{transform: scale(1.4);}
100%{transform: scale(1);}}

@keyframes c3{ 0%{transform: scale(1);}
25%{transform: scale(1);}
50%{transform: scale(1);}
75%{transform: scale(1);}
100%{transform: scale(1.4);}}

JavaScript (main.js)

$(window).on("load",function(){ $(".box").fadeOut("slow"); });

with JavaScript, loading animation will fade when the page is loaded.