diff --git a/Button Animation/index.html b/Button Animation/index.html index cd33048..9818657 100644 --- a/Button Animation/index.html +++ b/Button Animation/index.html @@ -1,24 +1,30 @@ - - - - + + + + animated button - - - + + + - - - - - Button + + + + + Button - - - - \ No newline at end of file + + + diff --git a/README.md b/README.md index 80e4f1b..5cb36da 100644 --- a/README.md +++ b/README.md @@ -38,7 +38,9 @@ | Moon Light | https://iamtushar11.github.io/MoonLight-Parallex-Effect/ | | Modal Animation | https://pulkit203.github.io/Modal-Animation/ | | Gradient Drop Shadow | https://gradientdropshadow.netlify.app/ | -| Text Animation Effect|https://textanimationeffect.netlify.app/| +| Text Animation Effect | https://textanimationeffect.netlify.app/ | +| Animation Balls | https://pulkit203.github.io/Windows-Loading-Animation/ | + --- ![Project Intro Gif](./Gif.gif) diff --git a/loadingBallsAnimation/index.html b/loadingBallsAnimation/index.html new file mode 100644 index 0000000..98218d2 --- /dev/null +++ b/loadingBallsAnimation/index.html @@ -0,0 +1,21 @@ + + + + + + + + Loading Animation Balls + + +

Window'10 Loading Animation

+
+
+
+
+
+
+
+
+ + diff --git a/loadingBallsAnimation/pro.png b/loadingBallsAnimation/pro.png new file mode 100644 index 0000000..d0f14bb Binary files /dev/null and b/loadingBallsAnimation/pro.png differ diff --git a/loadingBallsAnimation/readme.md b/loadingBallsAnimation/readme.md new file mode 100644 index 0000000..354665f --- /dev/null +++ b/loadingBallsAnimation/readme.md @@ -0,0 +1,3 @@ +# Loading Animation + + diff --git a/loadingBallsAnimation/style.css b/loadingBallsAnimation/style.css new file mode 100644 index 0000000..c346913 --- /dev/null +++ b/loadingBallsAnimation/style.css @@ -0,0 +1,88 @@ +* { + margin: 0; + padding: 0; +} +body { + background-color: #345b63; + height: 100vh; + width: 100vw; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + font-family: sans-serif; + text-align: center; +} +h1 { + position: absolute; + top: 10px; + color: white; +} +.container { + position: relative; + /* background-color: aqua;s */ + width: 50vw; + height: 50vh; + display: flex; + justify-content: center; + align-items: center; +} +.ball { + position: absolute; + top: 50%; + width: 5px; + height: 5px; + border-radius: 5px; + background-color: #fff; + -webkit-box-reflect: below 10px + linear-gradient(rgba(0, 0, 0, 0.137), rgba(7, 7, 7, 0.205)); + animation: animate 3s ease-in-out infinite; + -webkit-animation: animate 3s ease-in-out infinite; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -ms-border-radius: 5px; + -o-border-radius: 5px; +} +.ball:nth-child(1) { + animation-delay: 0.1s; +} +.ball:nth-child(2) { + animation-delay: 0.2s; +} +.ball:nth-child(3) { + animation-delay: 0.3s; +} +.ball:nth-child(4) { + animation-delay: 0.4s; +} +.ball:nth-child(5) { + animation-delay: 0.5s; +} +.ball:nth-child(6) { + animation-delay: 0.6s; +} +@keyframes animate { + 0% { + opacity: 0; + left: 0; + } + 5% { + opacity: 1; + left: 5%; + } + + 95% { + opacity: 1; + left: 95%; + } + 100% { + opacity: 0; + left: 100%; + } +} +@media (max-width: 800px) { + .container { + width: 95vw; + margin: auto; + } +}