Add a tiled loader (#2286)

* Create anim2.css * Create anim2.html * Add files via upload * Update include.js * Update include.js --------- Co-authored-by: Laureline Paris <32878345+LaurelineP@users.noreply.github.com>
zero-to-mastery · Oct 29, 2023 · b5bfa23 · b5bfa23
1 parent a451454
commit b5bfa23
Show file tree

Hide file tree

Showing 4 changed files with 203 additions and 0 deletions.
diff --git a/Art/tmsagarofficial/anim2.css b/Art/tmsagarofficial/anim2.css
@@ -0,0 +1,179 @@
+.cssload-thecube {
+	width: 73px;
+	height: 73px;
+	margin: 0 auto;
+	margin-top: 49px;
+	position: relative;
+	transform: rotateZ(45deg);
+		-o-transform: rotateZ(45deg);
+		-ms-transform: rotateZ(45deg);
+		-webkit-transform: rotateZ(45deg);
+		-moz-transform: rotateZ(45deg);
+}
+.cssload-thecube .cssload-cube {
+	position: relative;
+	transform: rotateZ(45deg);
+		-o-transform: rotateZ(45deg);
+		-ms-transform: rotateZ(45deg);
+		-webkit-transform: rotateZ(45deg);
+		-moz-transform: rotateZ(45deg);
+}
+.cssload-thecube .cssload-cube {
+	float: left;
+	width: 50%;
+	height: 50%;
+	position: relative;
+	transform: scale(1.1);
+		-o-transform: scale(1.1);
+		-ms-transform: scale(1.1);
+		-webkit-transform: scale(1.1);
+		-moz-transform: scale(1.1);
+}
+.cssload-thecube .cssload-cube:before {
+	content: "";
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgb(0,0,0);
+	animation: cssload-fold-thecube 6.72s infinite linear both;
+		-o-animation: cssload-fold-thecube 6.72s infinite linear both;
+		-ms-animation: cssload-fold-thecube 6.72s infinite linear both;
+		-webkit-animation: cssload-fold-thecube 6.72s infinite linear both;
+		-moz-animation: cssload-fold-thecube 6.72s infinite linear both;
+	transform-origin: 100% 100%;
+		-o-transform-origin: 100% 100%;
+		-ms-transform-origin: 100% 100%;
+		-webkit-transform-origin: 100% 100%;
+		-moz-transform-origin: 100% 100%;
+}
+.cssload-thecube .cssload-c2 {
+	transform: scale(1.1) rotateZ(90deg);
+		-o-transform: scale(1.1) rotateZ(90deg);
+		-ms-transform: scale(1.1) rotateZ(90deg);
+		-webkit-transform: scale(1.1) rotateZ(90deg);
+		-moz-transform: scale(1.1) rotateZ(90deg);
+}
+.cssload-thecube .cssload-c3 {
+	transform: scale(1.1) rotateZ(180deg);
+		-o-transform: scale(1.1) rotateZ(180deg);
+		-ms-transform: scale(1.1) rotateZ(180deg);
+		-webkit-transform: scale(1.1) rotateZ(180deg);
+		-moz-transform: scale(1.1) rotateZ(180deg);
+}
+.cssload-thecube .cssload-c4 {
+	transform: scale(1.1) rotateZ(270deg);
+		-o-transform: scale(1.1) rotateZ(270deg);
+		-ms-transform: scale(1.1) rotateZ(270deg);
+		-webkit-transform: scale(1.1) rotateZ(270deg);
+		-moz-transform: scale(1.1) rotateZ(270deg);
+}
+.cssload-thecube .cssload-c2:before {
+	animation-delay: 0.84s;
+		-o-animation-delay: 0.84s;
+		-ms-animation-delay: 0.84s;
+		-webkit-animation-delay: 0.84s;
+		-moz-animation-delay: 0.84s;
+}
+.cssload-thecube .cssload-c3:before {
+	animation-delay: 1.68s;
+		-o-animation-delay: 1.68s;
+		-ms-animation-delay: 1.68s;
+		-webkit-animation-delay: 1.68s;
+		-moz-animation-delay: 1.68s;
+}
+.cssload-thecube .cssload-c4:before {
+	animation-delay: 2.52s;
+		-o-animation-delay: 2.52s;
+		-ms-animation-delay: 2.52s;
+		-webkit-animation-delay: 2.52s;
+		-moz-animation-delay: 2.52s;
+}
+
+
+
+@keyframes cssload-fold-thecube {
+	0%, 10% {
+		transform: perspective(136px) rotateX(-180deg);
+		opacity: 0;
+	}
+	25%,
+				75% {
+		transform: perspective(136px) rotateX(0deg);
+		opacity: 1;
+	}
+	90%,
+				100% {
+		transform: perspective(136px) rotateY(180deg);
+		opacity: 0;
+	}
+}
+
+@-o-keyframes cssload-fold-thecube {
+	0%, 10% {
+		-o-transform: perspective(136px) rotateX(-180deg);
+		opacity: 0;
+	}
+	25%,
+				75% {
+		-o-transform: perspective(136px) rotateX(0deg);
+		opacity: 1;
+	}
+	90%,
+				100% {
+		-o-transform: perspective(136px) rotateY(180deg);
+		opacity: 0;
+	}
+}
+
+@-ms-keyframes cssload-fold-thecube {
+	0%, 10% {
+		-ms-transform: perspective(136px) rotateX(-180deg);
+		opacity: 0;
+	}
+	25%,
+				75% {
+		-ms-transform: perspective(136px) rotateX(0deg);
+		opacity: 1;
+	}
+	90%,
+				100% {
+		-ms-transform: perspective(136px) rotateY(180deg);
+		opacity: 0;
+	}
+}
+
+@-webkit-keyframes cssload-fold-thecube {
+	0%, 10% {
+		-webkit-transform: perspective(136px) rotateX(-180deg);
+		opacity: 0;
+	}
+	25%,
+				75% {
+		-webkit-transform: perspective(136px) rotateX(0deg);
+		opacity: 1;
+	}
+	90%,
+				100% {
+		-webkit-transform: perspective(136px) rotateY(180deg);
+		opacity: 0;
+	}
+}
+
+@-moz-keyframes cssload-fold-thecube {
+	0%, 10% {
+		-moz-transform: perspective(136px) rotateX(-180deg);
+		opacity: 0;
+	}
+	25%,
+				75% {
+		-moz-transform: perspective(136px) rotateX(0deg);
+		opacity: 1;
+	}
+	90%,
+				100% {
+		-moz-transform: perspective(136px) rotateY(180deg);
+		opacity: 0;
+	}
+}
diff --git a/Art/tmsagarofficial/anim2.gif b/Art/tmsagarofficial/anim2.gif
diff --git a/Art/tmsagarofficial/anim2.html b/Art/tmsagarofficial/anim2.html
@@ -0,0 +1,17 @@
+<!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="anim2.css" />
+    <title>Anim1</title>
+  </head>
+  <body>
+    <div class="cssload-thecube">
+	    <div class="cssload-cube cssload-c1"></div>
+	    <div class="cssload-cube cssload-c2"></div>
+	    <div class="cssload-cube cssload-c4"></div>
+	    <div class="cssload-cube cssload-c3"></div>
+    </div>
+  </body>
+</html>
diff --git a/include.js b/include.js
@@ -464,6 +464,13 @@ let cards = [
     author: 'Joy',
     githubLink: 'https://github.com/jatanassian'
   },
+  {
+    artName: 'Tiled Loader',
+    pageLink: './Art/tmsagarofficial/anim2.html',
+    imageLink: './Art/tmsagarofficial/anim2.gif',
+    author: 'tmsagarofficial',
+    githubLink: 'https://github.com/tmsagarofficial'
+  },
   {
     artName: 'Orbiting-Ball',
     pageLink: './Art/Tipchan/OrbitingBall.html',