ko.applyBindings provoque barre de progression pour geler

Question

Nous essayons de mettre en œuvre une barre de progression de https://codepen.io/ImBobby/pen/keaHp?page=1&

Nous avons un ensemble de données extrêmement grande. Nous essayons d'implémenter la barre de défilement pour que les clients sachent que la page n'est pas cassée, cela prend juste plus de temps que prévu, mais quand le code arrive à l'appel de ko.applyBindings, l'animation de la barre de progression se fige. Comment pouvons-nous empêcher l'animation de geler?

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%;} 
} 

Si vous dupliquez le champ de saisie 10 fois et dupliquer les personnes noms 100 fois, vous commencez à se rendre à la quantité de données que nous essayons de charger. Vous pouvez voir au chargement de la page, la barre de progression gèle son animation. Comment garder la barre de progression en mouvement pendant que ko.applyBindings est appelé?

Answer 1

Jetez un oeil à la réponse à cette autre question: Indicate that processor-heavy JS function is running (GIF spinners don't animate)

Si vous utilisez une transformation pour la diapositive, il semble mieux fonctionner

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