Make sure to include a time unit for your animation duration.
You have two options: either add ms by using
"animation": "load " + rnd + "ms linear"
(notice the spaces between the variables) or divide your
rnd variable by 1000 since it outputs values in thousands and use
s with
"animation": "load " + rnd/1000 + "s linear"
.
If these solutions don't work, please provide a [MCV example](https://stackoverflow.com/help/mcve) so we can assist you further.
UPDATE: I've made changes to your code snippet. The issue was with the usage of .css( property, value) instead of a function as you had initially sent.
$(window).load(function() {
var rnd = Math.random() * (8000 - 2000) + 2000;
$('.progress').css("animation", "load " + rnd + "ms linear");
setTimeout(function() {
$('#page').addClass('loaded');
$('#page').removeClass('unloaded');
$('#loader').hide();
}, rnd);
});
#page {
position: absolute;
background: rgb(240, 240, 240);
height: 100%;
width: 100%;
}
#loader {
position: absolute;
top: calc(50% - 10px);
left: calc(25%);
width: 50%;
}
.progress {
width: 100%;
height: 20px;
background: #3498db;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.loaded {
opacity: 1;
}
.unloaded {
opacity: 0;
}
@keyframes load {
0% {
width: 0%;
}
25% {
width: 50%;
}
50% {
width: 60%;
}
90% {
width: 95%;
}
100% {
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loader">
<div class="progress"></div>
</div>
<div id="page" class="unloaded">
Loaded result
</div>