CSS3 एनिमेटेड अपलोड आइकन

यह विचार डैन एडेन ( डेमो ) से लिया गया था, मैंने अभी विधि को थोड़ा संशोधित किया है।

दिल

एक सर्कल के रूप में हम एक फ्रेम के साथ एक साधारण ब्लॉक का उपयोग करते हैं। फ्रेम में कोई भी रंग और चौड़ाई हो सकती है (यह इस तरह की विशिष्टता है कि ब्लॉक पृष्ठभूमि और अन्य चीजों से बिल्कुल स्वतंत्र है)। हम फ्रेम को 100% तक गोल करते हैं और इसके ऊपरी हिस्से को पारदर्शी बनाते हैं। इस अंतर में हम अपने पसंदीदा छद्म तत्वों का उपयोग करके एक त्रिकोण (एक शून्य ब्लॉक आकार और सीमा के साथ एक हैक) सम्मिलित करते हैं। खैर, अंत में, हम लोडिंग प्रभाव का अनुकरण करने के लिए ब्लॉक को चेतन करते हैं।

अंकन:

<span class="spinner"></span>​ 

सीएसएस:

 .spinner { display: block; width: 35px; height: 35px; margin: 80px 150px; position: relative; border: 2px solid rgba(0,0,0,0.5); border-top-color: transparent; border-radius: 100%; animation: spin 1s infinite linear; } .spinner:after { content: ''; display: block; width: 0; height: 0; position: absolute; top: -6px; left: 3px; border: 6px solid transparent; border-bottom-color: rgba(0,0,0,0.5); transform: rotate(45deg); } @keyframes spin { to { transform: rotate(360deg); } }​ 

ब्राउज़रों के लिए उपसर्ग निर्दिष्ट करना न भूलें!

विधि सभी आधुनिक ब्राउज़रों में काम करती है (IE <= 9, चलो अलविदा!)

Jsfiddle डेमो