Added Dice Loader (#1000)

Rakesh9100 · Jun 19, 2024 · 358cab1 · 358cab1
1 parent 55fb082
commit 358cab1
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 0 deletions.
diff --git a/Components/Loaders/Dice-Loader/index.html b/Components/Loaders/Dice-Loader/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Dice Loader</title>
+</head>
+
+<body style="background-color: aqua;">
+    <div class="MyBox" style="margin-top: 400px;">
+        <div class="cube">
+            <div class="side front">1</div>
+            <div class="side back">6</div>
+            <div class="side right">4</div>
+            <div class="side left">3</div>
+            <div class="side top">5</div>
+            <div class="side bottom">2</div>
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/Components/Loaders/Dice-Loader/style.css b/Components/Loaders/Dice-Loader/style.css
@@ -0,0 +1,76 @@
+.MyBox {
+    perspective: 1000px;
+}
+
+.cube {
+    font-size: 4em;
+    width: 2em;
+    transform-style: preserve-3d;
+    transform: rotateX(-20deg) rotateY(25deg);
+    margin: 200px auto;
+    animation: rotate 6s infinite alternate
+}
+
+@keyframes rotate {
+
+    0% {
+        transform: rotateY(0deg) translateZ(0em);
+    }
+
+    20% {
+        transform: rotateX(90deg) translateZ(0em);
+    }
+
+    40% {
+        transform: rotateY(90deg) translateZ(0em);
+    }
+
+    60% {
+        transform: rotateY(-90deg) translateZ(0em);
+    }
+
+    80% {
+        transform: rotateX(-90deg) translateZ(0em);
+    }
+
+    100% {
+        transform: rotateY(-180deg) translateZ(0em);
+    }
+
+}
+
+.side {
+    position: absolute;
+    width: 2em;
+    height: 2em;
+    background: rgba(65, 56, 56, 0.6);
+    border: 2px solid rgba(0, 0, 0, 0.5);
+    color: #fff;
+    text-align: center;
+    line-height: 2em;
+
+}
+
+.front {
+    transform: translateZ(1em);
+}
+
+.top {
+    transform: rotateX(90deg) translateZ(1em);
+}
+
+.right {
+    transform: rotateY(90deg) translateZ(1em);
+}
+
+.left {
+    transform: rotateY(-90deg) translateZ(1em);
+}
+
+.bottom {
+    transform: rotateX(-90deg) translateZ(1em);
+}
+
+.back {
+    transform: rotateY(-180deg) translateZ(1em);
+}
diff --git a/assets/html_files/loaders.html b/assets/html_files/loaders.html
@@ -177,6 +177,19 @@ <h1>Customizable Percentage Loader</h1>
                     </a>
                 </div>
             </div>
+            <div class="box">
+                <h1>Dice Loader</h1>
+                <div class="preview">
+                    <a href="../../Components/Loaders/Dice-Loader/index.html" title="Live Preview" target="_blank">
+                        <img src="../images/link.png">
+                    </a>
+                </div>
+                <div class="source">
+                    <a href="https://github.com/Rakesh9100/Beautiify/tree/main/Components/Loaders/Dice-Loader" title="Source Code" target="_blank">
+                        <img src="../images/github.png">
+                    </a>
+                </div>
+            </div>
             <div class="box">
                 <h1>Flipping Text Loader</h1>
                 <div class="preview">