Create a cube loader with html and css

post

@# Create a Cube Loader with HTML and CSS #@

Creating a Cube Loader using HTML and CSS is a great way. Here's a step-by-step guide on how to make a Cube Loader.

HTML Code

</div>

</div>

</div>

</div>

</div>

</div>

यह HTML कोड एक कस्टम लोडर के लिए है, जो रुबिक क्यूब की तरह दिखता है। इसका विवरण निम्नलिखित है:

- `div class="my-loader"`: यह बाहरी डिव है, जो पूरे लोडर को समेटे हुए है।

- `div class="rubiks-cube"`: यह डिव रुबिक क्यूब को परिभाषित करता है।

- `div class="face front"`, `div class="face back"`, `div class="face left"`, `div class="face right"`, `div class="face top"`, `div class="face bottom"`: ये सभी डिव रुबिक क्यूब के विभिन्न चेहरे (सामने, पीछे, बाएं, दाएं, ऊपर नीचे) को दर्शाते हैं।

प्रत्येक चेहरे के भीतर:

- `div style="background: #color;" class="cube"`: ये डिव छोटे क्यूब्स को दर्शाते हैं, जिनके विभिन्न बैकग्राउंड रंग हैं:
- #ff3d00 (लाल)
- #ffeb3b (पीला)
- #4caf50 (हरा)
- #2196f3 (नीला)
- #ffffff (सफेद)

इन छोटे क्यूब्स को विभिन्न रंगों में विभाजित किया गया है ताकि पूरा चेहरा रुबिक क्यूब की तरह दिखे। हर चेहरा 3x3 ग्रिड में व्यवस्थित है, जैसे एक वास्तविक रुबिक क्यूब के छोटे टुकड़े होते हैं।

यह कोड आमतौर पर CSS के साथ स्टाइल किया जाता है ताकि यह एक एनीमेटेड रुबिक क्यूब की तरह घूमें और लोडिंग संकेतक के रूप में कार्य करे।

CSS Code

.my-loader {

width: 200px;

height: 200px;

perspective: 1000px;

margin: 100px auto;

}

.rubiks-cube {

width: 100%;

height: 100%;

position: relative;

transform-style: preserve-3d;

animation: my-rotateCube 5s infinite linear;

}

.my-loader .face {

position: absolute;

display: flex;

flex-wrap: wrap;

width: 100%;

height: 100%;

}

.my-loader .face.front {

transform: translateZ(100px);

}

.my-loader .face.back {

transform: rotateY(180deg) translateZ(100px);

}

.my-loader .face.left {

transform: rotateY(-90deg) translateZ(100px);

}

.my-loader .face.right {

transform: rotateY(90deg) translateZ(100px);

}

.my-loader .face.top {

transform: rotateX(90deg) translateZ(100px);

}

.my-loader .face.bottom {

transform: rotateX(-90deg) translateZ(100px);

}

.my-loader .cube {

width: calc(100% / 3);

height: calc(100% / 3);

box-sizing: border-box;

border: 1px solid #000;

}

@keyframes my-rotateCube {

0% {

transform: rotateX(0deg) rotateY(0deg);

}

100% {

transform: rotateX(360deg) rotateY(360deg);

}

यह CSS कोड एक रुबिक क्यूब लोडर के लिए स्टाइल्स को परिभाषित करता है। इसका विवरण निम्नलिखित है:

- `.my-loader`: यह कस्टम लोडर के बाहरी कंटेनर को स्टाइल करता है। इसमें 200px की चौड़ाई और ऊंचाई, 1000px की परिप्रेक्ष्य (3D प्रभाव के लिए), और 100px ऑटो मार्जिन है ताकि यह केंद्रित हो सके।

- `.rubiks-cube`: यह डिव रुबिक क्यूब को स्टाइल करता है। इसमें 100% चौड़ाई और ऊंचाई, रिलेटिव पोजीशनिंग, और 3D प्रभाव (`transform-style: preserve-3d`) है। इसमें एक एनीमेशन (`my-rotateCube`) भी है जो 5 सेकंड में पूरे क्यूब को लगातार घुमाता है।

- `.my-loader .face`: यह क्लास क्यूब के प्रत्येक चेहरे को स्टाइल करता है। प्रत्येक चेहरा एक निश्चित स्थिति में होता है, 100% चौड़ाई और ऊंचाई के साथ, और फ्लेक्स बॉक्स का उपयोग करके छोटे क्यूब्स को लपेटता है।

- `.my-loader .face.front`: सामने के चेहरे को 100px आगे खिसकाता है।

- `.my-loader .face.back`: पीछे के चेहरे को 180 डिग्री घुमाकर 100px आगे खिसकाता है।

- `.my-loader .face.left`: बाएं चेहरे को 90 डिग्री बाएं घुमाकर 100px आगे खिसकाता है।

- `.my-loader .face.right`: दाएं चेहरे को 90 डिग्री दाएं घुमाकर 100px आगे खिसकाता है।

- `.my-loader .face.top`: ऊपर के चेहरे को 90 डिग्री ऊपर घुमाकर 100px आगे खिसकाता है।

- `.my-loader .face.bottom`: नीचे के चेहरे को 90 डिग्री नीचे घुमाकर 100px आगे खिसकाता है।

- `.my-loader .cube`: छोटे क्यूब्स को स्टाइल करता है। प्रत्येक क्यूब की चौड़ाई और ऊंचाई अपने कंटेनर के 1/3 के बराबर है। इसमें बॉक्स-साइजिंग बॉर्डर-बॉक्स और 1px का काला बॉर्डर है।

- `@keyframes my-rotateCube`: यह एनीमेशन क्यूब को 360 डिग्री घुमाता है। - 0% पर, क्यूब की स्थिति मूल स्थिति (rotateX(0deg) rotateY(0deg)) में होती है। - 100% पर, क्यूब 360 डिग्री (rotateX(360deg) rotateY(360deg)) घुमाया जाता है।

यह CSS कोड लोडर को एक घुमते हुए रुबिक क्यूब के रूप में प्रदर्शित करता है, जो लोडिंग संकेतक के रूप में कार्य करता है।

JS Code

Output

Youtube whatsapp Facebook

Search This Blog

CSS PROJECTs FOR YOU