सामग्री डिजाइन लाइट - स्पिनर
एमडीएल विभिन्न पूर्वनिर्धारित दृश्य और व्यवहारिक संवर्द्धन लागू करने और विभिन्न प्रकार के स्पिनरों को प्रदर्शित करने के लिए सीएसएस कक्षाओं की एक श्रृंखला प्रदान करता है। निम्न तालिका उपलब्ध वर्गों और उनके प्रभावों को सूचीबद्ध करती है।
| अनु क्रमांक। | कक्षा का नाम और विवरण |
|---|---|
| 1 | mdl-spinner एक कंटेनर को एमडीएल स्पिनर घटक के रूप में पहचानता है और एक आवश्यक वर्ग है। |
| 2 | mdl-js-spinner स्पिनर के लिए बुनियादी एमडीएल व्यवहार सेट करता है और एक आवश्यक वर्ग है। |
| 3 | is-active स्पिनर को दिखाता है और एनिमेट करता है और वैकल्पिक है। |
| 4 | mdl-spinner--single-color रंग बदलने के बजाय एकल रंग का उपयोग करता है और वैकल्पिक है। |
उदाहरण
निम्नलिखित उदाहरण आपको इसके उपयोग को समझने में मदद करेगा mdl-spinner कक्षाएं और विभिन्न प्रकार के स्पिनर।
mdl_spinners.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<h4>Default Spinner</h4>
<div class = "mdl-spinner mdl-js-spinner is-active"></div>
<h4>Single Color Spinner</h4>
<div class = "mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
</body>
</html>परिणाम
परिणाम सत्यापित करें।