AJAX अनुरोधों को बिना gifs के एनिमेट करने के लिए Mootools प्लगइन

मैं किसी भी तरह शुद्ध html + css और पूरी तरह से gif के बिना ajax अनुरोधों के निष्पादन का एक एनीमेशन बनाना चाहता था। और उन्होंने मुटूल के लिए एक प्लगइन बनाया, जो आपको एक एकल जावास्क्रिप्ट फ़ाइल जोड़ते समय विभिन्न आकारों, पृष्ठभूमि और प्रकारों के एनिमेटेड आइकन प्राप्त करने की अनुमति देता है।

पेशेवरों:

• फेफड़े। एक एकल तत्व का वजन gif से अधिक नहीं होता है, और आप इसे साइट / एप्लिकेशन के अलग-अलग टुकड़ों में बार-बार स्टाइल करने के लिए उपयोग कर सकते हैं।
• कनेक्ट करने के लिए आसान (नीचे उदाहरण देखें)
• क्रॉस-ब्राउज़र संगतता। सुपर-अच्छा लेकिन CSS3 जैसे तत्वों के विपरीत, इनका परीक्षण IE 7+, फायरफॉस 3+, ओपेरा 11, सफारी, क्रोम, मोबाइल सफारी 4+ और एंड्रॉइड 2.2 पर किया गया था। सबसे अधिक संभावना है कि वे IE6, ओपेरा 10 और सफारी और क्रोम के पुराने संस्करणों पर काम करेंगे, लेकिन परीक्षण नहीं किया गया है।
• सभी एनिमेटेड वेबसाइट आइकन के लिए एक फ़ाइल, और प्रत्येक स्थिति के लिए एक अलग GIF नहीं।
• अपने स्वयं के एनिमेशन जोड़कर आधार वर्ग का विस्तार किया जा सकता है।
• यह सीधे प्रौद्योगिकी से संबंधित नहीं है, लेकिन यह भी शायद ही कभी देखा जाता है, इसलिए मैं जोड़ूंगा - कुछ एनिमेशन in और out मोड है, जो क्रमशः POST और GET अनुरोधों को देखने के लिए सुविधाजनक है।
• किसी कारण से, मैं बचपन से, एनिमेटेड जिफ़ की तरह नहीं हूँ

और विपक्ष:

• IE 9 में, तत्व अभी भी चौकोर हैं। यद्यपि इसमें सीमा-त्रिज्या का समर्थन किया गया है, लेकिन भरण से जुड़ा एक बग (या सुविधा) है, जिसे तुरंत बाईपास नहीं किया जा सकता है। क्या कोई मुझे बता सकता है कि यह कैसे करना है।
• सैद्धांतिक रूप से, यह लोड के तहत एक पुराने ब्राउज़र पर कमजोर मशीनों को धीमा कर सकता है। यह परीक्षणों में नहीं दिखाई दिया, लेकिन जीवन, जैसा कि आप जानते हैं, परीक्षणों से अलग है। यह IE 7 मोड में IE 8 में एक कमजोर नेटबुक पर परीक्षण किया गया था और मेरी आभासी मशीन पर - परीक्षणों के लिए कमजोर कुछ भी नहीं मिला।
• कमेंट में जरूर लिखें अभी भी ...

और बाकी सब, जैसा कि वे कहते हैं, एक बार देखना बेहतर है।
यहाँ डेमो: http://lavmax.github.com/MUX.Loaders
स्रोत और दस्तावेज यहां: https://github.com/lavmax/MUX.Loaders

उपयोग उदाहरण:
//
var loader = new MUX.Loader.Bar();
loader.start(); //
loader.stop(); //

// start() stop() html-
$('my-loaders-id').start();
$('my-loaders-id').stop();

// html- $
$(loader).inject(document.body);
// ,
loader.elem.inject(document.body);

इसे कौन पसंद करता है, इसका उपयोग करें, जो इसे पसंद नहीं करता है, कृपया रचनात्मक रूप से स्क्राइब करें।