Прелоадер с переливанием текста

<div id="preloader">
<img src="https://static.tildacdn.com/tild3538-6564-4137-b366-373639346131/24423223.svg" id="preloader-logo" alt="Preloader Logo">
<p id="preloader-quote"></p>
</div>
<style>
#preloader {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 99999;
background-color: black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

#preloader-logo {
width: 0px;
height: auto;
}

#preloader-quote {
margin-top: 40px;
width: 90%;
text-align: center;
font-size: 80px;
color: #7046F7;
max-width: 800px;
opacity: .5;
font-family: 'HelveticaNeue', Arial, sans-serif;
letter-spacing: 1px;
font-weight: 500;
}

#preloader-quote {
position: relative;
overflow: hidden;
background: linear-gradient(90deg, #151617, #fbfbfb, #151617);
background-repeat: no-repeat;
background-size: 80%;
animation: animate 3s linear infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(255, 255, 255, 0);
}

@keyframes animate {
0% {
background-position: -300%;
}
100% {
background-position: 300%;
}
}
</style>
<script>
$(document).ready(function() { var text = "Sonneto Design"; var speed = 110; var contentLoaded = false; function typeWriter(text, i, fnCallback) { if (i < text.length) { $('#preloader-quote').html(text.substring(0, i + 1)); setTimeout(function() { typeWriter(text, i + 1, fnCallback); }, speed); } else { fnCallback(); } } function startAnimation() { typeWriter(text, 0, function() { if (contentLoaded) { setTimeout(function() { $('#preloader').fadeOut('slow'); }, 3000); } else { setTimeout(function() { $('#preloader').fadeOut('slow'); }, 5000); } }); } startAnimation(); $(window).on('load', function() { contentLoaded = true; }); });
</script>