ko.applyBindings causes progress bar to freeze

Question

We're trying to implement a progress bar from https://codepen.io/ImBobby/pen/keaHp?page=1&

We have an extremely large data set. We're trying to implement the scroll bar so customers know the page is not broken, it's just taking longer than expected to load, but when the code gets to the ko.applyBindings call, the animation for the progress bar freezes. How do we keep the animation from freezing?

HTML

<h1>ForEach Test</h1>
<div class="container">
    <div class="loading">
    <div class="loading-bar"></div> 
    </div>
</div>
<div data-bind="foreach: people">
    <input data-bind='value:name'>
</div>

Javascript

var test = new AppViewModel();
ko.applyBindings(test);

function AppViewModel() {
var self = this;

self.people = ko.observableArray([
    { name: 'Bert' },
    { name: 'Charles' },
    { name: 'Denise' }
]);

CSS

.container{
    width: 300px;
    height: auto;
    margin: 50px auto 30px;
}

.loading{
    width: 500px;
    height: 30px;
    border: solid 2px grey;
    overflow: hidden;
    position: relative;
}

.loading-bar{
    position: absolute;
    width: 1200px;
    height: 30px;
    background: grey;
    background-image: -webkit-linear-gradient(45deg, white 0%, white 30%, grey 30%, grey 70%, white 70%);
    background-image: -webkit-moz-gradient(45deg, white 0%, white 30%, grey 30%, grey 70%, white 70%);
    background-image: -webkit-o-gradient(45deg, white 0%, white 30%, grey 30%, grey 70%, white 70%);
    background-image: linear-gradient(45deg, white 0%, white 30%, grey 30%, grey 70%, white 70%);
    background-size: 100px 30px;

    animation: slide 4s linear infinite;
}

@keyframes slide{
    from{right: 0;}
    to{right: -300px;}
}

@keyframes move{
    from{width: 0%;}
    to{width: 100%;}
}

If you duplicate the input field 10 times and duplicate the people names 100 times, you start to get to the amount of data we're trying to load. You can see on page load, the progress bar freezes its animation. How do we keep the progress bar moving while ko.applyBindings is called?

Answer 1

Take a look at the answer to this other question: Indicate that processor-heavy JS function is running (GIF spinners don't animate)

If you use a transform for the slide it seems to work better

@keyframes slide{
    from{transform: translatex(-300px);}
    to{transform: translatex(0);}
}