diff --git a/index.css b/index.css index 666acdf..685f987 100644 --- a/index.css +++ b/index.css @@ -1639,5 +1639,64 @@ body { } } + + +/* .............Loader-29th............... */ + +.loader-29 { + height: 90vh; + display: flex; + justify-content: center; + align-items: center; + background: rgba(0, 0, 0, 0); +} +.wave { + width: 5px; + height: 90px; + background: linear-gradient(45deg, rgb(0, 190, 211), rgb(0, 0, 0)); + margin: 10px; + animation: wave 1s linear infinite; + border-radius: 20px; +} +.wave:nth-child(2) { + animation-delay: 0.1s; +} +.wave:nth-child(3) { + animation-delay: 0.2s; +} +.wave:nth-child(4) { + animation-delay: 0.3s; +} +.wave:nth-child(5) { + animation-delay: 0.4s; +} +.wave:nth-child(6) { + animation-delay: 0.5s; +} +.wave:nth-child(7) { + animation-delay: 0.6s; +} +.wave:nth-child(8) { + animation-delay: 0.7s; +} +.wave:nth-child(9) { + animation-delay: 0.8s; +} +.wave:nth-child(10) { + animation-delay: 0.9s; +} + +@keyframes wave { + 0% { + transform: scale(0); + } + 50% { + transform: scale(1); + } + 100% { + transform: scale(0); + } +} + /* .............Loader-nth............... */ /* add the css for the Loader-nth... */ \ No newline at end of file diff --git a/index.html b/index.html index 2e9f7b2..99c7c21 100644 --- a/index.html +++ b/index.html @@ -386,6 +386,22 @@

Copy Code

Show Code + +
+
+
+
+
+
+
+
+
+
+
+
+
+ Show Code +
diff --git a/index.js b/index.js index 9cfb756..1fb890d 100644 --- a/index.js +++ b/index.js @@ -1739,6 +1739,82 @@ let codes = [ `, }, + + { + id: 29, + code: ` + ##HTML +
+
+
+
+
+
+
+
+
+
+
+
+ + ##CSS + .loader-29 { + height: 90vh; + display: flex; + justify-content: center; + align-items: center; + background: rgba(0, 0, 0, 0); + } + .wave { + width: 5px; + height: 90px; + background: linear-gradient(45deg, rgb(0, 190, 211), rgb(0, 0, 0)); + margin: 10px; + animation: wave 1s linear infinite; + border-radius: 20px; + } + .wave:nth-child(2) { + animation-delay: 0.1s; + } + .wave:nth-child(3) { + animation-delay: 0.2s; + } + .wave:nth-child(4) { + animation-delay: 0.3s; + } + .wave:nth-child(5) { + animation-delay: 0.4s; + } + .wave:nth-child(6) { + animation-delay: 0.5s; + } + .wave:nth-child(7) { + animation-delay: 0.6s; + } + .wave:nth-child(8) { + animation-delay: 0.7s; + } + .wave:nth-child(9) { + animation-delay: 0.8s; + } + .wave:nth-child(10) { + animation-delay: 0.9s; + } + + @keyframes wave { + 0% { + transform: scale(0); + } + 50% { + transform: scale(1); + } + 100% { + transform: scale(0); + } + } + + `, + }, ]; //There is no need to touch below code, You just have add you loader code inside the codes array