style codeblock

Author: Blargian

src/theme/CodeBlock/Container/styles.module.css

@@ -8,3 +8,4 @@
   --ifm-pre-color: var(--prism-color);
   overflow-x: scroll;
 }
+

src/theme/CodeBlock/index.js

@@ -33,14 +33,8 @@ export default function CodeBlockWrapper(props) {
 
   if (!isLoaded) {
     return (
-        <div ref={codeBlockRef}>
-            <div className={styles.ldsClickHouse}>
-                <div></div>
-                <div></div>
-                <div></div>
-                <div></div>
-                <div className={styles.shortBlock}></div>
-            </div>
+        <div ref={codeBlockRef} className={styles.wrapper}>
+            <div className={styles.activity}></div>
         </div>
     );
   }

src/theme/CodeBlock/styles.module.css

@@ -1,66 +1,48 @@
-
-.ldsClickHouse,
-
-.ldsClickHouse div {
-    box-sizing: border-box;
-}
-
-.ldsClickHouse {
-    display: inline-block;
+.wrapper {
     position: relative;
-    align-self: center;
-    width: 80px;
-    height: 80px;
-}
-
-.ldsClickHouse div {
-    color: yellow;
-    display: inline-block;
-    position: absolute;
-    left: 0px;
-    width: 2px;
-    background: currentColor;
-    animation: ldsClickHouse 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
+    height: 100px;
+    width: 100%;
+    z-index: 44;
+    overflow: hidden;
+    border-radius: 5px;
+    margin-bottom: 20px;
 }
 
-.ldsClickHouse div:nth-child(1) {
-    left: 4px;
-    animation-delay: -0.40s;
+[data-theme='dark'] .wrapper {
+    background-color: rgb(46,46,41);
 }
 
-.ldsClickHouse div:nth-child(2) {
-    left: 8px;
-    animation-delay: -0.32s;
+[data-theme='light'] .wrapper {
+    background-color: rgb(245,245,245);
 }
 
-.ldsClickHouse div:nth-child(3) {
-    left: 12px;
-    animation-delay: -0.24s;
-}
-
-.ldsClickHouse div:nth-child(4) {
-    left: 16px;
-    animation-delay: -0.12s;
+.activity {
+    position: absolute;
+    left: -45%;
+    height: 100%;
+    width: 45%;
+    animation: loading 1s infinite;
+    z-index: 45;
 }
 
-.ldsClickHouse div:nth-child(5) {
-    margin-top: 4px;
-    left: 20px;
-    animation-delay: 0s;
+[data-theme='dark'] .activity {
+    background-image: linear-gradient(to left, rgba(31,31,28, .05), rgba(31,31,28, .3), rgba(31,31,28, .6), rgba(31,31,28, .3), rgba(31,31,28, .05));
+    background-image: -moz-linear-gradient(to left, rgba(31,31,28, .05), rgba(31,31,28, .3), rgba(31,31,28, .6), rgba(31,31,28, .3), rgba(31,31,28, .05));
+    background-image: -webkit-linear-gradient(to left, rgba(31,31,28, .05), rgba(31,31,28, .3), rgba(31,31,28, .6), rgba(31,31,28, .3), rgba(31,31,28, .05));
 }
 
-.shortBlock {
-    height: 4px !important;
+[data-theme='light'] .activity {
+    background-image: linear-gradient(to left, rgba(227,227,227, .05), rgba(227,227,227, .3), rgba(227,227,227, .6), rgba(227,227,227, .3), rgba(227,227,227, .05));
+    background-image: -moz-linear-gradient(to left, rgba(227,227,227, .05), rgba(227,227,227, .3), rgba(227,227,227, .6), rgba(227,227,227, .3), rgba(227,227,227, .05));
+    background-image: -webkit-linear-gradient(to left, rgba(227,227,227, .05), rgba(227,227,227, .3), rgba(227,227,227, .6), rgba(227,227,227, .3), rgba(227,227,227, .05));
 }
 
-@keyframes ldsClickHouse {
+@keyframes loading {
     0% {
-        top: 4px;
-        height: 32px;
+        left: -45%; /* Start off-screen to the left */
     }
-    50%, 100% {
-        top: 16px;
-        height: 16px;
+    100% {
+        left: calc(100% + 45%); /* Move off-screen to the right */
     }
 }