diff --git a/Loading Page/index.html b/Loading Page/index.html new file mode 100644 index 0000000..8b9432e --- /dev/null +++ b/Loading Page/index.html @@ -0,0 +1,18 @@ + + + + + + + + L + o + a + d + i + n + g + + + + diff --git a/Loading Page/style.css b/Loading Page/style.css new file mode 100644 index 0000000..b33ad8e --- /dev/null +++ b/Loading Page/style.css @@ -0,0 +1,71 @@ +@import url(https://fonts.googleapis.com/css?family=Roboto:300); + +html { + height: 90%; +} + +body { + background: #3F485B; + display: flex; + align-items: center; + height: 90%; +} + +.back { + margin: 1em auto; + font-family: "Roboto"; +} + +.back span { + font-size: 3em; + color: #F2C640; + background: #262B37; + display: table-cell; + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3), 0 5px 0 #ccc; + padding: 0 15px; + line-height: 100px; + animation: jumb 2s infinite; +} + +@keyframes jumb { + 0% { + transform: translateY(0px) + } + + 50% { + transform: translateY(-30px); + box-shadow: 0 15px 0 rgb(242, 198, 64); + } + + 100% { + transform: translateY(0px) + } +} + +.back span:nth-child(1) { + animation-delay: 0s; +} + +.back span:nth-child(2) { + animation-delay: .1s; +} + +.back span:nth-child(3) { + animation-delay: .2s; +} + +.back span:nth-child(4) { + animation-delay: .3s; +} + +.back span:nth-child(5) { + animation-delay: .4s; +} + +.back span:nth-child(6) { + animation-delay: .5s; +} + +.back span:nth-child(7) { + animation-delay: .6s; +} diff --git a/README.md b/README.md index 30e836f..edc406c 100644 --- a/README.md +++ b/README.md @@ -29,16 +29,17 @@ To use these CSS animations and effects in your Local System , simply download o | Project Name | CodePen Link | Preview | Source Code | | --------------------- | ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | -| Cart Item | [Go Live](https://codepen.io/deveesh_shetty_12/pen/rNKXvKm) | Cart Item | [Code - Cart Item](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Cart%20Item) | -| Social Login | [Go Live](https://codepen.io/pen/KKejzVy) | Social Login | [Code - Social Login](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Social%20Login) | -| Counter using Closure | [Go Live](https://codepen.io/pen/vYVjLqx) | Counter | [Code - Counter](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Counter) | -| Accordion | [Go Live](https://codepen.io/pen/YzJLEbb) | Accordion | [Code - Accordion](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Accordion) | -| 3D Cube | [Go Live](https://codepen.io/pen/mdzKEQg) | 3D Cube | [Code - 3D Cube](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/3D%20Cube) | -| Festival Lighting | [Go Live](https://codepen.io/pen/NWOzdvK) | Festival Lighting | [Code - Festival Lighting](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Festival%20Lighting) | -| Indian Flag | [Go Live](https://codepen.io/pen/xxyzqVa) | Indian Flag | [Code - Indian Flag](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Indian%20Flag) | -| Image Carousel I | [Go Live](https://codepen.io/pen/gOBKRNV) | Image Carousel I | [Code - Image Carousel I](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Carousel%20I) | -| Image Carousel II | [Go Live](https://codepen.io/pen/bGmjbVo) | Image Carousel II | [Code - Image Carousel II](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Carousel%20II) | +| Cart Item | [Go Live](https://codepen.io/deveesh_shetty_12/pen/rNKXvKm) | Cart Item | [Code - Cart Item](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Cart%20Item) | +| Social Login | [Go Live](https://codepen.io/pen/KKejzVy) | Social Login | [Code - Social Login](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Social%20Login) | +| Counter using Closure | [Go Live](https://codepen.io/pen/vYVjLqx) | Counter | [Code - Counter](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Counter) | +| Accordion | [Go Live](https://codepen.io/pen/YzJLEbb) | Accordion | [Code - Accordion](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Accordion) | +| 3D Cube | [Go Live](https://codepen.io/pen/mdzKEQg) | 3D Cube | [Code - 3D Cube](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/3D%20Cube) | +| Festival Lighting | [Go Live](https://codepen.io/pen/NWOzdvK) | Festival Lighting | [Code - Festival Lighting](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Festival%20Lighting) | +| Indian Flag | [Go Live](https://codepen.io/pen/xxyzqVa) | Indian Flag | [Code - Indian Flag](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Indian%20Flag) | +| Image Carousel I | [Go Live](https://codepen.io/pen/gOBKRNV) | Image Carousel I | [Code - Image Carousel I](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Carousel%20I) | +| Image Carousel II | [Go Live](https://codepen.io/pen/bGmjbVo) | Image Carousel II | [Code - Image Carousel II](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Carousel%20II) | | Color Wheel | [Go Live](https://codepen.io/pen/GRYXvKw) | Color Wheel | [Code - Color Wheel](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Color%20Wheel) | +| Loading Page | [Go Live](https://codepen.io/ahmedelmsery/pen/zZVLMN) | Loading Page | [Code - Loading Page](https://github.com/Deveesh-Shetty/CSS-Is-Fun) |