कोणीय 2 लोडिंग एनीमेशन फ्रीज

Question

मैंने एक कोणीय 2 ऐप विकसित किया है जिसमें काफी आकार है और लोड करने में एक पल लगता है (vendor.js लगभग 5 एमबी बड़ा है)।

<span class="loading"><img src="loading.gif" /><br/>Wait ...</span> 

: समय उपयोगकर्ता के लिए एक छोटे से अधिक सुखद बनाने के लिए मैं एक सीएसएस एनीमेशन (लोडिंग बार) या कोई GIF एनीमेशन (मैं दोनों की कोशिश की) तरह से साथ मानक

<span class="loading">Loading...</span> 

प्रतिस्थापित या

<span class="loading"><span class="circle-loader-with-css-animations"></span>Wait ...</span> 

लेकिन इस में से कोई भी एनीमेशन के बाद से काम करता है (सीएसएस या GIF) पृष्ठ लोड के दौरान जमा है और जब यह कोणीय एप्लिकेशन जारी है के लिए तैयार है और प्रदर्शित किया जाता है। तो परिणाम एक फ्रीज लोडिंग एनीमेशन है और फिर ऐप = स्थिति पहले से बेहतर नहीं है ...

बीटीडब्लू: जावास्क्रिप्ट (उदाहरण के लिए setInterval) भी इस लोड समय के दौरान निष्पादित नहीं किया जाता है। मैंने vendor.jsasync और defer के साथ लेकिन सफलता के बिना शामिल करने का प्रयास किया।

कोई विचार?

संपादित करें: Google क्रोम समस्या प्रतीत होता है - फ़ायरफ़ॉक्स का उपयोग करके एनीमेशन आसानी से काम करता है।

Answer 1

मैं सीएसएस का उपयोग करके अपनी व्यक्तिगत साइट पर लोडिंग स्पिनर का उपयोग करता हूं, बस सोचा कि मैं अपना कोड साझा करूंगा क्योंकि यह मेरे लिए काम करता है और इसमें बड़े कोडबेस के साथ कोई समस्या नहीं दिखती है। स्पष्ट रूप से आप इसे अपनी आवश्यकताओं के अनुसार समायोजित करना चाहते हैं यदि यह आपके लिए काम कर रहा है।

HTML में:

<div class="loader"></div> 

सीएसएस में:

.loader { 
    border: 16px solid #f3f3f3; 
    border-radius: 50%; 
    border-top: 16px solid grey; 
    width: 70px; 
    height: 70px; 
    -webkit-animation: spin 1s linear infinite; 
    animation: spin 1s linear infinite; 
}