├── spinners.md ├── content ├── spinner10.html ├── spinner11.html ├── spinner12.html ├── spinner13.html ├── spinner3.html ├── spinner4.html ├── spinner5.html ├── spinner6.html ├── spinner7.html ├── spinner8.html ├── spinner9.html ├── spinner2.html ├── spinner1.html ├── multiple6.html ├── multiple8.html ├── multiple12.html ├── multiple13.html ├── multiple16.html ├── multiple3.html ├── multiple9.html ├── multiple1.html ├── multiple5.html ├── multiple11.html ├── multiple2.html ├── multiple14.html ├── multiple4.html ├── multiple15.html ├── multiple10.html ├── multiple7.html ├── spinner13_css.html ├── spinner10_css.html ├── spinner11_css.html ├── spinner4_css.html ├── spinner6_css.html ├── spinner3_css.html ├── spinner9_css.html ├── spinner2_css.html ├── spinner12_css.html ├── multiple14_css.html ├── spinner1_css.html ├── spinner7_css.html ├── multiple15_css.html ├── spinner8_css.html ├── multiple3_css.html ├── multiple8_css.html ├── multiple11_css.html ├── spinner5_css.html ├── multiple4_css.html ├── multiple16_css.html ├── multiple10_css.html ├── multiple13_css.html ├── multiple1_css.html ├── multiple5_css.html ├── multiple9_css.html ├── multiple6_css.html ├── multiple2_css.html ├── multiple7_css.html └── multiple12_css.html ├── images ├── favicon.png ├── spinner_logo.png └── spinners_graph_logo.jpg ├── bower.json ├── README.md ├── License.txt ├── instructions.md ├── scripts └── spinners.js ├── styles ├── spinners.css └── spinnerAnimations.css └── index.html /spinners.md: -------------------------------------------------------------------------------- 1 | # BASE 2 | 3 | ## TITLE HERE 4 | * Info here -------------------------------------------------------------------------------- /content/spinner10.html: -------------------------------------------------------------------------------- 1 | 2 | <div class="single10"></div> 3 | -------------------------------------------------------------------------------- /content/spinner11.html: -------------------------------------------------------------------------------- 1 | 2 | <div class="single11"></div> 3 | -------------------------------------------------------------------------------- /content/spinner12.html: -------------------------------------------------------------------------------- 1 | 2 | <div class="single12"></div> 3 | -------------------------------------------------------------------------------- /content/spinner13.html: -------------------------------------------------------------------------------- 1 | 2 | <div class="single13"></div> 3 | -------------------------------------------------------------------------------- /content/spinner3.html: -------------------------------------------------------------------------------- 1 | 2 | <div class="single3"></div> 3 | -------------------------------------------------------------------------------- /content/spinner4.html: -------------------------------------------------------------------------------- 1 | 2 | <div class="single4"></div> 3 | -------------------------------------------------------------------------------- /content/spinner5.html: -------------------------------------------------------------------------------- 1 | 2 | <div class="single5"></div> 3 | -------------------------------------------------------------------------------- /content/spinner6.html: -------------------------------------------------------------------------------- 1 | 2 | <div class="single6"></div> 3 | -------------------------------------------------------------------------------- /content/spinner7.html: -------------------------------------------------------------------------------- 1 | 2 | <div class="single7"></div> 3 | -------------------------------------------------------------------------------- /content/spinner8.html: -------------------------------------------------------------------------------- 1 | 2 | <div class="single8"></div> 3 | -------------------------------------------------------------------------------- /content/spinner9.html: -------------------------------------------------------------------------------- 1 | 2 | <div class="single9"></div> 3 | -------------------------------------------------------------------------------- /content/spinner2.html: -------------------------------------------------------------------------------- 1 | 2 | <div class="spinningCircle"></div> 3 | -------------------------------------------------------------------------------- /images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boguz/Spinners/HEAD/images/favicon.png -------------------------------------------------------------------------------- /images/spinner_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boguz/Spinners/HEAD/images/spinner_logo.png -------------------------------------------------------------------------------- /images/spinners_graph_logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boguz/Spinners/HEAD/images/spinners_graph_logo.jpg -------------------------------------------------------------------------------- /content/spinner1.html: -------------------------------------------------------------------------------- 1 | 2 | <div class="single1"> 3 | <div class="single1ball"></div> 4 | </div> 5 | -------------------------------------------------------------------------------- /content/multiple6.html: -------------------------------------------------------------------------------- 1 | 2 | <div class="mul6"> 3 | <div class="mul6_1"></div> 4 | <div class="mul6_2"></div> 5 | </div> 6 | -------------------------------------------------------------------------------- /content/multiple8.html: -------------------------------------------------------------------------------- 1 | 2 | <div class="mul8"> 3 | <div class="mul8circ1"></div> 4 | <div class="mul8circ2"></div> 5 | </div> 6 | -------------------------------------------------------------------------------- /content/multiple12.html: -------------------------------------------------------------------------------- 1 | 2 | <div class="mul12"> 3 | <div class="m12s m12s1"></div> 4 | <div class="m12s m12s2"></div> 5 | </div> 6 | -------------------------------------------------------------------------------- /content/multiple13.html: -------------------------------------------------------------------------------- 1 | 2 | <div class="mul13"> 3 | <div class="m13s m13c1"></div> 4 | <div class="m13s m13c2"></div> 5 | </div> 6 | -------------------------------------------------------------------------------- /content/multiple16.html: -------------------------------------------------------------------------------- 1 | 2 | <div class="mul16"> 3 | <div class="m16c m16c1"></div> 4 | <div class="m16c m16c2"></div> 5 | </div> 6 | -------------------------------------------------------------------------------- /content/multiple3.html: -------------------------------------------------------------------------------- 1 | 2 | <div class="mult3"> 3 | <div class="mult3circle1"></div> 4 | <div class="mult3circle2"></div> 5 | </div> 6 | -------------------------------------------------------------------------------- /content/multiple9.html: -------------------------------------------------------------------------------- 1 | 2 | <div class="mul9"> 3 | <div class="mul9circ1"></div> 4 | <div class="mul9circ2"></div> 5 | <div class="mul9circ3"></div> 6 | </div> 7 | -------------------------------------------------------------------------------- /content/multiple1.html: -------------------------------------------------------------------------------- 1 | 2 | <div class="multiple1"> 3 | <div class="ball1"></div> 4 | <div class="ball2"></div> 5 | <div class="ball3"></div> 6 | </div> 7 | -------------------------------------------------------------------------------- /content/multiple5.html: -------------------------------------------------------------------------------- 1 | 2 | <div class="mul5"> 3 | <div class="mul5circle1"></div> 4 | <div class="mul5circle2"></div> 5 | <div class="mul5circle3"></div> 6 | </div> 7 | -------------------------------------------------------------------------------- /content/multiple11.html: -------------------------------------------------------------------------------- 1 | 2 | <div class="mul11"> 3 | <div class="mul11s mul11s1"></div> 4 | <div class="mul11s mul11s2"></div> 5 | <div class="mul11s mul11s3"></div> 6 | <div class="mul11s mul11s4"></div> 7 | </div> 8 | -------------------------------------------------------------------------------- /content/multiple2.html: -------------------------------------------------------------------------------- 1 | 2 | <div class="mult2rect mult2rect1"></div> 3 | <div class="mult2rect mult2rect2"></div> 4 | <div class="mult2rect mult2rect3"></div> 5 | <div class="mult2rect mult2rect4"></div> 6 | <div class="mult2rect mult2rect5"></div> 7 | -------------------------------------------------------------------------------- /content/multiple14.html: -------------------------------------------------------------------------------- 1 | 2 | <div class="mul14"> 3 | <div class="mul14s mul14s1"></div> 4 | <div class="mul14s mul14s2"></div> 5 | <div class="mul14s mul14s3"></div> 6 | <div class="mul14s mul14s4"></div> 7 | <div class="mul14s mul14s5"></div> 8 | </div> 9 | -------------------------------------------------------------------------------- /content/multiple4.html: -------------------------------------------------------------------------------- 1 | 2 | <div class="mult4"> 3 | <div class="mul4stripe mul4stripe1"></div> 4 | <div class="mul4stripe mul4stripe2"></div> 5 | <div class="mul4stripe mul4stripe3"></div> 6 | <div class="mul4stripe mul4stripe4"></div> 7 | </div> 8 | -------------------------------------------------------------------------------- /content/multiple15.html: -------------------------------------------------------------------------------- 1 | 2 | <div class="mul15"> 3 | <div class="m15c m15c1"></div> 4 | <div class="m15c m15c2"></div> 5 | <div class="m15c m15c3"></div> 6 | <div class="m15c m15c4"></div> 7 | <div class="m15c m15c5"></div> 8 | <div class="m15c m15c6"></div> 9 | <div class="m15c m15c7"></div> 10 | <div class="m15c m15c8"></div> 11 | </div> 12 | -------------------------------------------------------------------------------- /content/multiple10.html: -------------------------------------------------------------------------------- 1 | 2 | <div class="mul10"> 3 | <div class="m10c m10c1"></div> 4 | <div class="m10c m10c2"></div> 5 | <div class="m10c m10c3"></div> 6 | <div class="m10c m10c4"></div> 7 | <div class="m10c m10c5"></div> 8 | <div class="m10c m10c6"></div> 9 | <div class="m10c m10c7"></div> 10 | <div class="m10c m10c8"></div> 11 | <div class="m10c m10c9"></div> 12 | </div> 13 | -------------------------------------------------------------------------------- /content/multiple7.html: -------------------------------------------------------------------------------- 1 | 2 | <div class="mul7"> 3 | <div class="mul7circ m7c1"></div> 4 | <div class="mul7circ m7c2"></div> 5 | <div class="mul7circ m7c3"></div> 6 | <div class="mul7circ m7c4"></div> 7 | <div class="mul7circ m7c5"></div> 8 | <div class="mul7circ m7c6"></div> 9 | <div class="mul7circ m7c7"></div> 10 | <div class="mul7circ m7c8"></div> 11 | <div class="mul7circ m7c9"></div> 12 | <div class="mul7circ m7c10"></div> 13 | <div class="mul7circ m7c11"></div> 14 | <div class="mul7circ m7c12"></div> 15 | </div> 16 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cssspinners", 3 | "version": "0.0.1", 4 | "authors": [ 5 | "boguz " 6 | ], 7 | "description": "css spinners made easy", 8 | "main": "scripts/spinners.js", 9 | "moduleType": [ 10 | "es6" 11 | ], 12 | "keywords": [ 13 | "spinner", 14 | "loading", 15 | "css loading spinner" 16 | ], 17 | "license": "MIT", 18 | "homepage": "https://boguz.github.io/Spinners", 19 | "ignore": [ 20 | "**/.*", 21 | "node_modules", 22 | "bower_components", 23 | "test", 24 | "tests" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /content/spinner13_css.html: -------------------------------------------------------------------------------- 1 | 2 | .single13 { 3 | height: 10px; 4 | width: 120px; 5 | border-radius: 4px; 6 | background: -webkit-linear-gradient(right, #ef4836, #f5d76e, #ef4836); 7 | background: linear-gradient(270deg, #ef4836, #f5d76e, #ef4836); 8 | background-size: 400% 400%; 9 | -webkit-animation: single13anim 3s ease-in-out infinite; 10 | animation: single13anim 3s ease-in-out infinite; 11 | } 12 | 13 | @-webkit-keyframes single13anim { 14 | 0%{background-position: 0% 50%} 15 | 50%{background-position: 100% 50%} 16 | 100%{background-position: 0% 50%} 17 | } 18 | 19 | @keyframes single13anim { 20 | 0%{background-position: 0% 50%} 21 | 50%{background-position: 100% 50%} 22 | 100%{background-position: 0% 50%} 23 | } 24 | -------------------------------------------------------------------------------- /content/spinner10_css.html: -------------------------------------------------------------------------------- 1 | 2 | .single10 { 3 | height: 50px; 4 | width: 50px; 5 | border: 8px solid #A2DED0; 6 | border-radius: 50%; 7 | position: relative; 8 | -webkit-animation: single10anim 2s infinite linear; 9 | animation: single10anim 2s infinite linear; 10 | } 11 | 12 | .single10:before { 13 | content: ''; 14 | height: 6px; 15 | width: 6px; 16 | border-radius: 50%; 17 | background-color: #16A085; 18 | position: absolute; 19 | top: -7px; 20 | left: 14px; 21 | } 22 | 23 | @-webkit-keyframes single10anim { 24 | 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 25 | } 26 | @keyframes single10anim { 27 | 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 28 | } 29 | -------------------------------------------------------------------------------- /content/spinner11_css.html: -------------------------------------------------------------------------------- 1 | 2 | .single11 { 3 | height: 50px; 4 | width: 50px; 5 | border-radius: 50%; 6 | background-color: #EC644B; 7 | position: relative; 8 | -webkit-animation: single11anim 2s infinite ease-in-out; 9 | animation: single11anim 2s infinite ease-in-out; 10 | } 11 | 12 | @-webkit-keyframes single11anim { 13 | 0%, 100% { 14 | -webkit-filter: blur(0); 15 | filter: blur(0); 16 | } 17 | 50% { 18 | -webkit-filter: blur(15px); 19 | filter: blur(15px); 20 | } 21 | } 22 | 23 | @keyframes single11anim { 24 | 0%, 100% { 25 | -webkit-filter: blur(0); 26 | filter: blur(0); 27 | } 28 | 50% { 29 | -webkit-filter: blur(21px); 30 | filter: blur(15px); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /content/spinner4_css.html: -------------------------------------------------------------------------------- 1 | 2 | .single4 { 3 | width: 50px; 4 | height: 50px; 5 | border-radius: 50%; 6 | border: 6px solid #EEEEEE; 7 | border-top-color: #BFBFBF; 8 | border-bottom-color: #BFBFBF; 9 | -webkit-animation: single4 2.5s infinite ease-in-out; 10 | animation: single4 2.5s infinite ease-in-out; 11 | } 12 | 13 | @-webkit-keyframes single4 { 14 | 0% { 15 | -webkit-transform: rotate(0deg); 16 | transform: rotate(0deg); 17 | } 18 | 100% { 19 | -webkit-transform: rotate(540deg); 20 | transform: rotate(540deg); 21 | } 22 | } 23 | 24 | @keyframes single4 { 25 | 0% { 26 | -webkit-transform: rotate(0deg); 27 | transform: rotate(0deg); 28 | } 29 | 100% { 30 | -webkit-transform: rotate(540deg); 31 | transform: rotate(540deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /content/spinner6_css.html: -------------------------------------------------------------------------------- 1 | 2 | .single6 { 3 | height: 60px; 4 | width: 60px; 5 | border-radius: 50%; 6 | background-color: #90C695; 7 | -webkit-animation: single6 1s infinite ease-in; 8 | animation: single6 1s infinite ease-in; 9 | } 10 | 11 | @-webkit-keyframes single6 { 12 | 0% { 13 | -webkit-transform: scale(0); 14 | transform: scale(0); 15 | opacity: 1; 16 | } 17 | 100% { 18 | -webkit-transform: scale(1); 19 | transform: scale(1); 20 | opacity: 0; 21 | } 22 | } 23 | 24 | @keyframes single6 { 25 | 0% { 26 | -webkit-transform: scale(0); 27 | transform: scale(0); 28 | opacity: 1; 29 | } 30 | 100% { 31 | -webkit-transform: scale(1); 32 | transform: scale(1); 33 | opacity: 0; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /content/spinner3_css.html: -------------------------------------------------------------------------------- 1 | 2 | .single3 { 3 | height: 30px; 4 | width: 30px; 5 | background-color: #EC644B; 6 | border-radius: 50%; 7 | -webkit-animation: single3 2s infinite ease-in-out; 8 | animation: single3 2s infinite ease-in-out; 9 | } 10 | 11 | @-webkit-keyframes single3 { 12 | 0%, 20%, 40%, 60%, 100% { 13 | -webkit-transform: scale(.2); 14 | transform: scale(.2); 15 | opacity: 0; 16 | } 17 | 10%, 30%, 50% { 18 | -webkit-transform: scale(1); 19 | transform: scale(1); 20 | opacity: 1; 21 | } 22 | } 23 | 24 | @keyframes single3 { 25 | 0%, 20%, 40%, 60%, 100% { 26 | -webkit-transform: scale(.2); 27 | transform: scale(.2); 28 | opacity: 0; 29 | } 30 | 10%, 30%, 50% { 31 | -webkit-transform: scale(1); 32 | transform: scale(1); 33 | opacity: 1; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Spinners 2 | SPINNERS is a collection of HTML and CSS Spinners, which are animations that show the user that some content is being loaded. 3 | 4 | You can see it live here: [SPINNERS](https://boguz.github.io/Spinners) 5 | 6 | ## How to use it 7 | To use any of the SPINNERS animations you just need to __copy and paste__ it's HTML and CSS codes. 8 | 9 | The easiest way to do it is by using the [website](https://boguz.github.io/Spinners), but you can also do it directly here on GitHub. 10 | 11 | For more information please read the [Full Instructions](https://github.com/boguz/Spinners/blob/master/instructions.md) 12 | 13 | 14 | Or you can also install it via __Bower__, by writting on your console: 15 | 16 | `$ bower install cssspinners` 17 | 18 | ## Who can use it 19 | Everyone! I made SPINNERS to learn more about CSS animations, so i am happy to give it back to the community. 20 | 21 | If you use it or if you like it, maybe you can just spread the word so more people can use it... ;) 22 | 23 | -------------------------------------------------------------------------------- /content/spinner9_css.html: -------------------------------------------------------------------------------- 1 | 2 | .single9 { 3 | height: 6px; 4 | width: 75px; 5 | background-color: #d8d7d7; 6 | position: relative; 7 | } 8 | 9 | .single9:before { 10 | content: ''; 11 | height: 6px; 12 | width: 10px; 13 | position: absolute; 14 | left: 0; 15 | background-color: #EC644B; 16 | -webkit-animation: single9anim 4s infinite ease-in-out; 17 | animation: single9anim 4s infinite ease-in-out; 18 | } 19 | 20 | @-webkit-keyframes single9anim { 21 | 0%, 100% { 22 | -webkit-transform: translateX(0); 23 | transform: translateX(0); 24 | } 25 | 50% { 26 | -webkit-transform: translateX(65px); 27 | transform: translateX(65px); 28 | } 29 | } 30 | 31 | @keyframes single9anim { 32 | 0%, 100% { 33 | -webkit-transform: translateX(0); 34 | transform: translateX(0); 35 | } 36 | 50% { 37 | -webkit-transform: translateX(65px); 38 | transform: translateX(65px); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /License.txt: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Boguz 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /instructions.md: -------------------------------------------------------------------------------- 1 | # INSTRUCTIONS 2 | 3 | To use any of the animations you just need to copy and paste it's HTML and CSS codes. 4 | 5 | The easiest way is to use the website, but you can also do it directly here on GitHub. 6 | 7 | 8 | 9 | ## 1. Using the website 10 | 1.1. On the website (https://github.com/boguz/Spinners) click on the animation you want to use 11 | 1.2. Copy the HTML code and paste it into your html file 12 | 1.3. Copy the CSS code and paste it into your css file 13 | 1.4. Enjoy! 14 | 15 | ## 2. Directly from the GitHub 16 | 2.1. Open the "content" folder 17 | 2.2. Open the html file for the animation you want 18 | 19 | Example: if you want to use the animation "Spinner 1", open the file "spinner1.html" 20 | 21 | 2.3. Copy the contents of the file, excluding the `````` tags 22 | 2.4. Paste it into your html file 23 | 2.5. Open the _css.html for the animation you want 24 | 25 | Example: if you want to use the animation "Spinner 1", open the file "spinner1_css.html" 26 | 27 | 2.6. Copy the contents of the file, excluding the `````` tags 28 | 2.7. Paste it into your css file 29 | 2.8. Enjoy! 30 | 31 | #### Something not working? 32 | 33 | If you have any questions just write me a message and i'll get back to you as soon as possible. 34 | -------------------------------------------------------------------------------- /scripts/spinners.js: -------------------------------------------------------------------------------- 1 | /*jslint browser: true*/ 2 | /*global $, jQuery*/ 3 | 4 | $(document).ready(function () { 5 | 6 | // Use Strict Mode 7 | "use strict"; 8 | 9 | 10 | //////////// DINAMICALLY LOAD CODE FOR CLICKED SPINNER //////////////// 11 | 12 | // click on .spinWindow 13 | $(".spinWindow").on("click", function () { 14 | 15 | event.preventDefault(); 16 | 17 | var fileName = $(this).attr("data-filename"); 18 | 19 | $(".htmlcode").load("content/" + fileName + ".html"); 20 | $(".csscode").load("content/" + fileName + "_css.html"); 21 | 22 | $(".modal").addClass("active"); 23 | }); 24 | 25 | // click to dismiss modal window 26 | $(".modal").on("click", function () { 27 | 28 | event.preventDefault(); 29 | 30 | $(this).removeClass("active"); 31 | $("htmlcode").empty(); 32 | $("csscode").empty(); 33 | }); 34 | 35 | ///////////////////////// SMOOTH SCROLLING /////////////////////////// 36 | 37 | $('a[href^="#"]').on('click', function(event) { 38 | 39 | var target = $( $(this).attr('href') ); 40 | 41 | if( target.length ) { 42 | 43 | event.preventDefault(); 44 | 45 | var scrollhere = target.offset().top; 46 | 47 | $('html, body').animate({ 48 | scrollTop: scrollhere 49 | }, 1000); 50 | } 51 | }); 52 | 53 | }); // end of document.ready -------------------------------------------------------------------------------- /content/spinner2_css.html: -------------------------------------------------------------------------------- 1 | 2 | .spinningCircle { 3 | height: 40px; 4 | width: 40px; 5 | border-radius: 50%; 6 | border: 4px solid rgba(255,255,255,0); 7 | border-top-color: 4px solid #7fc4d1; 8 | border-right-color: 4px solid #7fc4d1; 9 | -webkit-animation: single2 4s infinite linear; 10 | animation: single2 4s infinite linear; 11 | } 12 | 13 | @-webkit-keyframes single2 { 14 | 0% { 15 | -webkit-transform: rotate(0deg); 16 | transform: rotate(0deg); 17 | border-top-color: #7fc4d1; 18 | border-right-color: #7fc4d1; 19 | } 20 | 50% { 21 | border-top-color: #1f4f58; 22 | border-right-color: #1f4f58; 23 | } 24 | 100% { 25 | -webkit-transform: rotate(720deg); 26 | transform: rotate(720deg); 27 | border-top-color: #7fc4d1; 28 | border-right-color: #7fc4d1; 29 | } 30 | } 31 | 32 | @keyframes single2 { 33 | 0% { 34 | -webkit-transform: rotate(0deg); 35 | transform: rotate(0deg); 36 | border-top-color: #7fc4d1; 37 | border-right-color: #7fc4d1; 38 | } 39 | 50% { 40 | border-top-color: #1f4f58; 41 | border-right-color: #1f4f58; 42 | } 43 | 100% { 44 | -webkit-transform: rotate(720deg); 45 | transform: rotate(720deg); 46 | border-top-color: #7fc4d1; 47 | border-right-color: #7fc4d1; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /content/spinner12_css.html: -------------------------------------------------------------------------------- 1 | 2 | .single12 { 3 | height: 50px; 4 | width: 50px; 5 | background-color: pink; 6 | -webkit-animation: single12anim 2s infinite linear, single12colors 10s infinite linear; 7 | animation: single12anim 2s infinite linear, single12colors 10s infinite linear; 8 | } 9 | 10 | @-webkit-keyframes single12anim { 11 | 0%, 40%, 100% { 12 | border-radius: 5%; 13 | -webkit-transform: scale(1); 14 | transform: scale(1); 15 | } 16 | 20% { 17 | border-radius: 50%; 18 | -webkit-transform: scale(.8); 19 | transform: scale(.8); 20 | } 21 | } 22 | 23 | @keyframes single12anim { 24 | 0%, 40%, 100% { 25 | border-radius: 5%; 26 | -webkit-transform: scale(1); 27 | transform: scale(1); 28 | } 29 | 20% { 30 | border-radius: 50%; 31 | -webkit-transform: scale(.8); 32 | transform: scale(.8); 33 | } 34 | } 35 | 36 | @-webkit-keyframes single12colors { 37 | 0%, 88%, 100% { background-color: #D24D57; } 38 | 8%, 20% { background-color: #3498DB; } 39 | 28%, 40% { background-color: #F7CA18; } 40 | 48%, 60% { background-color: #1BBC9B; } 41 | 68%, 80% { background-color: #913D88; } 42 | } 43 | 44 | @keyframes single12colors { 45 | 0%, 88%, 100% { background-color: #D24D57; } 46 | 8%, 20% { background-color: #3498DB; } 47 | 28%, 40% { background-color: #F7CA18; } 48 | 48%, 60% { background-color: #1BBC9B; } 49 | 68%, 80% { background-color: #913D88; } 50 | } 51 | -------------------------------------------------------------------------------- /content/multiple14_css.html: -------------------------------------------------------------------------------- 1 | 2 | .mul14 { 3 | height: 20px; 4 | width: 140px; 5 | } 6 | 7 | .mul14s { 8 | height: 20px; 9 | width: 20px; 10 | border-radius: 50%; 11 | background-color: aquamarine; 12 | float: left; 13 | margin: 0 4px; 14 | } 15 | 16 | .mul14s1, 17 | .mul14s5 { 18 | background-color: #EC644B; 19 | -webkit-animation: m14s_anim 2.5s infinite ease-in-out; 20 | animation: m14s_anim 2.5s infinite ease-in-out; 21 | -webkit-animation-delay: .4s; 22 | animation-delay: .4s; 23 | } 24 | 25 | .mul14s2, 26 | .mul14s4 { 27 | background-color: #C0392B; 28 | -webkit-animation: m14s_anim 2.5s infinite ease-in-out; 29 | animation: m14s_anim 2.5s infinite ease-in-out; 30 | -webkit-animation-delay: .2s; 31 | animation-delay: .2s; 32 | } 33 | 34 | .mul14s3 { 35 | background-color: #96281B; 36 | -webkit-animation: m14s_anim 2.5s infinite ease-in-out; 37 | animation: m14s_anim 2.5s infinite ease-in-out; 38 | } 39 | 40 | @-webkit-keyframes m14s_anim { 41 | 0%, 40%, 100% { 42 | -webkit-transform: translateY(0); 43 | transform: translateY(0); 44 | } 45 | 20% { 46 | -webkit-transform: translateY(-25px); 47 | transform: translateY(-25px); 48 | } 49 | } 50 | 51 | @keyframes m14s_anim { 52 | 0%, 40%, 100% { 53 | -webkit-transform: translateY(0); 54 | transform: translateY(0); 55 | } 56 | 20% { 57 | -webkit-transform: translateY(-25px); 58 | transform: translateY(-25px); 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /content/spinner1_css.html: -------------------------------------------------------------------------------- 1 | 2 | .single1ball { 3 | height: 40px; 4 | width: 40px; 5 | border-radius: 50%; 6 | background-color: #EC644B; 7 | -webkit-animation: single1animation 4s infinite linear; 8 | animation: single1animation 4s infinite linear; 9 | } 10 | 11 | @-webkit-keyframes single1animation { 12 | 0%, 9%, 100% { 13 | -webkit-transform: scale(0); 14 | transform: scale(0); 15 | } 16 | 10%, 19%, 90%, 99% { 17 | -webkit-transform: scale(.2); 18 | transform: scale(.2); 19 | } 20 | 20%, 29%, 80%, 89% { 21 | -webkit-transform: scale(.4); 22 | transform: scale(.4); 23 | } 24 | 30%, 39%, 70%, 79% { 25 | -webkit-transform: scale(.6); 26 | transform: scale(.6); 27 | } 28 | 40%, 49%, 60%, 69% { 29 | -webkit-transform: scale(.8); 30 | transform: scale(.8); 31 | } 32 | 50%, 59% { 33 | -webkit-transform: scale(1); 34 | transform: scale(1); 35 | } 36 | } 37 | 38 | @keyframes single1animation { 39 | 0%, 9%, 100% { 40 | -webkit-transform: scale(0); 41 | transform: scale(0); 42 | } 43 | 10%, 19%, 90%, 99% { 44 | -webkit-transform: scale(.2); 45 | transform: scale(.2); 46 | } 47 | 20%, 29%, 80%, 89% { 48 | -webkit-transform: scale(.4); 49 | transform: scale(.4); 50 | } 51 | 30%, 39%, 70%, 79% { 52 | -webkit-transform: scale(.6); 53 | transform: scale(.6); 54 | } 55 | 40%, 49%, 60%, 69% { 56 | -webkit-transform: scale(.8); 57 | transform: scale(.8); 58 | } 59 | 50%, 59% { 60 | -webkit-transform: scale(1); 61 | transform: scale(1); 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /content/spinner7_css.html: -------------------------------------------------------------------------------- 1 | 2 | .single7 { 3 | height: 12px; 4 | width: 12px; 5 | border-radius: 50%; 6 | -webkit-animation: single7 4s infinite linear; 7 | animation: single7 4s infinite linear; 8 | } 9 | 10 | @-webkit-keyframes single7 { 11 | 0%, 20%, 100% { 12 | -webkit-transform: translate(-15px, 150px); 13 | transform: translate(-15px, -15px); 14 | background-color: #F5D76E; 15 | } 16 | 25%, 45% { 17 | -webkit-transform: translate(15px, -15px); 18 | transform: translate(15px, -15px); 19 | background-color: #4183D7; 20 | } 21 | 50%, 70% { 22 | -webkit-transform: translate(15px, 15px); 23 | transform: translate(15px, 15px); 24 | background-color: #D64541; 25 | } 26 | 75%, 95% { 27 | -webkit-transform: translate(-15px, 15px); 28 | transform: translate(-15px, 15px); 29 | background-color: #26A65B; 30 | } 31 | } 32 | 33 | @keyframes single7 { 34 | 0%, 20%, 100% { 35 | -webkit-transform: translate(-15px, 150px); 36 | transform: translate(-15px, -15px); 37 | background-color: #F5D76E; 38 | } 39 | 25%, 45% { 40 | -webkit-transform: translate(15px, -15px); 41 | transform: translate(15px, -15px); 42 | background-color: #4183D7; 43 | } 44 | 50%, 70% { 45 | -webkit-transform: translate(15px, 15px); 46 | transform: translate(15px, 15px); 47 | background-color: #D64541; 48 | } 49 | 75%, 95% { 50 | -webkit-transform: translate(-15px, 15px); 51 | transform: translate(-15px, 15px); 52 | background-color: #26A65B; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /content/multiple15_css.html: -------------------------------------------------------------------------------- 1 | 2 | .mul15 { 3 | height: 14px; 4 | width: 144px; 5 | } 6 | 7 | .m15c { 8 | height: 14px; 9 | width: 14px; 10 | margin: 0 2px; 11 | border-radius: 50%; 12 | float: left; 13 | background-color: #F4D03F; 14 | } 15 | 16 | .m15c1, .m15c2, 17 | .m15c3, .m15c4, 18 | .m15c5, .m15c6, 19 | .m15c7, .m15c8 { 20 | -webkit-animation: m15anim 2s infinite ease-in-out; 21 | animation: m15anim 2s infinite ease-in-out; 22 | } 23 | 24 | .m15c2 { -webkit-animation-delay: .25s; animation-delay: .25s } 25 | 26 | .m15c3 { -webkit-animation-delay: .5s; animation-delay: .5s } 27 | 28 | .m15c4 { -webkit-animation-delay: .75s; animation-delay: .75s } 29 | 30 | .m15c5 { -webkit-animation-delay: 1s; animation-delay: 1s } 31 | 32 | .m15c6 { -webkit-animation-delay: 1.25s; animation-delay: 1.25s } 33 | 34 | .m15c7 { -webkit-animation-delay: 1.5s; animation-delay: 1.5s } 35 | 36 | .m15c8 { -webkit-animation-delay: 1.75s; animation-delay: 1.75s } 37 | 38 | @-webkit-keyframes m15anim { 39 | 0%, 40%, 100% { 40 | background-color: #F4D03F; 41 | -webkit-transform: translateY(0); 42 | transform: translateY(0); 43 | } 44 | 20% { 45 | background-color: #C0392B; 46 | -webkit-transform: translateY(-12px); 47 | transform: translateY(-12px); 48 | } 49 | } 50 | 51 | @keyframes m15anim { 52 | 0%, 40%, 100% { 53 | background-color: #F4D03F; 54 | -webkit-transform: translateY(0); 55 | transform: translateY(0); 56 | } 57 | 20% { 58 | background-color: #C0392B; 59 | -webkit-transform: translateY(-12px); 60 | transform: translateY(-12px); 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /content/spinner8_css.html: -------------------------------------------------------------------------------- 1 | 2 | .single8 { 3 | width: 40px; 4 | height: 40px; 5 | border-radius: 50%; 6 | border: 10px solid red; 7 | -webkit-animation: single8 8s infinite linear; 8 | animation: single8 8s infinite linear; 9 | } 10 | 11 | @-webkit-keyframes single8 { 12 | 0%, 100%{ border: solid 20px #68C3A3; } 13 | 6.25% { border: solid 2px #68C3A3; } 14 | 12.5% { border: solid 2px #52B3D9; } 15 | 18.75% { border: solid 20px #52B3D9; } 16 | 25% { border: solid 20px #52B3D9; } 17 | 31.25% { border: solid 2px #52B3D9; } 18 | 37.5% { border: solid 2px #F4D03F; } 19 | 43.75% { border: solid 20px #F4D03F; } 20 | 50% { border: solid 20px #F4D03F; } 21 | 56.25% { border: solid 2px #F4D03F; } 22 | 62.5% { border: solid 2px #D24D57; } 23 | 68.75% { border: solid 20px #D24D57; } 24 | 75% { border: solid 20px #D24D57; } 25 | 81.25% { border: solid 2px #D24D57; } 26 | 87.5% { border: solid 2px #68C3A3; } 27 | 93.75% { border: solid 20px #68C3A3; } 28 | } 29 | 30 | @keyframes single8 { 31 | 0%, 100%{ border: solid 20px #68C3A3; } 32 | 6.25% { border: solid 2px #68C3A3; } 33 | 12.5% { border: solid 2px #52B3D9; } 34 | 18.75% { border: solid 20px #52B3D9; } 35 | 25% { border: solid 20px #52B3D9; } 36 | 31.25% { border: solid 2px #52B3D9; } 37 | 37.5% { border: solid 2px #F4D03F; } 38 | 43.75% { border: solid 20px #F4D03F; } 39 | 50% { border: solid 20px #F4D03F; } 40 | 56.25% { border: solid 2px #F4D03F; } 41 | 62.5% { border: solid 2px #D24D57; } 42 | 68.75% { border: solid 20px #D24D57; } 43 | 75% { border: solid 20px #D24D57; } 44 | 81.25% { border: solid 2px #D24D57; } 45 | 87.5% { border: solid 2px #68C3A3; } 46 | 93.75% { border: solid 20px #68C3A3; } 47 | } 48 | -------------------------------------------------------------------------------- /content/multiple3_css.html: -------------------------------------------------------------------------------- 1 | 2 | .mult3 { 3 | height: 40px; 4 | width: 40px; 5 | position: relative; 6 | } 7 | 8 | .mult3circle1, .mult3circle2 { 9 | height: 40px; 10 | width: 40px; 11 | border-radius: 50%; 12 | position: absolute; 13 | top: 0; 14 | left: 0; 15 | bottom: 0; 16 | right: 0; 17 | } 18 | 19 | .mult3circle1 { 20 | background-color: #66CC99; 21 | -webkit-animation: mult3circle1anim 4s infinite steps(1); 22 | animation: mult3circle1anim 4s infinite steps(1); 23 | } 24 | 25 | @-webkit-keyframes mult3circle1anim { 26 | 0%, 75%, 100% { 27 | -webkit-transform: scale(1); 28 | transform: scale(1); 29 | } 30 | 50% { 31 | -webkit-transform: scale(1.4); 32 | transform: scale(1.4); 33 | } 34 | } 35 | 36 | @keyframes mult3circle1anim { 37 | 0%, 75%, 100% { 38 | -webkit-transform: scale(1); 39 | transform: scale(1); 40 | } 41 | 50% { 42 | -webkit-transform: scale(1.4); 43 | transform: scale(1.4); 44 | } 45 | } 46 | 47 | .mult3circle2 { 48 | background-color: #438866; 49 | -webkit-animation: mult3circle2anim 4s infinite steps(1); 50 | animation: mult3circle2anim 4s infinite steps(1); 51 | } 52 | 53 | @-webkit-keyframes mult3circle2anim { 54 | 0%, 100% { 55 | -webkit-transform: scale(.65); 56 | transform: scale(.65); 57 | } 58 | 25% { 59 | -webkit-transform: scale(1); 60 | transform: scale(1); 61 | } 62 | } 63 | 64 | @keyframes mult3circle2anim { 65 | 0%, 100% { 66 | -webkit-transform: scale(.65); 67 | transform: scale(.65); 68 | } 69 | 25% { 70 | -webkit-transform: scale(1); 71 | transform: scale(1); 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /content/multiple8_css.html: -------------------------------------------------------------------------------- 1 | 2 | .mul8 { 3 | height: 50px; 4 | width: 50px; 5 | } 6 | 7 | .mul8circ1 { 8 | height: 50px; 9 | width: 50px; 10 | border-radius: 50%; 11 | border: 5px solid #76cbad; 12 | border-bottom-color: rgba(0,0,0,0); 13 | border-top-color: rgba(0,0,0,0); 14 | -webkit-animation: mul8circ1Anim 2s infinite linear; 15 | animation: mul8circ1Anim 2s infinite linear; 16 | position: absolute; 17 | } 18 | 19 | .mul8circ2 { 20 | height: 50px; 21 | width: 50px; 22 | border-radius: 50%; 23 | border: 5px solid #127961; 24 | border-bottom-color: rgba(0,0,0,0); 25 | border-top-color: rgba(0,0,0,0); 26 | -webkit-animation: mul8circ2Anim 2.5s infinite linear; 27 | animation: mul8circ2Anim 2.5s infinite linear; 28 | position: absolute; 29 | } 30 | 31 | @-webkit-keyframes mul8circ1Anim { 32 | 0% { 33 | -webkit-transform: rotate(0deg); 34 | transform: rotate(0deg); 35 | } 36 | 100% { 37 | -webkit-transform: rotate(360deg); 38 | transform: rotate(360deg); 39 | } 40 | } 41 | 42 | @keyframes mul8circ1Anim { 43 | 0% { 44 | -webkit-transform: rotate(0deg); 45 | transform: rotate(0deg); 46 | } 47 | 100% { 48 | -webkit-transform: rotate(360deg); 49 | transform: rotate(360deg); 50 | } 51 | } 52 | 53 | @-webkit-keyframes mul8circ2Anim { 54 | 0% { 55 | -webkit-transform: rotate(0deg); 56 | transform: rotate(0deg); 57 | } 58 | 100% { 59 | -webkit-transform: rotate(360deg); 60 | transform: rotate(360deg); 61 | } 62 | } 63 | 64 | @keyframes mul8circ2Anim { 65 | 0% { 66 | -webkit-transform: rotate(0deg); 67 | transform: rotate(0deg); 68 | } 69 | 100% { 70 | -webkit-transform: rotate(360deg); 71 | transform: rotate(360deg); 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /content/multiple11_css.html: -------------------------------------------------------------------------------- 1 | 2 | /****************************** 3 | * * 4 | * BROWSER COMPATIBILITY * 5 | * * 6 | * Chrome: 41+ * 7 | * Safari: 7.1+ * 8 | * Firefox: 35+ * 9 | * Opera: none * 10 | * IE: none * 11 | * Android: none * 12 | * iOS: 8.1+ * 13 | * * 14 | ******************************/ 15 | 16 | .mul11 { 17 | width: 60px; 18 | height: 60px; 19 | position: relative; 20 | } 21 | 22 | .mul11s { 23 | height: 30px; 24 | width: 30px; 25 | position: absolute; 26 | opacity: .75; 27 | mix-blend-mode: multiply; 28 | } 29 | 30 | .mul11s1 { 31 | top: 0; 32 | left: 15px; 33 | background-color: #52B3D9; 34 | -webkit-animation: mul11Spin 12s infinite steps(8); 35 | animation: mul11Spin 12s infinite steps(8); 36 | } 37 | 38 | .mul11s2 { 39 | top: 15px; 40 | left: 0; 41 | background-color: #F5D76E; 42 | -webkit-animation: mul11Spin 12s infinite steps(8); 43 | animation: mul11Spin 12s infinite steps(8); 44 | } 45 | 46 | .mul11s3 { 47 | top: 15px; 48 | left: 30px; 49 | background-color: #F2784B; 50 | -webkit-animation: mul11Spin 12s infinite steps(8); 51 | animation: mul11Spin 12s infinite steps(8); 52 | } 53 | 54 | .mul11s4 { 55 | top: 30px; 56 | left: 15px; 57 | background-color: #68C3A3; 58 | -webkit-animation: mul11Spin 12s infinite steps(8); 59 | animation: mul11Spin 12s infinite steps(8); 60 | } 61 | 62 | @-webkit-keyframes mul11Spin { 63 | 100% { 64 | -webkit-transform: rotate(360deg); 65 | transform: rotate(360deg); 66 | } 67 | } 68 | @keyframes mul11Spin { 69 | 100% { 70 | -webkit-transform: rotate(360deg); 71 | transform: rotate(360deg); 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /content/spinner5_css.html: -------------------------------------------------------------------------------- 1 | 2 | .single5 { 3 | height: 50px; 4 | width: 50px; 5 | background-color: pink; 6 | -webkit-animation: single5 5s infinite linear; 7 | animation: single5 5s infinite linear; 8 | } 9 | 10 | @-webkit-keyframes single5 { 11 | 0% { 12 | -webkit-transform: perspective(180px) rotateX(0deg) rotateY(0deg); 13 | background-color: #F4D03F; 14 | } 15 | 25% { 16 | -webkit-transform: perspective(180px) rotateX(-180.1deg) rotateY(0deg); 17 | background-color: #52B3D9; 18 | } 19 | 50% { 20 | -webkit-transform: perspective(180px) rotateX(-180deg) rotateY(179.9deg); 21 | background-color: #EC644B; 22 | } 23 | 75% { 24 | -webkit-transform: perspective(180px) rotateX(-360deg) rotateY(179.9deg); 25 | background-color: #68C3A3; 26 | } 27 | 100% { 28 | -webkit-transform: perspective(180px) rotateX(-360deg) rotateY(360deg); 29 | background-color: #F4D03F; 30 | } 31 | } 32 | 33 | @keyframes single5 { 34 | 0% { 35 | transform: perspective(180px) rotateX(0deg) rotateY(0deg); 36 | -webkit-transform: perspective(180px) rotateX(0deg) rotateY(0deg); 37 | background-color: #F4D03F; 38 | } 39 | 25% { 40 | transform: perspective(180px) rotateX(-180.1deg) rotateY(0deg); 41 | -webkit-transform: perspective(180px) rotateX(-180.1deg) rotateY(0deg); 42 | background-color: #52B3D9; 43 | } 44 | 50% { 45 | transform: perspective(180px) rotateX(-180deg) rotateY(179.9deg); 46 | -webkit-transform: perspective(180px) rotateX(-180deg) rotateY(179.9deg); 47 | background-color: #EC644B; 48 | } 49 | 75% { 50 | transform: perspective(180px) rotateX(-180deg) rotateY(179.9deg); 51 | -webkit-transform: perspective(180px) rotateX(-360deg) rotateY(179.9deg); 52 | background-color: #68C3A3; 53 | } 54 | 100% { 55 | transform: perspective(180px) rotateX(0deg) rotateY(360deg); 56 | -webkit-transform: perspective(180px) rotateX(-360deg) rotateY(360deg); 57 | background-color: #F4D03F; 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /content/multiple4_css.html: -------------------------------------------------------------------------------- 1 | 2 | .mul4 { 3 | height: 40px; 4 | width: 40px; 5 | background-color: pink; 6 | } 7 | 8 | .mul4stripe { 9 | height: 10px; 10 | width: 40px; 11 | } 12 | 13 | .mul4stripe1 { 14 | -webkit-animation: mul4stripe1 3s infinite ease-in-out; 15 | animation: mul4stripe1 3s infinite ease-in-out; 16 | } 17 | 18 | @-webkit-keyframes mul4stripe1{ 19 | 0%, 60%, 100% { 20 | background-color: indianred; 21 | } 22 | 10%, 50% { 23 | background-color: skyblue; 24 | } 25 | } 26 | @keyframes mul4stripe1{ 27 | 0%, 60%, 100% { 28 | background-color: indianred; 29 | } 30 | 10%, 50% { 31 | background-color: skyblue; 32 | } 33 | } 34 | 35 | .mul4stripe2 { 36 | -webkit-animation: mul4stripe2 3s infinite ease-in-out; 37 | animation: mul4stripe2 3s infinite ease-in-out; 38 | } 39 | 40 | @-webkit-keyframes mul4stripe2{ 41 | 0%, 10%, 70%, 100% { 42 | background-color: indianred; 43 | } 44 | 20%, 60% { 45 | background-color: skyblue; 46 | } 47 | } 48 | 49 | @keyframes mul4stripe2{ 50 | 0%, 10%, 70%, 100% { 51 | background-color: indianred; 52 | } 53 | 20%, 60% { 54 | background-color: skyblue; 55 | } 56 | } 57 | 58 | .mul4stripe3 { 59 | -webkit-animation: mul4stripe3 3s infinite ease-in-out; 60 | animation: mul4stripe3 3s infinite ease-in-out; 61 | } 62 | 63 | @-webkit-keyframes mul4stripe3{ 64 | 0%, 20%, 80%, 100% { 65 | background-color: indianred; 66 | } 67 | 30%, 70% { 68 | background-color: skyblue; 69 | } 70 | } 71 | 72 | @keyframes mul4stripe3{ 73 | 0%, 20%, 80%, 100% { 74 | background-color: indianred; 75 | } 76 | 30%, 70% { 77 | background-color: skyblue; 78 | } 79 | } 80 | 81 | .mul4stripe4 { 82 | -webkit-animation: mul4stripe4 3s infinite ease-in-out; 83 | animation: mul4stripe4 3s infinite ease-in-out; 84 | } 85 | 86 | @-webkit-keyframes mul4stripe4{ 87 | 0%, 30%, 90%, 100% { 88 | background-color: indianred; 89 | } 90 | 40%, 80% { 91 | background-color: skyblue; 92 | } 93 | } 94 | 95 | @keyframes mul4stripe4{ 96 | 0%, 30%, 90%, 100% { 97 | background-color: indianred; 98 | } 99 | 40%, 80% { 100 | background-color: skyblue; 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /content/multiple16_css.html: -------------------------------------------------------------------------------- 1 | 2 | .mul16 { 3 | height: 100px; 4 | width: 100px; 5 | -webkit-animation: mul16turn 2s infinite linear; 6 | animation: mul16turn 2s infinite linear; 7 | } 8 | 9 | @-webkit-keyframes mul16turn { 10 | 0% { 11 | -webkit-transform: rotate(0deg); 12 | transform: rotate(0deg); 13 | } 14 | 100% { 15 | -webkit-transform: rotate(360deg); 16 | transform: rotate(360deg); 17 | } 18 | } 19 | 20 | @keyframes mul16turn { 21 | 0% { 22 | -webkit-transform: rotate(0deg); 23 | transform: rotate(0deg); 24 | } 25 | 100% { 26 | -webkit-transform: rotate(360deg); 27 | transform: rotate(360deg); 28 | } 29 | } 30 | 31 | .m16c { 32 | height: 40px; 33 | width: 40px; 34 | border-radius: 50%; 35 | background-color: red; 36 | float: left; 37 | margin: 30px 3px 0; 38 | } 39 | 40 | .m16c1 { 41 | -webkit-animation: m16c1anim 3s infinite ease-in-out; 42 | animation: m16c1anim 3s infinite ease-in-out; 43 | } 44 | 45 | .m16c2 { 46 | -webkit-animation: m16c2anim 3s infinite ease-in-out; 47 | animation: m16c2anim 3s infinite ease-in-out; 48 | } 49 | 50 | @-webkit-keyframes m16c1anim { 51 | 0%, 100% { 52 | -webkit-transform: scale(.25); 53 | transform: scale(.25); 54 | background-color: #67b4d4; 55 | } 56 | 50% { 57 | -webkit-transform: scale(1.5); 58 | transform: scale(1.5); 59 | background-color: #4b7b9f; 60 | } 61 | } 62 | 63 | @keyframes m16c1anim { 64 | 0%, 100% { 65 | -webkit-transform: scale(.25); 66 | transform: scale(.25); 67 | background-color: #67b4d4; 68 | } 69 | 50% { 70 | -webkit-transform: scale(1.5); 71 | transform: scale(1.5); 72 | background-color: #4b7b9f; 73 | } 74 | } 75 | 76 | @-webkit-keyframes m16c2anim { 77 | 0%, 100% { 78 | -webkit-transform: scale(1.5); 79 | transform: scale(1.5); 80 | background-color: #4b7b9f; 81 | } 82 | 50% { 83 | -webkit-transform: scale(.25); 84 | transform: scale(.25); 85 | background-color: #67b4d4; 86 | } 87 | } 88 | @keyframes m16c2anim { 89 | 0%, 100% { 90 | -webkit-transform: scale(1.5); 91 | transform: scale(1.5); 92 | background-color: #4b7b9f; 93 | } 94 | 50% { 95 | -webkit-transform: scale(.25); 96 | transform: scale(.25); 97 | background-color: #67b4d4; 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /content/multiple10_css.html: -------------------------------------------------------------------------------- 1 | 2 | .mul10 { 3 | height: 50px; 4 | width: 50px; 5 | position: relative; 6 | } 7 | 8 | .m10c { 9 | height: 12px; 10 | width: 12px; 11 | border-radius: 50%; 12 | background-color: #E26A6A; 13 | position: absolute; 14 | } 15 | 16 | .m10c1, .m10c2, .m10c3 { 17 | top: 0; 18 | } 19 | 20 | .m10c4, .m10c5, .m10c6 { 21 | top: 19px; 22 | } 23 | 24 | .m10c7, .m10c8, .m10c9 { 25 | top: 38px; 26 | } 27 | 28 | .m10c1, .m10c4, .m10c7 { 29 | left: 0; 30 | } 31 | 32 | .m10c2, .m10c5, .m10c8 { 33 | left: 19px; 34 | } 35 | 36 | .m10c3, .m10c6, .m10c9 { 37 | left: 38px; 38 | } 39 | 40 | .m10c1 { 41 | -webkit-animation: m10Anim 3s infinite ease-in-out; 42 | animation: m10Anim 3s infinite ease-in-out; 43 | } 44 | 45 | .m10c2 { 46 | -webkit-animation: m10Anim 4s infinite ease-in-out; 47 | animation: m10Anim 4s infinite ease-in-out; 48 | } 49 | 50 | .m10c3 { 51 | -webkit-animation: m10Anim 7s infinite ease-in-out; 52 | animation: m10Anim 7s infinite ease-in-out; 53 | } 54 | 55 | .m10c4 { 56 | -webkit-animation: m10Anim 2.5s infinite ease-in-out; 57 | animation: m10Anim 2.5s infinite ease-in-out; 58 | } 59 | 60 | .m10c5 { 61 | -webkit-animation: m10Anim 5s infinite ease-in-out; 62 | animation: m10Anim 5s infinite ease-in-out; 63 | } 64 | 65 | .m10c6 { 66 | -webkit-animation: m10Anim 6.2s infinite ease-in-out; 67 | animation: m10Anim 6.2s infinite ease-in-out; 68 | } 69 | 70 | .m10c7 { 71 | -webkit-animation: m10Anim 8.4s infinite ease-in-out; 72 | animation: m10Anim 8.4s infinite ease-in-out; 73 | } 74 | 75 | .m10c8 { 76 | -webkit-animation: m10Anim 5.5s infinite ease-in-out; 77 | animation: m10Anim 5.5s infinite ease-in-out; 78 | } 79 | 80 | .m10c9 { 81 | -webkit-animation: m10Anim 6s infinite ease-in-out; 82 | animation: m10Anim 6s infinite ease-in-out; 83 | } 84 | 85 | @-webkit-keyframes m10Anim { 86 | 0%, 80%, 100% { 87 | opacity: 0; 88 | -webkit-transform: scale(0); 89 | transform: scale(0); 90 | } 91 | 40%, 60% { 92 | opacity: 1; 93 | -webkit-transform: scale(1); 94 | transform: scale(1); 95 | } 96 | } 97 | @keyframes m10Anim { 98 | 0%, 80%, 100% { 99 | opacity: 0; 100 | -webkit-transform: scale(0); 101 | transform: scale(0); 102 | } 103 | 40%, 60% { 104 | opacity: 1; 105 | -webkit-transform: scale(1); 106 | transform: scale(1); 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /content/multiple13_css.html: -------------------------------------------------------------------------------- 1 | 2 | .mul13 { 3 | width: 30px; 4 | height: 30px; 5 | position: relative; 6 | } 7 | 8 | .m13s { 9 | height: 30px; 10 | width: 30px; 11 | border-radius: 50%; 12 | position: absolute; 13 | opacity: .75; 14 | } 15 | 16 | .m13c1 { 17 | background-color: #68C3A3; 18 | -webkit-animation: m13s1anim 2s infinite linear; 19 | animation: m13s1anim 2s infinite linear; 20 | } 21 | 22 | .m13c2 { 23 | background-color: #EC644B; 24 | -webkit-animation: m13s2anim 2s infinite linear; 25 | animation: m13s2anim 2s infinite linear; 26 | } 27 | 28 | @-webkit-keyframes m13s1anim { 29 | 0%, 100% { 30 | -webkit-transform: translateX(-15px); 31 | transform: translateX(-15px); 32 | } 33 | 25% { 34 | -webkit-transform: scale(0.6); 35 | transform: scale(0.6); 36 | opacity: .25; 37 | } 38 | 50% { 39 | -webkit-transform: translateX(15px); 40 | transform: translateX(15px); 41 | } 42 | 75% { 43 | -webkit-transform: scale(1.4); 44 | transform: scale(1.4); 45 | opacity: .8; 46 | } 47 | } 48 | 49 | @keyframes m13s1anim { 50 | 0%, 100% { 51 | -webkit-transform: translateX(-15px); 52 | transform: translateX(-15px); 53 | } 54 | 25% { 55 | -webkit-transform: scale(0.6); 56 | transform: scale(0.6); 57 | opacity: .25; 58 | } 59 | 50% { 60 | -webkit-transform: translateX(15px); 61 | transform: translateX(15px); 62 | } 63 | 75% { 64 | -webkit-transform: scale(1.4); 65 | transform: scale(1.4); 66 | opacity: .8; 67 | } 68 | } 69 | 70 | @-webkit-keyframes m13s2anim { 71 | 0%, 100% { 72 | -webkit-transform: translateX(15px); 73 | transform: translateX(15px); 74 | } 75 | 25% { 76 | -webkit-transform: scale(1.4); 77 | transform: scale(1.4); 78 | opacity: .8; 79 | } 80 | 50% { 81 | -webkit-transform: translateX(-15px); 82 | transform: translateX(-15px); 83 | } 84 | 75% { 85 | -webkit-transform: scale(0.6); 86 | transform: scale(0.6); 87 | opacity: .25; 88 | } 89 | } 90 | 91 | @keyframes m13s2anim { 92 | 0%, 100% { 93 | -webkit-transform: translateX(15px); 94 | transform: translateX(15px); 95 | } 96 | 25% { 97 | -webkit-transform: scale(1.4); 98 | transform: scale(1.4); 99 | opacity: .8; 100 | } 101 | 50% { 102 | -webkit-transform: translateX(-15px); 103 | transform: translateX(-15px); 104 | } 105 | 75% { 106 | -webkit-transform: scale(0.6); 107 | transform: scale(0.6); 108 | opacity: .25; 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /content/multiple1_css.html: -------------------------------------------------------------------------------- 1 | 2 | .ball1, .ball2, .ball3 { 3 | height: 10px; 4 | width: 10px; 5 | border-radius: 50%; 6 | float: left; 7 | margin: 0 3px; 8 | } 9 | 10 | .ball1 { 11 | background-color: #62abc1; 12 | -webkit-animation: single1ball1anim 2s infinite linear; 13 | animation: single1ball1anim 2s infinite linear; 14 | } 15 | 16 | @-webkit-keyframes single1ball1anim { 17 | 0% { 18 | -webkit-transform: scale(1); 19 | transform: scale(1); 20 | } 21 | 12.5% { 22 | -webkit-transform: scale(1.2); 23 | transform: scale(1.5); 24 | } 25 | 25%, 100% { 26 | -webkit-transform: scale(1); 27 | transform: scale(1) 28 | } 29 | } 30 | 31 | @keyframes single1ball1anim { 32 | 0% { 33 | -webkit-transform: scale(1); 34 | transform: scale(1); 35 | } 36 | 12.5% { 37 | -webkit-transform: scale(1.2); 38 | transform: scale(1.5); 39 | } 40 | 25%, 100% { 41 | -webkit-transform: scale(1); 42 | transform: scale(1) 43 | } 44 | } 45 | 46 | .ball2 { 47 | background-color: #468295; 48 | -webkit-animation: single1ball2anim 2s infinite linear; 49 | animation: single1ball2anim 2s infinite linear; 50 | } 51 | 52 | @-webkit-keyframes single1ball2anim { 53 | 0%, 25% { 54 | -webkit-transform: scale(1); 55 | transform: scale(1); 56 | } 57 | 37.5% { 58 | -webkit-transform: scale(1.2); 59 | transform: scale(1.5) 60 | } 61 | 50%, 100% { 62 | -webkit-transform: scale(1); 63 | transform: scale(1); 64 | } 65 | } 66 | 67 | @keyframes single1ball2anim { 68 | 0%, 25% { 69 | -webkit-transform: scale(1); 70 | transform: scale(1); 71 | } 72 | 37.5% { 73 | -webkit-transform: scale(1.2); 74 | transform: scale(1.5) 75 | } 76 | 50%, 100% { 77 | -webkit-transform: scale(1); 78 | transform: scale(1); 79 | } 80 | } 81 | 82 | .ball3 { 83 | background-color: #34616f; 84 | -webkit-animation: single1ball3anim 2s infinite linear; 85 | animation: single1ball3anim 2s infinite linear; 86 | } 87 | 88 | @-webkit-keyframes single1ball3anim { 89 | 0%, 50% { 90 | -webkit-transform: scale(1); 91 | transform: scale(1); 92 | } 93 | 62.5% { 94 | -webkit-transform: scale(1.2); 95 | transform: scale(1.5) 96 | } 97 | 75%, 100% { 98 | -webkit-transform: scale(1); 99 | transform: scale(1); 100 | } 101 | } 102 | 103 | @keyframes single1ball3anim { 104 | 0%, 50% { 105 | -webkit-transform: scale(1); 106 | transform: scale(1); 107 | } 108 | 62.5% { 109 | -webkit-transform: scale(1.2); 110 | transform: scale(1.5) 111 | } 112 | 75%, 100% { 113 | -webkit-transform: scale(1); 114 | transform: scale(1); 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /content/multiple5_css.html: -------------------------------------------------------------------------------- 1 | 2 | .mul5 { 3 | height: 50px; 4 | width: 50px; 5 | position: relative; 6 | } 7 | 8 | .mul5circle1 { 9 | height: 50px; 10 | width: 50px; 11 | position: absolute; 12 | border-radius: 50%; 13 | border: 6px solid #96281B; 14 | border-bottom-color: rgba(0,0,0,0); 15 | -webkit-animation: mul5circle1anim 3s infinite linear; 16 | animation: mul5circle1anim 3s infinite linear; 17 | } 18 | 19 | @-webkit-keyframes mul5circle1anim { 20 | 0% { 21 | -webkit-transform: rotate(0deg); 22 | transform: rotate(0deg); 23 | } 24 | 100% { 25 | -webkit-transform: rotate(360deg); 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @keyframes mul5circle1anim { 31 | 0% { 32 | -webkit-transform: rotate(0deg); 33 | transform: rotate(0deg); 34 | } 35 | 100% { 36 | -webkit-transform: rotate(360deg); 37 | transform: rotate(360deg); 38 | } 39 | } 40 | 41 | .mul5circle2 { 42 | height: 34px; 43 | width: 34px; 44 | position: absolute; 45 | border-radius: 50%; 46 | border: 6px solid #C0392B; 47 | border-left-color: rgba(0,0,0,0); 48 | -webkit-animation: mul5circle2anim 4s infinite linear; 49 | animation: mul5circle2anim 4s infinite linear; 50 | } 51 | 52 | @-webkit-keyframes mul5circle2anim { 53 | 0% { 54 | -webkit-transform: translate(8px, 8px) rotate(0deg); 55 | transform: translate(8px, 8px) rotate(0deg); 56 | } 57 | 100% { 58 | -webkit-transform: translate(8px, 8px) rotate(-360deg); 59 | transform: translate(8px, 8px) rotate(-360deg); 60 | } 61 | } 62 | 63 | @keyframes mul5circle2anim { 64 | 0% { 65 | -webkit-transform: translate(8px, 8px) rotate(0deg); 66 | transform: translate(8px, 8px) rotate(0deg); 67 | } 68 | 100% { 69 | -webkit-transform: translate(8px, 8px) rotate(-360deg); 70 | transform: translate(8px, 8px) rotate(-360deg); 71 | } 72 | } 73 | 74 | .mul5circle3 { 75 | height: 18px; 76 | width: 18px; 77 | position: absolute; 78 | border-radius: 50%; 79 | border: 6px solid #E74C3C; 80 | border-right-color: rgba(0,0,0,0); 81 | -webkit-animation: mul5circle3anim 5s infinite linear; 82 | animation: mul5circle3anim 5s infinite linear; 83 | } 84 | 85 | @-webkit-keyframes mul5circle3anim { 86 | 0% { 87 | -webkit-transform: translate(16px, 16px) rotate(0deg); 88 | transform: translate(16px, 16px) rotate(0deg); 89 | } 90 | 100% { 91 | -webkit-transform: translate(16px, 16px) rotate(360deg); 92 | transform: translate(16px, 16px) rotate(360deg); 93 | } 94 | } 95 | 96 | @keyframes mul5circle3anim { 97 | 0% { 98 | -webkit-transform: translate(16px, 16px) rotate(0deg); 99 | transform: translate(16px, 16px) rotate(0deg); 100 | } 101 | 100% { 102 | -webkit-transform: translate(16px, 16px) rotate(360deg); 103 | transform: translate(16px, 16px) rotate(360deg); 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /content/multiple9_css.html: -------------------------------------------------------------------------------- 1 | 2 | /****************************** 3 | * * 4 | * BROWSER COMPATIBILITY * 5 | * * 6 | * Chrome: 41+ * 7 | * Safari: 7.1+ * 8 | * Firefox: 35+ * 9 | * Opera: none * 10 | * IE: none * 11 | * Android: none * 12 | * iOS: 8.1+ * 13 | * * 14 | ******************************/ 15 | 16 | .mul9 { 17 | height: 50px; 18 | width: 50px; 19 | position: relative; 20 | } 21 | 22 | .mul9circ1, 23 | .mul9circ2, 24 | .mul9circ3 { 25 | height: 50px; 26 | width: 50px; 27 | border-radius: 50%; 28 | position: absolute; 29 | mix-blend-mode: multiply; 30 | } 31 | 32 | .mul9circ1 { 33 | background-color: #FF00FF; 34 | -webkit-transform: translate(0, 10px); 35 | transform: translate(0, 10px); 36 | -webkit-animation: mul9circ1Anim 3s infinite ease-in-out; 37 | animation: mul9circ1Anim 3s infinite ease-in-out; 38 | } 39 | 40 | .mul9circ2 { 41 | background-color: #FFFF00; 42 | -webkit-transform: translate(-16px, -16px); 43 | transform: translate(-16px, -16px); 44 | -webkit-animation: mul9circ2Anim 3s infinite ease-in-out; 45 | animation: mul9circ2Anim 3s infinite ease-in-out; 46 | } 47 | 48 | .mul9circ3 { 49 | background-color: #00FFFF; 50 | -webkit-transform: translate(16px, -16px); 51 | transform: translate(16px, -16px); 52 | -webkit-animation: mul9circ3Anim 3s infinite ease-in-out; 53 | animation: mul9circ3Anim 3s infinite ease-in-out; 54 | } 55 | 56 | @-webkit-keyframes mul9circ1Anim { 57 | 0%, 25%, 100% { 58 | -webkit-transform: translate(0, 10px); 59 | transform: translate(0, 10px); 60 | } 61 | 50%, 75% { 62 | -webkit-transform: translate(0, 0); 63 | transform: translate(0, 0); 64 | } 65 | } 66 | 67 | @keyframes mul9circ1Anim { 68 | 0%, 25%, 100% { 69 | -webkit-transform: translate(0, 10px); 70 | transform: translate(0, 10px); 71 | } 72 | 50%, 75% { 73 | -webkit-transform: translate(0, 0); 74 | transform: translate(0, 0); 75 | } 76 | } 77 | 78 | @-webkit-keyframes mul9circ2Anim { 79 | 0%, 25%, 100% { 80 | -webkit-transform: translate(-16px, -16px); 81 | transform: translate(-16px, -16px); 82 | } 83 | 50%, 75% { 84 | -webkit-transform: translate(0, 0); 85 | transform: translate(0, 0); 86 | } 87 | } 88 | 89 | @keyframes mul9circ2Anim { 90 | 0%, 25%, 100% { 91 | -webkit-transform: translate(-16px, -16px); 92 | transform: translate(-16px, -16px); 93 | } 94 | 50%, 75% { 95 | -webkit-transform: translate(0, 0); 96 | transform: translate(0, 0); 97 | } 98 | } 99 | 100 | @-webkit-keyframes mul9circ3Anim { 101 | 0%, 25%, 100% { 102 | -webkit-transform: translate(16px, -16px); 103 | transform: translate(16px, -16px); 104 | } 105 | 50%, 75% { 106 | -webkit-transform: translate(0, 0); 107 | transform: translate(0, 0); 108 | } 109 | } 110 | 111 | @keyframes mul9circ3Anim { 112 | 0%, 25%, 100% { 113 | -webkit-transform: translate(16px, -16px); 114 | transform: translate(16px, -16px); 115 | } 116 | 50%, 75% { 117 | -webkit-transform: translate(0, 0); 118 | transform: translate(0, 0); 119 | } 120 | } 121 | -------------------------------------------------------------------------------- /content/multiple6_css.html: -------------------------------------------------------------------------------- 1 | 2 | .mul6 { 3 | height: 30px; 4 | width: 30px; 5 | position: relative; 6 | } 7 | 8 | .mul6_1 { 9 | height: 12px; 10 | width: 12px; 11 | border-radius: 50%; 12 | position: absolute; 13 | -webkit-animation: mul6_1anim 4s infinite linear; 14 | animation: mul6_1anim 4s infinite linear; 15 | } 16 | 17 | .mul6_2 { 18 | height: 12px; 19 | width: 12px; 20 | border-radius: 50%; 21 | position: absolute; 22 | -webkit-animation: mul6_2anim 4s infinite linear; 23 | a nimation: mul6_2anim 4s infinite linear; 24 | } 25 | 26 | @-webkit-keyframes mul6_1anim { 27 | 0%, 20%, 100% { 28 | -we bkit-transform: translate(-6px, -6px); 29 | transform: translate(-6px, -6px); 30 | background-color: #F5D76E; 31 | } 32 | 33 | 25%, 45% { 34 | -webkit-transform: translate(24px, -6px); 35 | transform: translate(24px, -6px); 36 | background-color: #4183D7; 37 | } 38 | 39 | 50%, 70% { 40 | -webkit-transform: translate(24px, 24px); 41 | transform: translate(24px, 24px); 42 | background-color: #D64541; 43 | } 44 | 45 | 75%, 95% { 46 | -webkit-transform: translate(-6px, 24px); 47 | transform: translate(-6px, 24px); 48 | background-color: #26A65B; 49 | } 50 | } 51 | 52 | @keyframes mul6_1anim { 53 | 0%, 20%, 100% { 54 | -webkit-transform: translate(-6px, -6px); 55 | transform: translate(-6px, -6px); 56 | background-color: #F5D76E; 57 | } 58 | 59 | 25%, 45% { 60 | -webkit-transform: translate(24px, -6px); 61 | transform: translate(24px, -6px); 62 | background-color: #4183D7; 63 | } 64 | 65 | 50%, 70% { 66 | -webkit-transform: translate(24px, 24px); 67 | transform: translate(24px, 24px); 68 | background-color: #D64541; 69 | } 70 | 71 | 75%, 95% { 72 | -webkit-transform: translate(-6px, 24px); 73 | transform: translate(-6px, 24px); 74 | background-color: #26A65B; 75 | } 76 | } 77 | 78 | @-webkit-keyframes mul6_2anim { 79 | 0%, 20%, 100% { 80 | -webkit-transform: translate(24px, 24px); 81 | transform: translate(24px, 24px); 82 | background-color: #D64541; 83 | } 84 | 85 | 25%, 45% { 86 | -webkit-transform: translate(-6px, 24px); 87 | transform: translate(-6px, 24px); 88 | background-color: #26A65B; 89 | } 90 | 91 | 50%, 70% { 92 | -webkit-transform: translate(-6px, -6px); 93 | transform: translate(-6px, -6px); 94 | background-color: #F5D76E; 95 | } 96 | 97 | 75%, 95% { 98 | -webkit-transform: translate(24px, -6px); 99 | transform: translate(24px, -6px); 100 | background-color: #4183D7; 101 | } 102 | } 103 | 104 | @keyframes mul6_2anim { 105 | 0%, 20%, 100% { 106 | -webkit-transform: translate(24px, 24px); 107 | transform: translate(24px, 24px); 108 | background-color: #D64541; 109 | } 110 | 111 | 25%, 45% { 112 | -webkit-transform: translate(-6px, 24px); 113 | transform: translate(-6px, 24px); 114 | background-color: #26A65B; 115 | } 116 | 117 | 50%, 70% { 118 | -webkit-transform: translate(-6px, -6px); 119 | transform: translate(-6px, -6px); 120 | background-color: #F5D76E; 121 | } 122 | 123 | 75%, 95% { 124 | -webkit-transform: translate(24px, -6px); 125 | transform: translate(24px, -6px); 126 | background-color: #4183D7; 127 | } 128 | } 129 | -------------------------------------------------------------------------------- /content/multiple2_css.html: -------------------------------------------------------------------------------- 1 | 2 | .mult2rect { 3 | height: 30px; 4 | width: 7px; 5 | margin: 0 2px; 6 | } 7 | 8 | .mult2rect1 { 9 | background-color: #F5D76E; 10 | -webkit-animation: mult2rect1 3s infinite linear; 11 | animation: mult2rect1 3s infinite linear; 12 | } 13 | 14 | @-webkit-keyframes mult2rect1 { 15 | 0%, 10%, 70%, 80%, 100% { 16 | -webkit-transform: scaleY(1); 17 | transform: scaleY(1); 18 | } 19 | 5%, 75% { 20 | -webkit-transform: scaleY(2); 21 | transform: scaleY(2); 22 | } 23 | } 24 | 25 | @keyframes mult2rect1 { 26 | 0%, 10%, 70%, 80%, 100% { 27 | -webkit-transform: scaleY(1); 28 | transform: scaleY(1); 29 | } 30 | 5%, 75% { 31 | -webkit-transform: scaleY(2); 32 | transform: scaleY(2); 33 | } 34 | } 35 | 36 | .mult2rect2 { 37 | background-color: #F4D03F; 38 | -webkit-animation: mult2rect2 3s infinite linear; 39 | animation: mult2rect2 3s infinite linear; 40 | } 41 | 42 | @-webkit-keyframes mult2rect2 { 43 | 0%, 5%, 15%, 65%, 75%, 100% { 44 | -webkit-transform: scaleY(1); 45 | transform: scaleY(1); 46 | } 47 | 10%, 70% { 48 | -webkit-transform: scaleY(2); 49 | transform: scaleY(2); 50 | } 51 | } 52 | 53 | @keyframes mult2rect2 { 54 | 0%, 5%, 15%, 65%, 75%, 100% { 55 | -webkit-transform: scaleY(1); 56 | transform: scaleY(1); 57 | } 58 | 10%, 70% { 59 | -webkit-transform: scaleY(2); 60 | transform: scaleY(2); 61 | } 62 | } 63 | 64 | .mult2rect3 { 65 | background-color: #EB9532; 66 | -webkit-animation: mult2rect3 3s infinite linear; 67 | animation: mult2rect3 3s infinite linear; 68 | } 69 | 70 | @-webkit-keyframes mult2rect3 { 71 | 0%, 10%, 20%, 60%, 70%, 100% { 72 | -webkit-transform: scaleY(1); 73 | transform: scaleY(1); 74 | } 75 | 15%, 65% { 76 | -webkit-transform: scaleY(2); 77 | transform: scaleY(2); 78 | } 79 | } 80 | 81 | @keyframes mult2rect3 { 82 | 0%, 10%, 20%, 60%, 70%, 100% { 83 | -webkit-transform: scaleY(1); 84 | transform: scaleY(1); 85 | } 86 | 15%, 65% { 87 | -webkit-transform: scaleY(2); 88 | transform: scaleY(2); 89 | } 90 | } 91 | 92 | .mult2rect4 { 93 | background-color: #EC644B; 94 | -webkit-animation: mult2rect4 3s infinite linear; 95 | animation: mult2rect4 3s infinite linear; 96 | } 97 | 98 | @-webkit-keyframes mult2rect4 { 99 | 0%, 15%, 25%, 55%, 65%, 100% { 100 | -webkit-transform: scaleY(1); 101 | transform: scaleY(1); 102 | } 103 | 20%, 60% { 104 | -webkit-transform: scaleY(2); 105 | transform: scaleY(2); 106 | } 107 | } 108 | 109 | @keyframes mult2rect4 { 110 | 0%, 15%, 25%, 55%, 65%, 100% { 111 | -webkit-transform: scaleY(1); 112 | transform: scaleY(1); 113 | } 114 | 20%, 60% { 115 | -webkit-transform: scaleY(2); 116 | transform: scaleY(2); 117 | } 118 | } 119 | 120 | .mult2rect5 { 121 | background-color: #C0392B; 122 | -webkit-animation: mult2rect5 3s infinite linear; 123 | animation: mult2rect5 3s infinite linear; 124 | } 125 | 126 | @-webkit-keyframes mult2rect5 { 127 | 0%, 20%, 30%, 50%, 60%, 100% { 128 | -webkit-transform: scaleY(1); 129 | transform: scaleY(1); 130 | } 131 | 25%, 55% { 132 | -webkit-transform: scaleY(2); 133 | transform: scaleY(2); 134 | } 135 | } 136 | 137 | @keyframes mult2rect5 { 138 | 0%, 20%, 30%, 50%, 60%, 100% { 139 | -webkit-transform: scaleY(1); 140 | transform: scaleY(1); 141 | } 142 | 25%, 55% { 143 | -webkit-transform: scaleY(2); 144 | transform: scaleY(2); 145 | } 146 | } 147 | 148 | -------------------------------------------------------------------------------- /content/multiple7_css.html: -------------------------------------------------------------------------------- 1 | 2 | .mul7 { 3 | height: 70px; 4 | width: 70px; 5 | position: relative; 6 | } 7 | 8 | .mul7circ { 9 | width: 70px; 10 | height: 70px; 11 | position: absolute; 12 | } 13 | 14 | .mul7circ:before { 15 | content: ''; 16 | display: block; 17 | margin: 0 auto; 18 | width: 10px; 19 | height: 10px; 20 | background-color: #333; 21 | border-radius: 100%; 22 | -webkit-animation: multiple7Animation 1.2s infinite ease-in-out both; 23 | animation: multiple7Animation 1.2s infinite ease-in-out both; 24 | } 25 | 26 | /* Circle Colors */ 27 | .m7c12:before { 28 | background-color: #F5D76E; 29 | } 30 | .m7c1:before, .m7c11:before { 31 | background-color: #f8ba72; 32 | } 33 | .m7c2:before, .m7c10:before { 34 | background-color: #EB9532; 35 | } 36 | .m7c3:before, .m7c9:before { 37 | background-color: #F27935; 38 | } 39 | .m7c4:before, .m7c8:before { 40 | background-color: #EC644B; 41 | } 42 | .m7c5:before, .m7c7:before { 43 | background-color: #EF4836; 44 | } 45 | .m7c6:before { 46 | background-color: #C0392B; 47 | } 48 | 49 | /* Rotate circles */ 50 | .m7c1 { 51 | -webkit-transform: rotate(30deg); 52 | transform: rotate(30deg); 53 | } 54 | .m7c2 { 55 | -webkit-transform: rotate(60deg); 56 | transform: rotate(60deg); 57 | } 58 | .m7c3 { 59 | -webkit-transform: rotate(90deg); 60 | transform: rotate(90deg); 61 | } 62 | .m7c4 { 63 | -webkit-transform: rotate(120deg); 64 | transform: rotate(120deg); 65 | } 66 | .m7c5 { 67 | -webkit-transform: rotate(150deg); 68 | transform: rotate(150deg); 69 | } 70 | .m7c6 { 71 | -webkit-transform: rotate(180deg); 72 | transform: rotate(180deg); 73 | } 74 | .m7c7 { 75 | -webkit-transform: rotate(210deg); 76 | transform: rotate(210deg); 77 | } 78 | .m7c8 { 79 | -webkit-transform: rotate(240deg); 80 | transform: rotate(240deg); 81 | } 82 | .m7c9 { 83 | -webkit-transform: rotate(270deg); 84 | transform: rotate(270deg); 85 | } 86 | .m7c10 { 87 | -webkit-transform: rotate(300deg); 88 | transform: rotate(300deg); 89 | } 90 | .m7c11 { 91 | -webkit-transform: rotate(330deg); 92 | transform: rotate(330deg); 93 | } 94 | 95 | /* Delay the Animation */ 96 | .m7c2:before { 97 | -webkit-animation-delay: -1.1s; 98 | animation-delay: -1.1s; 99 | } 100 | .m7c3:before { 101 | -webkit-animation-delay: -1s; 102 | animation-delay: -1s; 103 | } 104 | .m7c4:before { 105 | -webkit-animation-delay: -0.9s; 106 | animation-delay: -0.9s; 107 | } 108 | .m7c5:before { 109 | -webkit-animation-delay: -0.8s; 110 | animation-delay: -0.8s; 111 | } 112 | .m7c6:before { 113 | -webkit-animation-delay: -0.7s; 114 | animation-delay: -0.7s; 115 | } 116 | .m7c7:before { 117 | -webkit-animation-delay: -0.6s; 118 | animation-delay: -0.6s; 119 | } 120 | .m7c8:before { 121 | -webkit-animation-delay: -0.5s; 122 | animation-delay: -0.5s; 123 | } 124 | .m7c9:before { 125 | -webkit-animation-delay: -0.4s; 126 | animation-delay: -0.4s; 127 | } 128 | .m7c10:before { 129 | -webkit-animation-delay: -0.3s; 130 | animation-delay: -0.3s; 131 | } 132 | .m7c11:before { 133 | -webkit-animation-delay: -0.2s; 134 | animation-delay: -0.2s; 135 | } 136 | .m7c12:before { 137 | -webkit-animation-delay: -0.1s; 138 | animation-delay: -0.1s; 139 | } 140 | 141 | /* Circles Animation */ 142 | @-webkit-keyframes multiple7Animation { 143 | 0%, 80%, 100% { 144 | -webkit-transform: scale(0); 145 | transform: scale(0); 146 | opacity: 0; 147 | } 40% { 148 | -webkit-transform: scale(1); 149 | transform: scale(1); 150 | opacity: 1; 151 | } 152 | } 153 | 154 | @keyframes multiple7Animation { 155 | 0%, 80%, 100% { 156 | -webkit-transform: scale(0); 157 | transform: scale(0); 158 | opacity: 0; 159 | } 40% { 160 | -webkit-transform: scale(1); 161 | transform: scale(1); 162 | opacity: 1; 163 | } 164 | } 165 | -------------------------------------------------------------------------------- /content/multiple12_css.html: -------------------------------------------------------------------------------- 1 | 2 | /****************************** 3 | * * 4 | * BROWSER COMPATIBILITY * 5 | * * 6 | * Chrome: 41+ * 7 | * Safari: 7.1+ * 8 | * Firefox: 35+ * 9 | * Opera: none * 10 | * IE: none * 11 | * Android: none * 12 | * iOS: 8.1+ * 13 | * * 14 | ******************************/ 15 | 16 | .mul12 { 17 | height: 40px; 18 | width: 40px; 19 | position: relative; 20 | } 21 | 22 | .m12s { 23 | height: 40px; 24 | width: 40px; 25 | position: absolute; 26 | top: 0; 27 | left: 0; 28 | mix-blend-mode: multiply; 29 | opacity: .75; 30 | } 31 | 32 | .m12s1 { 33 | background-color: orangered; 34 | -webkit-animation: m12s1anim 5s infinite linear; 35 | animation: m12s1anim 5s infinite linear; 36 | } 37 | 38 | .m12s2 { 39 | background-color: green; 40 | -webkit-animation: m12s2anim 5s infinite linear; 41 | animation: m12s2anim 5s infinite linear; 42 | } 43 | 44 | @-webkit-keyframes m12s1anim { 45 | 0%, 20% { 46 | -webkit-transform: rotate(0deg) translateX(0px); 47 | transform: rotate(0deg) translateX(0px); 48 | background-color: #F4D03F; 49 | } 50 | 25%, 45% { 51 | -webkit-transform: rotate(90deg) translateX(20px); 52 | transform: rotate(90deg) translateX(20px); 53 | background-color: #EC644B; 54 | } 55 | 50%, 70% { 56 | -webkit-transform: rotate(180deg) translateX(0px); 57 | transform: rotate(180deg) translateX(0px); 58 | background-color: #C0392B; 59 | } 60 | 75%, 95% { 61 | -webkit-transform: rotate(270deg) translateX(20px); 62 | transform: rotate(270deg) translateX(20px); 63 | background-color: #EC644B; 64 | } 65 | 100% { 66 | -webkit-transform: rotate(360deg) translateX(0px); 67 | transform: rotate(360deg) translateX(0px); 68 | background-color: #F4D03F; 69 | } 70 | } 71 | 72 | @keyframes m12s1anim { 73 | 0%, 20% { 74 | -webkit-transform: rotate(0deg) translateX(0px); 75 | transform: rotate(0deg) translateX(0px); 76 | background-color: #F4D03F; 77 | } 78 | 25%, 45% { 79 | -webkit-transform: rotate(90deg) translateX(20px); 80 | transform: rotate(90deg) translateX(20px); 81 | background-color: #EC644B; 82 | } 83 | 50%, 70% { 84 | -webkit-transform: rotate(180deg) translateX(0px); 85 | transform: rotate(180deg) translateX(0px); 86 | background-color: #C0392B; 87 | } 88 | 75%, 95% { 89 | -webkit-transform: rotate(270deg) translateX(20px); 90 | transform: rotate(270deg) translateX(20px); 91 | background-color: #EC644B; 92 | } 93 | 100% { 94 | -webkit-transform: rotate(360deg) translateX(0px); 95 | transform: rotate(360deg) translateX(0px); 96 | background-color: #F4D03F; 97 | } 98 | } 99 | 100 | @-webkit-keyframes m12s2anim { 101 | 0%, 20% { 102 | -webkit-transform: rotate(0deg) translateX(-20px); 103 | transform: rotate(0deg) translateX(-20px); 104 | background-color: #16A085; 105 | } 106 | 25%, 45% { 107 | -webkit-transform: rotate(-90deg) translateX(0px); 108 | transform: rotate(-90deg) translateX(0px); 109 | background-color: #68C3A3; 110 | } 111 | 50%, 70% { 112 | -webkit-transform: rotate(-180deg) translateX(-20px); 113 | transform: rotate(-180deg) translateX(-20px); 114 | background-color: #A2DED0; 115 | } 116 | 75%, 95% { 117 | -webkit-transform: rotate(-270deg) translateX(0px); 118 | transform: rotate(-270deg) translateX(0px); 119 | background-color: #68C3A3; 120 | } 121 | 100% { 122 | -webkit-transform: rotate(-360deg) translateX(-20px); 123 | transform: rotate(-360deg) translateX(-20px); 124 | background-color: #16A085; 125 | } 126 | } 127 | 128 | @keyframes m12s2anim { 129 | 0%, 20% { 130 | -webkit-transform: rotate(0deg) translateX(-20px); 131 | transform: rotate(0deg) translateX(-20px); 132 | background-color: #16A085; 133 | } 134 | 25%, 45% { 135 | -webkit-transform: rotate(-90deg) translateX(0px); 136 | transform: rotate(-90deg) translateX(0px); 137 | background-color: #68C3A3; 138 | } 139 | 50%, 70% { 140 | -webkit-transform: rotate(-180deg) translateX(-20px); 141 | transform: rotate(-180deg) translateX(-20px); 142 | background-color: #A2DED0; 143 | } 144 | 75%, 95% { 145 | -webkit-transform: rotate(-270deg) translateX(0px); 146 | transform: rotate(-270deg) translateX(0px); 147 | background-color: #68C3A3; 148 | } 149 | 100% { 150 | -webkit-transform: rotate(-360deg) translateX(-20px); 151 | transform: rotate(-360deg) translateX(-20px); 152 | background-color: #16A085; 153 | } 154 | } 155 | -------------------------------------------------------------------------------- /styles/spinners.css: -------------------------------------------------------------------------------- 1 | /****************************************************************************************** 2 | *************** GENERAL STYLES *************** 3 | *******************************************************************************************/ 4 | 5 | * { 6 | margin: 0; 7 | padding: 0; 8 | font-family: "Raleway"; 9 | font-weight: 200; 10 | box-sizing: border-box; 11 | text-align: center; 12 | } 13 | 14 | body, html { min-width: 360px; } 15 | 16 | a { text-decoration: none; } 17 | 18 | section::after { 19 | content:""; 20 | display:block; 21 | clear:both; 22 | } 23 | 24 | .spinContainer { 25 | width: 630px; /* 600px + 5px margin on each side of each spinContainer*/ 26 | overflow: hidden; 27 | margin: 0 auto; 28 | } 29 | 30 | .spinWindow { 31 | background-color: rgba(255,255,255,.95); 32 | height: 200px; 33 | width: 200px; 34 | float: left; 35 | margin: 5px; 36 | display: -webkit-box; 37 | display: -webkit-flex; 38 | display: -ms-flexbox; 39 | display: flex; 40 | -webkit-box-align: center; 41 | -webkit-align-items: center; 42 | -ms-flex-align: center; 43 | align-items: center; 44 | -webkit-box-pack: center; 45 | -webkit-justify-content: center; 46 | -ms-flex-pack: center; 47 | justify-content: center; 48 | position: relative; 49 | overflow: hidden; 50 | } 51 | 52 | .spinWindow:hover, 53 | .spinWindow:focus, 54 | .spinWindow:active { 55 | cursor: pointer; 56 | } 57 | 58 | .sectionTitle { 59 | text-transform: uppercase; 60 | margin-bottom: 50px; 61 | opacity: .75; 62 | } 63 | 64 | .spinName { 65 | position: absolute; 66 | left: 0; 67 | right: 0; 68 | bottom: -40px; 69 | padding: 10px; 70 | font-size: 14px; 71 | font-weight: 400; 72 | color: rgba(255,255,255,.75); 73 | -webkit-transition: all .3s ease-in-out; 74 | transition: all .3s ease-in-out; 75 | } 76 | section.single .spinName { background-color: #61ad87; } 77 | 78 | section.multiple .spinName { background-color: #a25846; } 79 | 80 | .spinWindow:hover .spinName { 81 | -webkit-transform: translateY(-40px); 82 | transform: translateY(-40px); 83 | } 84 | 85 | @media only screen and (max-width: 650px) { 86 | .spinContainer { width: 420px; } 87 | } 88 | 89 | @media only screen and (max-width: 440px) { 90 | .spinContainer { width: 100vw; } 91 | .spinWindow { 92 | width: 90vw; 93 | margin: 1vh 5vw; 94 | } 95 | } 96 | 97 | 98 | /****************************************************************************************** 99 | *************** SECTION HERO *************** 100 | *******************************************************************************************/ 101 | 102 | section.hero { 103 | height: 100vh; 104 | width: 100vw; 105 | background-color: #8E6A5E; 106 | border: 2vw solid white; 107 | display: -webkit-box; 108 | display: -webkit-flex; 109 | display: -ms-flexbox; 110 | display: flex; 111 | -webkit-box-align: center; 112 | -webkit-align-items: center; 113 | -ms-flex-align: center; 114 | align-items: center; 115 | -webkit-box-pack: center; 116 | -webkit-justify-content: center; 117 | -ms-flex-pack: center; 118 | justify-content: center; 119 | -webkit-box-orient: vertical; 120 | -webkit-box-direction: normal; 121 | -webkit-flex-direction: column; 122 | -ms-flex-direction: column; 123 | flex-direction: column; 124 | } 125 | 126 | .logo { height: 25vh; } 127 | 128 | .intro { 129 | width: 600px; 130 | margin: 60px auto; 131 | line-height: 2em; 132 | color: white; 133 | } 134 | 135 | a.button { 136 | border: 1px solid rgba(255,255,255,.5); 137 | padding: 10px 20px; 138 | margin: 0 20px; 139 | border-radius: 2px; 140 | color: white; 141 | font-size: 11px; 142 | text-transform: uppercase; 143 | -webkit-transition: all .25s ease-in-out; 144 | transition: all .25s ease-in-out; 145 | } 146 | 147 | a.button:hover, 148 | a.button:focus, 149 | a.button:active { 150 | background-color: rgba(255,255,255,.8); 151 | color: #8E6A5E; 152 | } 153 | 154 | @media only screen and (max-width: 750px) { 155 | .intro { 156 | width: 80vw; 157 | line-height: 1.6em 158 | } 159 | } 160 | 161 | @media only screen and (max-width: 600px) { 162 | .logo { height: 15vh; } 163 | } 164 | 165 | @media only screen and (max-width: 400px) { 166 | a.button { 167 | display: block; 168 | margin: 10px 0; 169 | } 170 | } 171 | 172 | 173 | /****************************************************************************************** 174 | *************** SECTION SINGLE *************** 175 | *******************************************************************************************/ 176 | 177 | .single { 178 | padding: 100px 0; 179 | background-color: #7FC6A1; 180 | } 181 | 182 | .single .sectionTitle { 183 | color: white; 184 | font-size: 20px; 185 | font-weight: 400; 186 | } 187 | 188 | 189 | /****************************************************************************************** 190 | *************** SECTION MULTIPLE *************** 191 | *******************************************************************************************/ 192 | 193 | .multiple { 194 | padding: 100px 0; 195 | background-color: #c36d58; 196 | } 197 | 198 | .multiple .sectionTitle { 199 | color: white; 200 | font-size: 20px; 201 | font-weight: 400; 202 | } 203 | 204 | 205 | /****************************************************************************************** 206 | *************** SECTION CONTRIBUTE *************** 207 | *******************************************************************************************/ 208 | 209 | .contribute { 210 | width: 100vw; 211 | height: 35vw; 212 | overflow: hidden; 213 | } 214 | 215 | .contributeLeft, .contributeRight { 216 | width: 50vw; 217 | height: 35vw; 218 | background-color: #c9d8d8; 219 | float: left; 220 | display: -webkit-box; 221 | display: -webkit-flex; 222 | display: -ms-flexbox; 223 | display: flex; 224 | -webkit-box-align: center; 225 | -webkit-align-items: center; 226 | -ms-flex-align: center; 227 | align-items: center; 228 | -webkit-box-pack: center; 229 | -webkit-justify-content: center; 230 | -ms-flex-pack: center; 231 | justify-content: center; 232 | -webkit-box-orient: vertical; 233 | -webkit-box-direction: normal; 234 | -webkit-flex-direction: column; 235 | -ms-flex-direction: column; 236 | flex-direction: column; 237 | } 238 | .contributeRight { background-color: #e7efef; } 239 | 240 | .heart { 241 | width: 20vw; 242 | height: auto; 243 | overflow: visible; 244 | } 245 | 246 | .heart .heartShape { 247 | fill: none; 248 | -webkit-transform: scale(.65); 249 | transform: scale(.65); 250 | stroke-width: 15; 251 | stroke-dasharray: 760; 252 | -webkit-animation: heartanim 4s infinite ease-in-out; 253 | animation: heartanim 4s infinite ease-in-out; 254 | -webkit-animation-delay: 2s; 255 | animation-delay: 2s; 256 | } 257 | 258 | @-webkit-keyframes heartanim { 259 | 0%, 40%, 100% { stroke-dashoffset: 0; } 260 | 20% { stroke-dashoffset: 760; } 261 | } 262 | 263 | @keyframes heartanim { 264 | 0%, 40%, 100% { stroke-dashoffset: 0; } 265 | 20% { stroke-dashoffset: 760; } 266 | } 267 | 268 | .contributeQuestion { 269 | font-weight: 400; 270 | text-transform: uppercase; 271 | color: #E26A6A; 272 | margin-bottom: 40px; 273 | } 274 | 275 | .contributeText { 276 | width: 60%; 277 | line-height: 1.6em; 278 | color: #525f5f; 279 | margin-bottom: 40px; 280 | } 281 | 282 | .contribute a.button { 283 | border-color: #E26A6A; 284 | color: #E26A6A; 285 | font-size: 14px; 286 | } 287 | 288 | .contribute a.button:hover, 289 | .contribute a.button:active, 290 | .contribute a.button:focus { 291 | background-color: #E26A6A; 292 | color: #e7efef; 293 | } 294 | 295 | @media only screen and (max-width: 850px) { 296 | .contribute { height: 640px; } 297 | 298 | .contributeLeft, .contributeRight { 299 | width: 100vw; 300 | height: 320px; 301 | } 302 | 303 | .heart { width: 200px; } 304 | } 305 | 306 | @media only screen and (max-width: 406px) { 307 | .contributeQuestion { margin-bottom: 20px; } 308 | 309 | .contributeText { 310 | width: 80%; 311 | line-height: 1.5em; 312 | margin-bottom: 20px; 313 | } 314 | } 315 | 316 | 317 | /****************************************************************************************** 318 | *************** SECTION HOW TO USE *************** 319 | *******************************************************************************************/ 320 | 321 | section.howtouse { 322 | padding: 100px 0; 323 | background-color: #52696D; 324 | } 325 | 326 | .howtouse .sectionTitle { 327 | color: white; 328 | font-size: 20px; 329 | font-weight: 400; 330 | } 331 | 332 | .instructionColumns { 333 | width: 700px; 334 | margin: 0 auto 50px; 335 | overflow: hidden; 336 | color: white; 337 | } 338 | 339 | .col1, .col2, .col3 { 340 | float: left; 341 | width: 28%; 342 | margin: 0 4%; 343 | } 344 | 345 | .col1 { margin-left: 0; } 346 | 347 | .col3 { margin-right: 0; } 348 | 349 | .colTitle { 350 | text-transform: uppercase; 351 | font-size: 14px; 352 | font-weight: 400; 353 | } 354 | 355 | .colimg { 356 | height: 80px; 357 | width: 80px; 358 | text-align: center; 359 | margin: 25px auto; 360 | } 361 | 362 | @media only screen and (max-width: 720px) { 363 | .instructionColumns { width: 100vw; } 364 | 365 | .col1, .col2, .col3 { 366 | width: 100vw; 367 | margin: 25px auto; 368 | padding: 0 20px; 369 | } 370 | 371 | .colimg { 372 | height: 60px; 373 | width: 60px; 374 | margin: 15px auto; 375 | } 376 | } 377 | 378 | .col1_outside, 379 | .col1_middle, 380 | .col1_center, 381 | .brackets, 382 | .dash, 383 | .littleHeart{ 384 | fill: rgba(255,255,255,.25); 385 | } 386 | 387 | .colDesc { 388 | font-size: 14px; 389 | line-height: 1.6em; 390 | } 391 | 392 | .col1_outside { 393 | -webkit-animation: col1outsideanim 8s infinite linear; 394 | animation: col1outsideanim 8s infinite linear; 395 | } 396 | 397 | @-webkit-keyframes col1outsideanim { 398 | 0%, 90%, 100% { opacity: 0; } 399 | 2%, 85% { opacity: 1; } 400 | } 401 | 402 | .col1_middle { 403 | -webkit-animation: col1middleanim 8s infinite linear; 404 | animation: col1middleanim 8s infinite linear; 405 | } 406 | 407 | @-webkit-keyframes col1middleanim { 408 | 0%, 4%, 90%, 100% { opacity: 0; } 409 | 6%, 85% { opacity: 1; } 410 | } 411 | 412 | .col1_center { 413 | -webkit-animation: col1centeranim 8s infinite linear; 414 | animation: col1centeranim 8s infinite linear; 415 | } 416 | 417 | @-webkit-keyframes col1centeranim { 418 | 0%, 8%, 90%, 100% { opacity: 0; } 419 | 10%, 85% { opacity: 1; } 420 | } 421 | 422 | .dash { 423 | -webkit-animation: dashanimation 1.5s infinite steps(1); 424 | animation: dashanimation 1.5s infinite steps(1); 425 | } 426 | 427 | @-webkit-keyframes dashanimation { 428 | 0%, 100% { opacity: 0; } 429 | 50% { opacity: 1; } 430 | } 431 | 432 | @keyframes dashanimation { 433 | 0%, 100% { opacity: 0; } 434 | 50% { opacity: 1; } 435 | } 436 | 437 | .littleHeart { 438 | -webkit-animation: littlHeartAnim 10s infinite linear; 439 | animation: littlHeartAnim 10s infinite linear; 440 | -webkit-transform-origin: center; 441 | transform-origin: center; 442 | } 443 | 444 | @-webkit-keyframes littlHeartAnim { 445 | 0%, 4%, 8%, 100% { 446 | -webkit-transform: scale(1); 447 | transform: scale(1); 448 | } 449 | 450 | 2%, 6% { 451 | -webkit-transform: scale(.8); 452 | transform: scale(.8) 453 | } 454 | } 455 | 456 | @keyframes littlHeartAnim { 457 | 0%, 4%, 8%, 100% { 458 | -webkit-transform: scale(1); 459 | transform: scale(1); 460 | } 461 | 462 | 2%, 6% { 463 | -webkit-transform: scale(.8); 464 | transform: scale(.8) 465 | } 466 | } 467 | 468 | .howtouse a.button:hover, 469 | .howtouse a.button:focus, 470 | .howtouse a.button:active { 471 | color: #52696D; 472 | } 473 | 474 | 475 | /****************************************************************************************** 476 | *************** SECTION SHARE *************** 477 | *******************************************************************************************/ 478 | 479 | section.share { 480 | padding: 100px 0; 481 | background-color: #8E6A5E; 482 | border: 2vw solid white; 483 | } 484 | 485 | section.share h2.sectionTitle { 486 | color: white; 487 | font-size: 20px; 488 | font-weight: 400; 489 | } 490 | 491 | .socialMediaSvg { 492 | height: 75px; 493 | margin: 0 12.5px; 494 | fill: rgba(255,255,255,.25); 495 | -webkit-transition: all .5s ease-in-out; 496 | -webkit-transition: all .25s ease-in-out; 497 | transition: all .25s ease-in-out; 498 | } 499 | 500 | .socialMediaSvg:hover, 501 | .socialMediaSvg:active, 502 | .socialMediaSvg:focus { 503 | fill: rgba(255,255,255,.5); 504 | } 505 | 506 | @media only screen and (max-width: 720px) { 507 | .socialMediaSvg { 508 | height: 60px; 509 | margin: 0 7px; 510 | } 511 | } 512 | 513 | @media only screen and (max-width: 420px) { 514 | .socialMediaSvg { 515 | display: block; 516 | margin: 20px auto 0; 517 | } 518 | } 519 | 520 | 521 | /****************************************************************************************** 522 | *************** SECTION ANATIS *************** 523 | *******************************************************************************************/ 524 | 525 | section.anatis { padding: 0; } 526 | 527 | .anatis { 528 | background-color: #565b5e; 529 | height: 30px; 530 | text-align: center; 531 | } 532 | 533 | .anatis p { 534 | text-transform: uppercase; 535 | font-size: 80%; 536 | color: #dddbd4; 537 | padding-top: 5px; 538 | } 539 | 540 | .anatisHeart { 541 | height: 14px; 542 | margin: 0px 4px; 543 | opacity: .2; 544 | position: relative; 545 | top: 2px; 546 | fill: white; 547 | } 548 | 549 | 550 | /****************************************************************************************** 551 | *************** MODAL WINDOW *************** 552 | *******************************************************************************************/ 553 | 554 | .modal { 555 | position: fixed; 556 | left: 0vw; 557 | right: 0vw; 558 | top: 0vh; 559 | bottom: 0vh; 560 | background-color: rgba(0,0,0,.85); 561 | z-index: 100; 562 | -webkit-transform: translateY(-200vh); 563 | transform: translateY(-200vh); 564 | display: -webkit-box; 565 | display: -webkit-flex; 566 | display: -ms-flexbox; 567 | display: flex; 568 | -webkit-box-align: center; 569 | -webkit-align-items: center; 570 | -ms-flex-align: center; 571 | align-items: center; 572 | -webkit-box-pack: center; 573 | -webkit-justify-content: center; 574 | -ms-flex-pack: center; 575 | justify-content: center; 576 | } 577 | 578 | .modal.active{ 579 | -webkit-transform: translateY(0); 580 | transform: translateY(0); 581 | } 582 | 583 | .insidemodal { 584 | max-height: 75vh; 585 | width: 40vw; 586 | background-color: white; 587 | overflow: scroll; 588 | } 589 | 590 | .insidemodaltitle { padding: 10px; } 591 | 592 | .htmltitle { background-color: #F2784B; } 593 | 594 | .csstitle { background-color: #52B3D9; } 595 | 596 | xmp { 597 | text-align: left; 598 | font-family: "Inconsolata"; 599 | opacity: .5; 600 | padding-bottom: 20px; 601 | font-size: 12px; 602 | } 603 | 604 | @media only screen and (max-width: 900px) { 605 | .insidemodal { 606 | height: 80vh; 607 | width: 80vw; 608 | } 609 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | SPINNERS 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 51 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 72 | 73 | 74 | 75 | 76 | 77 | 78 |
79 | 80 | 81 | 82 |

SPINNERS is a collection of HTML and CSS "loading icon" animations which you can use on your websites, on your apps or on any other place you need to signal your visitors / users that some content is loading.

83 | 84 |
85 | See on GitHub 86 | How to use 87 |
88 | 89 |
90 | 91 | 92 | 93 |
94 | 95 |

Single Element Spinners

96 | 97 |
98 | 99 | 100 | 101 | 102 |
103 |
104 |
105 |
Steps
106 | 107 | 108 | 109 | 110 | 111 | 112 |
113 | 114 |
Turn Circle
115 | 116 | 117 | 118 | 119 | 120 | 121 |
122 |
3 Blips
123 | 124 | 125 | 126 | 127 | 128 | 129 |
130 |
Spining Border
131 | 132 | 133 | 134 | 135 | 136 | 137 |
138 |
Square
139 | 140 | 141 | 142 | 143 | 144 | 145 |
146 |
Single Bleep
147 | 148 | 149 | 150 | 151 | 152 | 153 |
154 |
Square Corners
155 | 156 | 157 | 158 | 159 | 160 | 161 |
162 |
Hollow Circle
163 | 164 | 165 | 166 | 167 | 168 | 169 |
170 |
Knight Rider
171 | 172 | 173 | 174 | 175 | 176 | 177 |
178 |
Circle on Border
179 | 180 | 181 | 182 | 183 | 184 | 185 |
186 |
Blur
187 | 188 | 189 | 190 | 191 | 192 | 193 |
194 |
Round Square
195 | 196 | 197 | 198 | 199 | 200 | 201 |
202 |
Gradient
203 | 204 | 205 | 206 |
207 | 208 |
209 | 210 | 211 | 212 |
213 | 214 |

Multiple Element Spinners

215 | 216 |
217 | 218 | 219 | 220 |
221 |
222 |
223 |
224 |
225 |
3 Balls
226 | 227 | 228 | 229 | 230 | 231 |
232 |
233 |
234 |
235 |
236 |
Rectangles
237 | 238 | 239 | 240 | 241 | 242 |
243 |
244 |
245 |
246 | 247 |
Concentric
248 | 249 | 250 | 251 | 252 | 253 |
254 |
255 |
256 |
257 |
258 |
259 | 260 |
Fliping Stripes
261 | 262 | 263 | 264 | 265 | 266 |
267 |
268 |
269 |
270 |
271 | 272 |
3 Circles
273 | 274 | 275 | 276 | 277 | 278 | 279 |
280 |
281 |
282 |
283 | 284 |
2 Circles
285 | 286 | 287 | 288 | 289 | 290 | 291 |
292 |
293 |
294 |
295 |
296 |
297 |
298 |
299 |
300 |
301 |
302 |
303 |
304 |
305 | 306 |
round and round
307 | 308 | 309 | 310 | 311 | 312 |
313 |
314 |
315 |
316 | 317 |
different speeds
318 | 319 | 320 | 321 | 322 | 323 | 324 |
325 |
326 |
327 |
328 |
329 | 330 |
CYM
331 | 332 | 333 | 334 | 335 | 336 | 337 |
338 |
339 |
340 |
341 |
342 |
343 |
344 |
345 |
346 |
347 |
348 | 349 |
9
350 | 351 | 352 | 353 | 354 | 355 | 356 |
357 |
358 |
359 |
360 |
361 |
362 | 363 |
4x4
364 | 365 | 366 | 367 | 368 | 369 | 370 |
371 |
372 |
373 |
374 | 375 |
2 rotating squares
376 | 377 | 378 | 379 | 380 | 381 | 382 |
383 |
384 |
385 |
386 | 387 |
3D circles
388 | 389 | 390 | 391 | 392 | 393 | 394 |
395 |
396 |
397 |
398 |
399 |
400 |
401 | 402 |
Jumping balls
403 | 404 | 405 | 406 | 407 | 408 | 409 |
410 |
411 |
412 |
413 |
414 |
415 |
416 |
417 |
418 |
419 | 420 |
Sequence balls
421 | 422 | 423 | 424 | 425 | 426 | 427 |
428 |
429 |
430 |
431 | 432 |
turning circles
433 | 434 | 435 | 436 |
437 | 438 |
439 | 440 | 441 | 442 |
443 | 444 |
445 |
446 | 447 | 448 | 449 |
450 |
451 | 452 |
453 | 454 |

Want to participate?

455 |

If you have any ideas for new "spinners", on how to improve the ones already here, or even just to know more about the project...

456 | Find on GitHub 457 |
458 | 459 |
460 | 461 | 462 | 463 |
464 | 465 |

How to use

466 | 467 |
468 | 469 |
470 |

choose

471 |
472 | 473 | 474 | 475 | 476 | 477 | 478 |
479 | 480 |

Click on the Spinner you would like to use.

481 |
482 | 483 |
484 |

copy

485 |
486 | 487 | 488 | 489 | 490 | 491 |
492 | 493 |

Copy the Spinner's HTML and CSS code.

494 |
495 | 496 |
497 |

paste

498 |
499 | 500 | 501 | 502 |
503 |

Paste it into your project and tweek it to your liking

504 |
505 |
506 | 507 | Full instructions 508 | 509 |
510 | 511 | 512 | 513 |
514 | 515 |

Share with your friends

516 | 517 | 518 | 525 | 526 | 527 | 534 | 535 | 536 | 547 | 548 | 549 | 565 | 566 |
567 | 568 | 569 |
570 | 578 |
579 | 580 | 581 | 582 |
583 |
584 |

HTML

585 |
586 |

CSS

587 |
This would be the CSS
588 |
589 |
590 | 591 | 592 | 593 | -------------------------------------------------------------------------------- /styles/spinnerAnimations.css: -------------------------------------------------------------------------------- 1 | /****************************************************************************************** 2 | *************** SINGLE 1 *************** 3 | *******************************************************************************************/ 4 | 5 | .single1ball { 6 | height: 40px; 7 | width: 40px; 8 | border-radius: 50%; 9 | background-color: #EC644B; 10 | -webkit-animation: single1animation 4s infinite linear; 11 | animation: single1animation 4s infinite linear; 12 | } 13 | 14 | @-webkit-keyframes single1animation { 15 | 0%, 9%, 100% { 16 | -webkit-transform: scale(0); 17 | transform: scale(0); 18 | } 19 | 20 | 10%, 19%, 90%, 99% { 21 | -webkit-transform: scale(.2); 22 | transform: scale(.2); 23 | } 24 | 25 | 20%, 29%, 80%, 89% { 26 | -webkit-transform: scale(.4); 27 | transform: scale(.4); 28 | } 29 | 30 | 30%, 39%, 70%, 79% { 31 | -webkit-transform: scale(.6); 32 | transform: scale(.6); 33 | } 34 | 35 | 40%, 49%, 60%, 69% { 36 | -webkit-transform: scale(.8); 37 | transform: scale(.8); 38 | } 39 | 40 | 50%, 59% { 41 | -webkit-transform: scale(1); 42 | transform: scale(1); 43 | } 44 | } 45 | 46 | @keyframes single1animation { 47 | 0%, 9%, 100% { 48 | -webkit-transform: scale(0); 49 | transform: scale(0); 50 | } 51 | 52 | 10%, 19%, 90%, 99% { 53 | -webkit-transform: scale(.2); 54 | transform: scale(.2); 55 | } 56 | 57 | 20%, 29%, 80%, 89% { 58 | -webkit-transform: scale(.4); 59 | transform: scale(.4); 60 | } 61 | 62 | 30%, 39%, 70%, 79% { 63 | -webkit-transform: scale(.6); 64 | transform: scale(.6); 65 | } 66 | 67 | 40%, 49%, 60%, 69% { 68 | -webkit-transform: scale(.8); 69 | transform: scale(.8); 70 | } 71 | 72 | 50%, 59% { 73 | -webkit-transform: scale(1); 74 | transform: scale(1); 75 | } 76 | } 77 | 78 | 79 | /****************************************************************************************** 80 | *************** SINGLE 2 *************** 81 | *******************************************************************************************/ 82 | 83 | .spinningCircle { 84 | height: 40px; 85 | width: 40px; 86 | border-radius: 50%; 87 | border: 4px solid rgba(255,255,255,0); 88 | border-top-color: 4px solid #7fc4d1; 89 | border-right-color: 4px solid #7fc4d1; 90 | -webkit-animation: single2 4s infinite linear; 91 | animation: single2 4s infinite linear; 92 | } 93 | 94 | @-webkit-keyframes single2 { 95 | 0% { 96 | -webkit-transform: rotate(0deg); 97 | transform: rotate(0deg); 98 | border-top-color: #7fc4d1; 99 | border-right-color: #7fc4d1; 100 | } 101 | 102 | 50% { 103 | border-top-color: #1f4f58; 104 | border-right-color: #1f4f58; 105 | } 106 | 107 | 100% { 108 | -webkit-transform: rotate(720deg); 109 | transform: rotate(720deg); 110 | border-top-color: #7fc4d1; 111 | border-right-color: #7fc4d1; 112 | } 113 | } 114 | 115 | @keyframes single2 { 116 | 0% { 117 | -webkit-transform: rotate(0deg); 118 | transform: rotate(0deg); 119 | border-top-color: #7fc4d1; 120 | border-right-color: #7fc4d1; 121 | } 122 | 123 | 50% { 124 | border-top-color: #1f4f58; 125 | border-right-color: #1f4f58; 126 | } 127 | 128 | 100% { 129 | -webkit-transform: rotate(720deg); 130 | transform: rotate(720deg); 131 | border-top-color: #7fc4d1; 132 | border-right-color: #7fc4d1; 133 | } 134 | } 135 | 136 | 137 | /****************************************************************************************** 138 | *************** SINGLE 3 *************** 139 | *******************************************************************************************/ 140 | 141 | .single3 { 142 | height: 30px; 143 | width: 30px; 144 | background-color: #EC644B; 145 | border-radius: 50%; 146 | -webkit-animation: single3 2s infinite ease-in-out; 147 | animation: single3 2s infinite ease-in-out; 148 | } 149 | 150 | @-webkit-keyframes single3 { 151 | 0%, 20%, 40%, 60%, 100% { 152 | -webkit-transform: scale(.2); 153 | transform: scale(.2); 154 | opacity: 0; 155 | } 156 | 157 | 10%, 30%, 50% { 158 | -webkit-transform: scale(1); 159 | transform: scale(1); 160 | opacity: 1; 161 | } 162 | } 163 | 164 | @keyframes single3 { 165 | 0%, 20%, 40%, 60%, 100% { 166 | -webkit-transform: scale(.2); 167 | transform: scale(.2); 168 | opacity: 0; 169 | } 170 | 171 | 10%, 30%, 50% { 172 | -webkit-transform: scale(1); 173 | transform: scale(1); 174 | opacity: 1; 175 | } 176 | } 177 | 178 | 179 | /****************************************************************************************** 180 | *************** SINGLE 4 *************** 181 | *******************************************************************************************/ 182 | 183 | .single4 { 184 | width: 50px; 185 | height: 50px; 186 | border-radius: 50%; 187 | border: 6px solid #EEEEEE; 188 | border-top-color: #BFBFBF; 189 | border-bottom-color: #BFBFBF; 190 | -webkit-animation: single4 2.5s infinite ease-in-out; 191 | animation: single4 2.5s infinite ease-in-out; 192 | } 193 | 194 | @-webkit-keyframes single4 { 195 | 0% { 196 | -webkit-transform: rotate(0deg); 197 | transform: rotate(0deg); 198 | } 199 | 200 | 100% { 201 | -webkit-transform: rotate(540deg); 202 | transform: rotate(540deg); 203 | } 204 | } 205 | 206 | @keyframes single4 { 207 | 0% { 208 | -webkit-transform: rotate(0deg); 209 | transform: rotate(0deg); 210 | } 211 | 212 | 100% { 213 | -webkit-transform: rotate(540deg); 214 | transform: rotate(540deg); 215 | } 216 | } 217 | 218 | 219 | /****************************************************************************************** 220 | *************** SINGLE 5 *************** 221 | *******************************************************************************************/ 222 | 223 | .single5 { 224 | height: 50px; 225 | width: 50px; 226 | background-color: pink; 227 | -webkit-animation: single5 5s infinite linear; 228 | animation: single5 5s infinite linear; 229 | } 230 | 231 | @-webkit-keyframes single5 { 232 | 0% { 233 | -webkit-transform: perspective(180px) rotateX(0deg) rotateY(0deg); 234 | background-color: #F4D03F; 235 | } 236 | 237 | 25% { 238 | -webkit-transform: perspective(180px) rotateX(-180.1deg) rotateY(0deg); 239 | background-color: #52B3D9; 240 | } 241 | 242 | 50% { 243 | -webkit-transform: perspective(180px) rotateX(-180deg) rotateY(179.9deg); 244 | background-color: #EC644B; 245 | } 246 | 247 | 75% { 248 | -webkit-transform: perspective(180px) rotateX(-360deg) rotateY(179.9deg); 249 | background-color: #68C3A3; 250 | } 251 | 252 | 100% { 253 | -webkit-transform: perspective(180px) rotateX(-360deg) rotateY(360deg); 254 | background-color: #F4D03F; 255 | } 256 | } 257 | 258 | @keyframes single5 { 259 | 0% { 260 | transform: perspective(180px) rotateX(0deg) rotateY(0deg); 261 | -webkit-transform: perspective(180px) rotateX(0deg) rotateY(0deg); 262 | background-color: #F4D03F; 263 | } 264 | 265 | 25% { 266 | transform: perspective(180px) rotateX(-180.1deg) rotateY(0deg); 267 | -webkit-transform: perspective(180px) rotateX(-180.1deg) rotateY(0deg); 268 | background-color: #52B3D9; 269 | } 270 | 271 | 50% { 272 | transform: perspective(180px) rotateX(-180deg) rotateY(179.9deg); 273 | -webkit-transform: perspective(180px) rotateX(-180deg) rotateY(179.9deg); 274 | background-color: #EC644B; 275 | } 276 | 277 | 75% { 278 | transform: perspective(180px) rotateX(-180deg) rotateY(179.9deg); 279 | -webkit-transform: perspective(180px) rotateX(-360deg) rotateY(179.9deg); 280 | background-color: #68C3A3; 281 | } 282 | 283 | 100% { 284 | transform: perspective(180px) rotateX(0deg) rotateY(360deg); 285 | -webkit-transform: perspective(180px) rotateX(-360deg) rotateY(360deg); 286 | background-color: #F4D03F; 287 | } 288 | } 289 | 290 | 291 | /****************************************************************************************** 292 | *************** SINGLE 6 *************** 293 | *******************************************************************************************/ 294 | 295 | .single6 { 296 | height: 60px; 297 | width: 60px; 298 | border-radius: 50%; 299 | background-color: #90C695; 300 | -webkit-animation: single6 1s infinite ease-in; 301 | animation: single6 1s infinite ease-in; 302 | } 303 | 304 | @-webkit-keyframes single6 { 305 | 0% { 306 | -webkit-transform: scale(0); 307 | transform: scale(0); 308 | opacity: 1; 309 | } 310 | 311 | 100% { 312 | -webkit-transform: scale(1); 313 | transform: scale(1); 314 | opacity: 0; 315 | } 316 | } 317 | 318 | @keyframes single6 { 319 | 0% { 320 | -webkit-transform: scale(0); 321 | transform: scale(0); 322 | opacity: 1; 323 | } 324 | 325 | 100% { 326 | -webkit-transform: scale(1); 327 | transform: scale(1); 328 | opacity: 0; 329 | } 330 | } 331 | 332 | 333 | /****************************************************************************************** 334 | *************** SINGLE 6 *************** 335 | *******************************************************************************************/ 336 | 337 | .single7 { 338 | height: 12px; 339 | width: 12px; 340 | border-radius: 50%; 341 | -webkit-animation: single7 4s infinite linear; 342 | animation: single7 4s infinite linear; 343 | } 344 | 345 | @-webkit-keyframes single7 { 346 | 0%, 20%, 100% { 347 | -webkit-transform: translate(-15px, 150px); 348 | transform: translate(-15px, -15px); 349 | background-color: #F5D76E; 350 | } 351 | 25%, 45% { 352 | -webkit-transform: translate(15px, -15px); 353 | transform: translate(15px, -15px); 354 | background-color: #4183D7; 355 | } 356 | 50%, 70% { 357 | -webkit-transform: translate(15px, 15px); 358 | transform: translate(15px, 15px); 359 | background-color: #D64541; 360 | } 361 | 75%, 95% { 362 | -webkit-transform: translate(-15px, 15px); 363 | transform: translate(-15px, 15px); 364 | background-color: #26A65B; 365 | } 366 | } 367 | 368 | @keyframes single7 { 369 | 0%, 20%, 100% { 370 | -webkit-transform: translate(-15px, 150px); 371 | transform: translate(-15px, -15px); 372 | background-color: #F5D76E; 373 | } 374 | 25%, 45% { 375 | -webkit-transform: translate(15px, -15px); 376 | transform: translate(15px, -15px); 377 | background-color: #4183D7; 378 | } 379 | 50%, 70% { 380 | -webkit-transform: translate(15px, 15px); 381 | transform: translate(15px, 15px); 382 | background-color: #D64541; 383 | } 384 | 75%, 95% { 385 | -webkit-transform: translate(-15px, 15px); 386 | transform: translate(-15px, 15px); 387 | background-color: #26A65B; 388 | } 389 | } 390 | 391 | 392 | /****************************************************************************************** 393 | *************** SINGLE 8 *************** 394 | *******************************************************************************************/ 395 | 396 | .single8 { 397 | width: 40px; 398 | height: 40px; 399 | border-radius: 50%; 400 | border: 10px solid red; 401 | -webkit-animation: single8 8s infinite linear; 402 | animation: single8 8s infinite linear; 403 | } 404 | 405 | @-webkit-keyframes single8 { 406 | 0%, 100%{ 407 | border: solid 20px #68C3A3; 408 | } 409 | 6.25% { 410 | border: solid 2px #68C3A3; 411 | } 412 | 12.5% { 413 | border: solid 2px #52B3D9; 414 | } 415 | 18.75% { 416 | border: solid 20px #52B3D9; 417 | } 418 | 25% { 419 | border: solid 20px #52B3D9; 420 | } 421 | 31.25% { 422 | border: solid 2px #52B3D9; 423 | } 424 | 37.5% { 425 | border: solid 2px #F4D03F; 426 | } 427 | 43.75% { 428 | border: solid 20px #F4D03F; 429 | } 430 | 50% { 431 | border: solid 20px #F4D03F; 432 | } 433 | 56.25% { 434 | border: solid 2px #F4D03F; 435 | } 436 | 62.5% { 437 | border: solid 2px #D24D57; 438 | } 439 | 68.75% { 440 | border: solid 20px #D24D57; 441 | } 442 | 75% { 443 | border: solid 20px #D24D57; 444 | } 445 | 81.25% { 446 | border: solid 2px #D24D57; 447 | } 448 | 87.5% { 449 | border: solid 2px #68C3A3; 450 | } 451 | 93.75% { 452 | border: solid 20px #68C3A3; 453 | } 454 | } 455 | 456 | @keyframes single8 { 457 | 0%, 100%{ 458 | border: solid 20px #68C3A3; 459 | } 460 | 6.25% { 461 | border: solid 2px #68C3A3; 462 | } 463 | 12.5% { 464 | border: solid 2px #52B3D9; 465 | } 466 | 18.75% { 467 | border: solid 20px #52B3D9; 468 | } 469 | 25% { 470 | border: solid 20px #52B3D9; 471 | } 472 | 31.25% { 473 | border: solid 2px #52B3D9; 474 | } 475 | 37.5% { 476 | border: solid 2px #F4D03F; 477 | } 478 | 43.75% { 479 | border: solid 20px #F4D03F; 480 | } 481 | 50% { 482 | border: solid 20px #F4D03F; 483 | } 484 | 56.25% { 485 | border: solid 2px #F4D03F; 486 | } 487 | 62.5% { 488 | border: solid 2px #D24D57; 489 | } 490 | 68.75% { 491 | border: solid 20px #D24D57; 492 | } 493 | 75% { 494 | border: solid 20px #D24D57; 495 | } 496 | 81.25% { 497 | border: solid 2px #D24D57; 498 | } 499 | 87.5% { 500 | border: solid 2px #68C3A3; 501 | } 502 | 93.75% { 503 | border: solid 20px #68C3A3; 504 | } 505 | } 506 | 507 | /****************************************************************************************** 508 | *************** SINGLE 9 *************** 509 | *******************************************************************************************/ 510 | 511 | .single9 { 512 | height: 6px; 513 | width: 75px; 514 | background-color: #d8d7d7; 515 | position: relative; 516 | } 517 | 518 | .single9:before { 519 | content: ''; 520 | height: 6px; 521 | width: 10px; 522 | position: absolute; 523 | left: 0; 524 | background-color: #EC644B; 525 | -webkit-animation: single9anim 4s infinite ease-in-out; 526 | animation: single9anim 4s infinite ease-in-out; 527 | } 528 | 529 | @-webkit-keyframes single9anim { 530 | 0%, 100% { 531 | -webkit-transform: translateX(0); 532 | transform: translateX(0); 533 | } 534 | 50% { 535 | -webkit-transform: translateX(65px); 536 | transform: translateX(65px); 537 | } 538 | } 539 | 540 | @keyframes single9anim { 541 | 0%, 100% { 542 | -webkit-transform: translateX(0); 543 | transform: translateX(0); 544 | } 545 | 50% { 546 | -webkit-transform: translateX(65px); 547 | transform: translateX(65px); 548 | } 549 | } 550 | 551 | /****************************************************************************************** 552 | *************** SINGLE 10 *************** 553 | *******************************************************************************************/ 554 | 555 | .single10 { 556 | height: 50px; 557 | width: 50px; 558 | border: 8px solid #A2DED0; 559 | border-radius: 50%; 560 | position: relative; 561 | -webkit-animation: single10anim 2s infinite linear; 562 | animation: single10anim 2s infinite linear; 563 | } 564 | 565 | .single10:before { 566 | content: ''; 567 | height: 6px; 568 | width: 6px; 569 | border-radius: 50%; 570 | background-color: #16A085; 571 | position: absolute; 572 | top: -7px; 573 | left: 14px; 574 | } 575 | 576 | @-webkit-keyframes single10anim { 577 | 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 578 | } 579 | 580 | @keyframes single10anim { 581 | 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 582 | } 583 | 584 | /****************************************************************************************** 585 | *************** SINGLE 11 *************** 586 | *******************************************************************************************/ 587 | 588 | .single11 { 589 | height: 50px; 590 | width: 50px; 591 | border-radius: 50%; 592 | background-color: #EC644B; 593 | position: relative; 594 | -webkit-animation: single11anim 2s infinite ease-in-out; 595 | animation: single11anim 2s infinite ease-in-out; 596 | } 597 | 598 | @-webkit-keyframes single11anim { 599 | 0%, 60%, 100% { 600 | -webkit-filter: blur(0); 601 | filter: blur(0); 602 | } 603 | 30% { 604 | -webkit-filter: blur(15px); 605 | filter: blur(15px); 606 | } 607 | } 608 | 609 | @keyframes single11anim { 610 | 0%, 60%, 100% { 611 | -webkit-filter: blur(0); 612 | filter: blur(0); 613 | } 614 | 30% { 615 | -webkit-filter: blur(21px); 616 | filter: blur(15px); 617 | } 618 | } 619 | 620 | /****************************************************************************************** 621 | *************** SINGLE 12 *************** 622 | *******************************************************************************************/ 623 | 624 | .single12 { 625 | height: 50px; 626 | width: 50px; 627 | background-color: pink; 628 | -webkit-animation: single12anim 2s infinite linear, single12colors 10s infinite linear; 629 | animation: single12anim 2s infinite linear, single12colors 10s infinite linear; 630 | } 631 | 632 | @-webkit-keyframes single12anim { 633 | 0%, 40%, 100% { 634 | border-radius: 5%; 635 | -webkit-transform: scale(1); 636 | transform: scale(1); 637 | } 638 | 20% { 639 | border-radius: 50%; 640 | -webkit-transform: scale(.8); 641 | transform: scale(.8); 642 | } 643 | } 644 | 645 | @keyframes single12anim { 646 | 0%, 40%, 100% { 647 | border-radius: 5%; 648 | -webkit-transform: scale(1); 649 | transform: scale(1); 650 | } 651 | 20% { 652 | border-radius: 50%; 653 | -webkit-transform: scale(.8); 654 | transform: scale(.8); 655 | } 656 | } 657 | 658 | @-webkit-keyframes single12colors { 659 | 0%, 88%, 100% { background-color: #D24D57; } 660 | 8%, 20% { background-color: #3498DB; } 661 | 28%, 40% { background-color: #F7CA18; } 662 | 48%, 60% { background-color: #1BBC9B; } 663 | 68%, 80% { background-color: #913D88; } 664 | } 665 | 666 | @keyframes single12colors { 667 | 0%, 88%, 100% { background-color: #D24D57; } 668 | 8%, 20% { background-color: #3498DB; } 669 | 28%, 40% { background-color: #F7CA18; } 670 | 48%, 60% { background-color: #1BBC9B; } 671 | 68%, 80% { background-color: #913D88; } 672 | } 673 | 674 | /****************************************************************************************** 675 | *************** SINGLE 13 *************** 676 | *******************************************************************************************/ 677 | 678 | .single13 { 679 | height: 10px; 680 | width: 120px; 681 | border-radius: 4px; 682 | background: -webkit-linear-gradient(right, #ef4836, #f5d76e, #ef4836); 683 | background: linear-gradient(270deg, #ef4836, #f5d76e, #ef4836); 684 | background-size: 400% 400%; 685 | -webkit-animation: single13anim 3s ease-in-out infinite; 686 | animation: single13anim 3s ease-in-out infinite; 687 | } 688 | @-webkit-keyframes single13anim { 689 | 0%{background-position: 0% 50%} 690 | 50%{background-position: 100% 50%} 691 | 100%{background-position: 0% 50%} 692 | } 693 | @keyframes single13anim { 694 | 0%{background-position: 0% 50%} 695 | 50%{background-position: 100% 50%} 696 | 100%{background-position: 0% 50%} 697 | } 698 | 699 | 700 | /****************************************************************************************** 701 | *************** MULTIPLE 1 *************** 702 | *******************************************************************************************/ 703 | 704 | .ball1, .ball2, .ball3 { 705 | height: 10px; 706 | width: 10px; 707 | border-radius: 50%; 708 | float: left; 709 | margin: 0 3px; 710 | } 711 | 712 | .ball1 { 713 | background-color: #62abc1; 714 | -webkit-animation: single1ball1anim 2s infinite linear; 715 | animation: single1ball1anim 2s infinite linear; 716 | } 717 | 718 | @-webkit-keyframes single1ball1anim { 719 | 0% { 720 | -webkit-transform: scale(1); 721 | transform: scale(1); 722 | } 723 | 724 | 12.5% { 725 | -webkit-transform: scale(1.2); 726 | transform: scale(1.5); 727 | } 728 | 729 | 25%, 100% { 730 | -webkit-transform: scale(1); 731 | transform: scale(1) 732 | } 733 | } 734 | 735 | @keyframes single1ball1anim { 736 | 0% { 737 | -webkit-transform: scale(1); 738 | transform: scale(1); 739 | } 740 | 741 | 12.5% { 742 | -webkit-transform: scale(1.2); 743 | transform: scale(1.5); 744 | } 745 | 746 | 25%, 100% { 747 | -webkit-transform: scale(1); 748 | transform: scale(1) 749 | } 750 | } 751 | 752 | .ball2 { 753 | background-color: #468295; 754 | -webkit-animation: single1ball2anim 2s infinite linear; 755 | animation: single1ball2anim 2s infinite linear; 756 | } 757 | 758 | @-webkit-keyframes single1ball2anim { 759 | 0%, 25% { 760 | -webkit-transform: scale(1); 761 | transform: scale(1); 762 | } 763 | 764 | 37.5% { 765 | -webkit-transform: scale(1.2); 766 | transform: scale(1.5) 767 | } 768 | 769 | 50%, 100% { 770 | -webkit-transform: scale(1); 771 | transform: scale(1); 772 | } 773 | } 774 | 775 | @keyframes single1ball2anim { 776 | 0%, 25% { 777 | -webkit-transform: scale(1); 778 | transform: scale(1); 779 | } 780 | 781 | 37.5% { 782 | -webkit-transform: scale(1.2); 783 | transform: scale(1.5) 784 | } 785 | 786 | 50%, 100% { 787 | -webkit-transform: scale(1); 788 | transform: scale(1); 789 | } 790 | } 791 | 792 | .ball3 { 793 | background-color: #34616f; 794 | -webkit-animation: single1ball3anim 2s infinite linear; 795 | animation: single1ball3anim 2s infinite linear; 796 | } 797 | 798 | @-webkit-keyframes single1ball3anim { 799 | 0%, 50% { 800 | -webkit-transform: scale(1); 801 | transform: scale(1); 802 | } 803 | 804 | 62.5% { 805 | -webkit-transform: scale(1.2); 806 | transform: scale(1.5) 807 | } 808 | 809 | 75%, 100% { 810 | -webkit-transform: scale(1); 811 | transform: scale(1); 812 | } 813 | } 814 | 815 | @keyframes single1ball3anim { 816 | 0%, 50% { 817 | -webkit-transform: scale(1); 818 | transform: scale(1); 819 | } 820 | 821 | 62.5% { 822 | -webkit-transform: scale(1.2); 823 | transform: scale(1.5) 824 | } 825 | 826 | 75%, 100% { 827 | -webkit-transform: scale(1); 828 | transform: scale(1); 829 | } 830 | } 831 | 832 | 833 | /****************************************************************************************** 834 | *************** MULTIPLE 2 *************** 835 | *******************************************************************************************/ 836 | 837 | .mult2rect { 838 | height: 30px; 839 | width: 7px; 840 | margin: 0 2px; 841 | } 842 | 843 | .mult2rect1 { 844 | background-color: #F5D76E; 845 | -webkit-animation: mult2rect1 3s infinite linear; 846 | animation: mult2rect1 3s infinite linear; 847 | } 848 | 849 | @-webkit-keyframes mult2rect1 { 850 | 0%, 10%, 70%, 80%, 100% { 851 | -webkit-transform: scaleY(1); 852 | transform: scaleY(1); 853 | } 854 | 855 | 5%, 75% { 856 | -webkit-transform: scaleY(2); 857 | transform: scaleY(2); 858 | } 859 | } 860 | 861 | @keyframes mult2rect1 { 862 | 0%, 10%, 70%, 80%, 100% { 863 | -webkit-transform: scaleY(1); 864 | transform: scaleY(1); 865 | } 866 | 867 | 5%, 75% { 868 | -webkit-transform: scaleY(2); 869 | transform: scaleY(2); 870 | } 871 | } 872 | 873 | .mult2rect2 { 874 | background-color: #F4D03F; 875 | -webkit-animation: mult2rect2 3s infinite linear; 876 | animation: mult2rect2 3s infinite linear; 877 | } 878 | 879 | @-webkit-keyframes mult2rect2 { 880 | 0%, 5%, 15%, 65%, 75%, 100% { 881 | -webkit-transform: scaleY(1); 882 | transform: scaleY(1); 883 | } 884 | 885 | 10%, 70% { 886 | -webkit-transform: scaleY(2); 887 | transform: scaleY(2); 888 | } 889 | } 890 | 891 | @keyframes mult2rect2 { 892 | 0%, 5%, 15%, 65%, 75%, 100% { 893 | -webkit-transform: scaleY(1); 894 | transform: scaleY(1); 895 | } 896 | 897 | 10%, 70% { 898 | -webkit-transform: scaleY(2); 899 | transform: scaleY(2); 900 | } 901 | } 902 | 903 | .mult2rect3 { 904 | background-color: #EB9532; 905 | -webkit-animation: mult2rect3 3s infinite linear; 906 | animation: mult2rect3 3s infinite linear; 907 | } 908 | 909 | @-webkit-keyframes mult2rect3 { 910 | 0%, 10%, 20%, 60%, 70%, 100% { 911 | -webkit-transform: scaleY(1); 912 | transform: scaleY(1); 913 | } 914 | 915 | 15%, 65% { 916 | -webkit-transform: scaleY(2); 917 | transform: scaleY(2); 918 | } 919 | } 920 | 921 | @keyframes mult2rect3 { 922 | 0%, 10%, 20%, 60%, 70%, 100% { 923 | -webkit-transform: scaleY(1); 924 | transform: scaleY(1); 925 | } 926 | 927 | 15%, 65% { 928 | -webkit-transform: scaleY(2); 929 | transform: scaleY(2); 930 | } 931 | } 932 | 933 | .mult2rect4 { 934 | background-color: #EC644B; 935 | -webkit-animation: mult2rect4 3s infinite linear; 936 | animation: mult2rect4 3s infinite linear; 937 | } 938 | 939 | @-webkit-keyframes mult2rect4 { 940 | 0%, 15%, 25%, 55%, 65%, 100% { 941 | -webkit-transform: scaleY(1); 942 | transform: scaleY(1); 943 | } 944 | 945 | 20%, 60% { 946 | -webkit-transform: scaleY(2); 947 | transform: scaleY(2); 948 | } 949 | } 950 | 951 | @keyframes mult2rect4 { 952 | 0%, 15%, 25%, 55%, 65%, 100% { 953 | -webkit-transform: scaleY(1); 954 | transform: scaleY(1); 955 | } 956 | 957 | 20%, 60% { 958 | -webkit-transform: scaleY(2); 959 | transform: scaleY(2); 960 | } 961 | } 962 | 963 | .mult2rect5 { 964 | background-color: #C0392B; 965 | -webkit-animation: mult2rect5 3s infinite linear; 966 | animation: mult2rect5 3s infinite linear; 967 | } 968 | 969 | @-webkit-keyframes mult2rect5 { 970 | 0%, 20%, 30%, 50%, 60%, 100% { 971 | -webkit-transform: scaleY(1); 972 | transform: scaleY(1); 973 | } 974 | 975 | 25%, 55% { 976 | -webkit-transform: scaleY(2); 977 | transform: scaleY(2); 978 | } 979 | } 980 | 981 | @keyframes mult2rect5 { 982 | 0%, 20%, 30%, 50%, 60%, 100% { 983 | -webkit-transform: scaleY(1); 984 | transform: scaleY(1); 985 | } 986 | 987 | 25%, 55% { 988 | -webkit-transform: scaleY(2); 989 | transform: scaleY(2); 990 | } 991 | } 992 | 993 | 994 | /****************************************************************************************** 995 | *************** MULTIPLE 3 *************** 996 | *******************************************************************************************/ 997 | 998 | .mult3 { 999 | height: 40px; 1000 | width: 40px; 1001 | position: relative; 1002 | } 1003 | 1004 | .mult3circle1, .mult3circle2 { 1005 | height: 40px; 1006 | width: 40px; 1007 | border-radius: 50%; 1008 | position: absolute; 1009 | top: 0; 1010 | left: 0; 1011 | bottom: 0; 1012 | right: 0; 1013 | } 1014 | 1015 | .mult3circle1 { 1016 | background-color: #66CC99; 1017 | -webkit-animation: mult3circle1anim 4s infinite steps(1); 1018 | animation: mult3circle1anim 4s infinite steps(1); 1019 | } 1020 | 1021 | @-webkit-keyframes mult3circle1anim { 1022 | 0%, 75%, 100% { 1023 | -webkit-transform: scale(1); 1024 | transform: scale(1); 1025 | } 1026 | 1027 | 50% { 1028 | -webkit-transform: scale(1.4); 1029 | transform: scale(1.4); 1030 | } 1031 | } 1032 | 1033 | @keyframes mult3circle1anim { 1034 | 0%, 75%, 100% { 1035 | -webkit-transform: scale(1); 1036 | transform: scale(1); 1037 | } 1038 | 1039 | 50% { 1040 | -webkit-transform: scale(1.4); 1041 | transform: scale(1.4); 1042 | } 1043 | } 1044 | 1045 | .mult3circle2 { 1046 | background-color: #438866; 1047 | -webkit-animation: mult3circle2anim 4s infinite steps(1); 1048 | animation: mult3circle2anim 4s infinite steps(1); 1049 | } 1050 | 1051 | @-webkit-keyframes mult3circle2anim { 1052 | 0%, 100% { 1053 | -webkit-transform: scale(.65); 1054 | transform: scale(.65); 1055 | } 1056 | 1057 | 25% { 1058 | -webkit-transform: scale(1); 1059 | transform: scale(1); 1060 | } 1061 | } 1062 | 1063 | @keyframes mult3circle2anim { 1064 | 0%, 100% { 1065 | -webkit-transform: scale(.65); 1066 | transform: scale(.65); 1067 | } 1068 | 1069 | 25% { 1070 | -webkit-transform: scale(1); 1071 | transform: scale(1); 1072 | } 1073 | } 1074 | 1075 | 1076 | /****************************************************************************************** 1077 | *************** MULTIPLE 4 *************** 1078 | *******************************************************************************************/ 1079 | 1080 | .mul4 { 1081 | height: 40px; 1082 | width: 40px; 1083 | background-color: pink; 1084 | } 1085 | .mul4stripe { 1086 | height: 10px; 1087 | width: 40px; 1088 | } 1089 | .mul4stripe1 { 1090 | -webkit-animation: mul4stripe1 3s infinite ease-in-out; 1091 | animation: mul4stripe1 3s infinite ease-in-out; 1092 | } 1093 | 1094 | @-webkit-keyframes mul4stripe1{ 1095 | 0%, 60%, 100% { 1096 | background-color: indianred; 1097 | } 1098 | 10%, 50% { 1099 | background-color: skyblue; 1100 | } 1101 | } 1102 | 1103 | @keyframes mul4stripe1{ 1104 | 0%, 60%, 100% { 1105 | background-color: indianred; 1106 | } 1107 | 10%, 50% { 1108 | background-color: skyblue; 1109 | } 1110 | } 1111 | 1112 | .mul4stripe2 { 1113 | -webkit-animation: mul4stripe2 3s infinite ease-in-out; 1114 | animation: mul4stripe2 3s infinite ease-in-out; 1115 | } 1116 | 1117 | @-webkit-keyframes mul4stripe2{ 1118 | 0%, 10%, 70%, 100% { 1119 | background-color: indianred; 1120 | } 1121 | 20%, 60% { 1122 | background-color: skyblue; 1123 | } 1124 | } 1125 | 1126 | @keyframes mul4stripe2{ 1127 | 0%, 10%, 70%, 100% { 1128 | background-color: indianred; 1129 | } 1130 | 20%, 60% { 1131 | background-color: skyblue; 1132 | } 1133 | } 1134 | 1135 | .mul4stripe3 { 1136 | -webkit-animation: mul4stripe3 3s infinite ease-in-out; 1137 | animation: mul4stripe3 3s infinite ease-in-out; 1138 | } 1139 | 1140 | @-webkit-keyframes mul4stripe3{ 1141 | 0%, 20%, 80%, 100% { 1142 | background-color: indianred; 1143 | } 1144 | 30%, 70% { 1145 | background-color: skyblue; 1146 | } 1147 | } 1148 | 1149 | @keyframes mul4stripe3{ 1150 | 0%, 20%, 80%, 100% { 1151 | background-color: indianred; 1152 | } 1153 | 30%, 70% { 1154 | background-color: skyblue; 1155 | } 1156 | } 1157 | 1158 | .mul4stripe4 { 1159 | -webkit-animation: mul4stripe4 3s infinite ease-in-out; 1160 | animation: mul4stripe4 3s infinite ease-in-out; 1161 | } 1162 | 1163 | @-webkit-keyframes mul4stripe4{ 1164 | 0%, 30%, 90%, 100% { 1165 | background-color: indianred; 1166 | } 1167 | 40%, 80% { 1168 | background-color: skyblue; 1169 | } 1170 | } 1171 | 1172 | @keyframes mul4stripe4{ 1173 | 0%, 30%, 90%, 100% { 1174 | background-color: indianred; 1175 | } 1176 | 40%, 80% { 1177 | background-color: skyblue; 1178 | } 1179 | } 1180 | 1181 | 1182 | /****************************************************************************************** 1183 | *************** MULTIPLE 5 *************** 1184 | *******************************************************************************************/ 1185 | 1186 | .mul5 { 1187 | height: 50px; 1188 | width: 50px; 1189 | position: relative; 1190 | } 1191 | 1192 | .mul5circle1 { 1193 | height: 50px; 1194 | width: 50px; 1195 | position: absolute; 1196 | border-radius: 50%; 1197 | border: 6px solid #96281B; 1198 | border-bottom-color: rgba(0,0,0,0); 1199 | -webkit-animation: mul5circle1anim 3s infinite linear; 1200 | animation: mul5circle1anim 3s infinite linear; 1201 | } 1202 | 1203 | @-webkit-keyframes mul5circle1anim { 1204 | 0% { 1205 | -webkit-transform: rotate(0deg); 1206 | transform: rotate(0deg); 1207 | } 1208 | 100% { 1209 | -webkit-transform: rotate(360deg); 1210 | transform: rotate(360deg); 1211 | } 1212 | } 1213 | 1214 | @keyframes mul5circle1anim { 1215 | 0% { 1216 | -webkit-transform: rotate(0deg); 1217 | transform: rotate(0deg); 1218 | } 1219 | 100% { 1220 | -webkit-transform: rotate(360deg); 1221 | transform: rotate(360deg); 1222 | } 1223 | } 1224 | 1225 | .mul5circle2 { 1226 | height: 34px; 1227 | width: 34px; 1228 | position: absolute; 1229 | border-radius: 50%; 1230 | border: 6px solid #C0392B; 1231 | border-left-color: rgba(0,0,0,0); 1232 | -webkit-animation: mul5circle2anim 4s infinite linear; 1233 | animation: mul5circle2anim 4s infinite linear; 1234 | } 1235 | 1236 | @-webkit-keyframes mul5circle2anim { 1237 | 0% { 1238 | -webkit-transform: translate(8px, 8px) rotate(0deg); 1239 | transform: translate(8px, 8px) rotate(0deg); 1240 | } 1241 | 100% { 1242 | -webkit-transform: translate(8px, 8px) rotate(-360deg); 1243 | transform: translate(8px, 8px) rotate(-360deg); 1244 | } 1245 | } 1246 | 1247 | @keyframes mul5circle2anim { 1248 | 0% { 1249 | -webkit-transform: translate(8px, 8px) rotate(0deg); 1250 | transform: translate(8px, 8px) rotate(0deg); 1251 | } 1252 | 100% { 1253 | -webkit-transform: translate(8px, 8px) rotate(-360deg); 1254 | transform: translate(8px, 8px) rotate(-360deg); 1255 | } 1256 | } 1257 | 1258 | .mul5circle3 { 1259 | height: 18px; 1260 | width: 18px; 1261 | position: absolute; 1262 | border-radius: 50%; 1263 | border: 6px solid #E74C3C; 1264 | border-right-color: rgba(0,0,0,0); 1265 | -webkit-animation: mul5circle3anim 5s infinite linear; 1266 | animation: mul5circle3anim 5s infinite linear; 1267 | } 1268 | 1269 | @-webkit-keyframes mul5circle3anim { 1270 | 0% { 1271 | -webkit-transform: translate(16px, 16px) rotate(0deg); 1272 | transform: translate(16px, 16px) rotate(0deg); 1273 | } 1274 | 100% { 1275 | -webkit-transform: translate(16px, 16px) rotate(360deg); 1276 | transform: translate(16px, 16px) rotate(360deg); 1277 | } 1278 | } 1279 | 1280 | @keyframes mul5circle3anim { 1281 | 0% { 1282 | -webkit-transform: translate(16px, 16px) rotate(0deg); 1283 | transform: translate(16px, 16px) rotate(0deg); 1284 | } 1285 | 100% { 1286 | -webkit-transform: translate(16px, 16px) rotate(360deg); 1287 | transform: translate(16px, 16px) rotate(360deg); 1288 | } 1289 | } 1290 | 1291 | 1292 | /****************************************************************************************** 1293 | *************** MULTIPLE 6 *************** 1294 | *******************************************************************************************/ 1295 | 1296 | .mul6 { 1297 | height: 30px; 1298 | width: 30px; 1299 | position: relative; 1300 | } 1301 | 1302 | .mul6_1 { 1303 | height: 12px; 1304 | width: 12px; 1305 | border-radius: 50%; 1306 | position: absolute; 1307 | -webkit-animation: mul6_1anim 4s infinite linear; 1308 | animation: mul6_1anim 4s infinite linear; 1309 | } 1310 | 1311 | .mul6_2 { 1312 | height: 12px; 1313 | width: 12px; 1314 | border-radius: 50%; 1315 | position: absolute; 1316 | -webkit-animation: mul6_2anim 4s infinite linear; 1317 | animation: mul6_2anim 4s infinite linear; 1318 | } 1319 | 1320 | @-webkit-keyframes mul6_1anim { 1321 | 0%, 20%, 100% { 1322 | -webkit-transform: translate(-6px, -6px); 1323 | transform: translate(-6px, -6px); 1324 | background-color: #F5D76E; 1325 | } 1326 | 25%, 45% { 1327 | -webkit-transform: translate(24px, -6px); 1328 | transform: translate(24px, -6px); 1329 | background-color: #4183D7; 1330 | } 1331 | 50%, 70% { 1332 | -webkit-transform: translate(24px, 24px); 1333 | transform: translate(24px, 24px); 1334 | background-color: #D64541; 1335 | } 1336 | 75%, 95% { 1337 | -webkit-transform: translate(-6px, 24px); 1338 | transform: translate(-6px, 24px); 1339 | background-color: #26A65B; 1340 | } 1341 | } 1342 | 1343 | @keyframes mul6_1anim { 1344 | 0%, 20%, 100% { 1345 | -webkit-transform: translate(-6px, -6px); 1346 | transform: translate(-6px, -6px); 1347 | background-color: #F5D76E; 1348 | } 1349 | 25%, 45% { 1350 | -webkit-transform: translate(24px, -6px); 1351 | transform: translate(24px, -6px); 1352 | background-color: #4183D7; 1353 | } 1354 | 50%, 70% { 1355 | -webkit-transform: translate(24px, 24px); 1356 | transform: translate(24px, 24px); 1357 | background-color: #D64541; 1358 | } 1359 | 75%, 95% { 1360 | -webkit-transform: translate(-6px, 24px); 1361 | transform: translate(-6px, 24px); 1362 | background-color: #26A65B; 1363 | } 1364 | } 1365 | 1366 | @-webkit-keyframes mul6_2anim { 1367 | 0%, 20%, 100% { 1368 | -webkit-transform: translate(24px, 24px); 1369 | transform: translate(24px, 24px); 1370 | background-color: #D64541; 1371 | } 1372 | 25%, 45% { 1373 | -webkit-transform: translate(-6px, 24px); 1374 | transform: translate(-6px, 24px); 1375 | background-color: #26A65B; 1376 | } 1377 | 50%, 70% { 1378 | -webkit-transform: translate(-6px, -6px); 1379 | transform: translate(-6px, -6px); 1380 | background-color: #F5D76E; 1381 | } 1382 | 75%, 95% { 1383 | -webkit-transform: translate(24px, -6px); 1384 | transform: translate(24px, -6px); 1385 | background-color: #4183D7; 1386 | } 1387 | } 1388 | 1389 | @keyframes mul6_2anim { 1390 | 0%, 20%, 100% { 1391 | -webkit-transform: translate(24px, 24px); 1392 | transform: translate(24px, 24px); 1393 | background-color: #D64541; 1394 | } 1395 | 25%, 45% { 1396 | -webkit-transform: translate(-6px, 24px); 1397 | transform: translate(-6px, 24px); 1398 | background-color: #26A65B; 1399 | } 1400 | 50%, 70% { 1401 | -webkit-transform: translate(-6px, -6px); 1402 | transform: translate(-6px, -6px); 1403 | background-color: #F5D76E; 1404 | } 1405 | 75%, 95% { 1406 | -webkit-transform: translate(24px, -6px); 1407 | transform: translate(24px, -6px); 1408 | background-color: #4183D7; 1409 | } 1410 | } 1411 | 1412 | /****************************************************************************************** 1413 | *************** MULTIPLE 7 *************** 1414 | *******************************************************************************************/ 1415 | 1416 | .mul7 { 1417 | height: 70px; 1418 | width: 70px; 1419 | position: relative; 1420 | } 1421 | 1422 | .mul7circ { 1423 | width: 70px; 1424 | height: 70px; 1425 | position: absolute; 1426 | } 1427 | 1428 | .mul7circ:before { 1429 | content: ''; 1430 | display: block; 1431 | margin: 0 auto; 1432 | width: 10px; 1433 | height: 10px; 1434 | background-color: #333; 1435 | border-radius: 100%; 1436 | -webkit-animation: multiple7Animation 1.2s infinite ease-in-out both; 1437 | animation: multiple7Animation 1.2s infinite ease-in-out both; 1438 | } 1439 | 1440 | /* Circle Colors */ 1441 | .m7c12:before { 1442 | background-color: #F5D76E; 1443 | } 1444 | .m7c1:before, .m7c11:before { 1445 | background-color: #f8ba72; 1446 | } 1447 | .m7c2:before, .m7c10:before { 1448 | background-color: #EB9532; 1449 | } 1450 | .m7c3:before, .m7c9:before { 1451 | background-color: #F27935; 1452 | } 1453 | .m7c4:before, .m7c8:before { 1454 | background-color: #EC644B; 1455 | } 1456 | .m7c5:before, .m7c7:before { 1457 | background-color: #EF4836; 1458 | } 1459 | .m7c6:before { 1460 | background-color: #C0392B; 1461 | } 1462 | 1463 | /* Rotate circles */ 1464 | .m7c1 { 1465 | -webkit-transform: rotate(30deg); 1466 | transform: rotate(30deg); 1467 | } 1468 | .m7c2 { 1469 | -webkit-transform: rotate(60deg); 1470 | transform: rotate(60deg); 1471 | } 1472 | .m7c3 { 1473 | -webkit-transform: rotate(90deg); 1474 | transform: rotate(90deg); 1475 | } 1476 | .m7c4 { 1477 | -webkit-transform: rotate(120deg); 1478 | transform: rotate(120deg); 1479 | } 1480 | .m7c5 { 1481 | -webkit-transform: rotate(150deg); 1482 | transform: rotate(150deg); 1483 | } 1484 | .m7c6 { 1485 | -webkit-transform: rotate(180deg); 1486 | transform: rotate(180deg); 1487 | } 1488 | .m7c7 { 1489 | -webkit-transform: rotate(210deg); 1490 | transform: rotate(210deg); 1491 | } 1492 | .m7c8 { 1493 | -webkit-transform: rotate(240deg); 1494 | transform: rotate(240deg); 1495 | } 1496 | .m7c9 { 1497 | -webkit-transform: rotate(270deg); 1498 | transform: rotate(270deg); 1499 | } 1500 | .m7c10 { 1501 | -webkit-transform: rotate(300deg); 1502 | transform: rotate(300deg); 1503 | } 1504 | .m7c11 { 1505 | -webkit-transform: rotate(330deg); 1506 | transform: rotate(330deg); 1507 | } 1508 | 1509 | 1510 | /* Delay the Animation */ 1511 | .m7c2:before { 1512 | -webkit-animation-delay: -1.1s; 1513 | animation-delay: -1.1s; 1514 | } 1515 | 1516 | .m7c3:before { 1517 | -webkit-animation-delay: -1s; 1518 | animation-delay: -1s; 1519 | } 1520 | 1521 | .m7c4:before { 1522 | -webkit-animation-delay: -0.9s; 1523 | animation-delay: -0.9s; 1524 | } 1525 | 1526 | .m7c5:before { 1527 | -webkit-animation-delay: -0.8s; 1528 | animation-delay: -0.8s; 1529 | } 1530 | 1531 | .m7c6:before { 1532 | -webkit-animation-delay: -0.7s; 1533 | animation-delay: -0.7s; 1534 | } 1535 | 1536 | .m7c7:before { 1537 | -webkit-animation-delay: -0.6s; 1538 | animation-delay: -0.6s; 1539 | } 1540 | 1541 | .m7c8:before { 1542 | -webkit-animation-delay: -0.5s; 1543 | animation-delay: -0.5s; 1544 | } 1545 | 1546 | .m7c9:before { 1547 | -webkit-animation-delay: -0.4s; 1548 | animation-delay: -0.4s; 1549 | } 1550 | 1551 | .m7c10:before { 1552 | -webkit-animation-delay: -0.3s; 1553 | animation-delay: -0.3s; 1554 | } 1555 | 1556 | .m7c11:before { 1557 | -webkit-animation-delay: -0.2s; 1558 | animation-delay: -0.2s; 1559 | } 1560 | 1561 | .m7c12:before { 1562 | -webkit-animation-delay: -0.1s; 1563 | animation-delay: -0.1s; 1564 | } 1565 | 1566 | /* Circles Animation */ 1567 | 1568 | @-webkit-keyframes multiple7Animation { 1569 | 0%, 80%, 100% { 1570 | -webkit-transform: scale(0); 1571 | transform: scale(0); 1572 | opacity: 0; 1573 | } 40% { 1574 | -webkit-transform: scale(1); 1575 | transform: scale(1); 1576 | opacity: 1; 1577 | } 1578 | } 1579 | 1580 | @keyframes multiple7Animation { 1581 | 0%, 80%, 100% { 1582 | -webkit-transform: scale(0); 1583 | transform: scale(0); 1584 | opacity: 0; 1585 | } 40% { 1586 | -webkit-transform: scale(1); 1587 | transform: scale(1); 1588 | opacity: 1; 1589 | } 1590 | } 1591 | 1592 | 1593 | /****************************************************************************************** 1594 | *************** MULTIPLE 8 *************** 1595 | *******************************************************************************************/ 1596 | 1597 | .mul8 { 1598 | height: 50px; 1599 | width: 50px; 1600 | } 1601 | 1602 | .mul8circ1 { 1603 | height: 50px; 1604 | width: 50px; 1605 | border-radius: 50%; 1606 | border: 5px solid #76cbad; 1607 | border-bottom-color: rgba(0,0,0,0); 1608 | border-top-color: rgba(0,0,0,0); 1609 | -webkit-animation: mul8circ1Anim 2s infinite linear; 1610 | animation: mul8circ1Anim 2s infinite linear; 1611 | position: absolute; 1612 | } 1613 | 1614 | .mul8circ2 { 1615 | height: 50px; 1616 | width: 50px; 1617 | border-radius: 50%; 1618 | border: 5px solid #127961; 1619 | border-bottom-color: rgba(0,0,0,0); 1620 | border-top-color: rgba(0,0,0,0); 1621 | -webkit-animation: mul8circ2Anim 2.5s infinite linear; 1622 | animation: mul8circ2Anim 2.5s infinite linear; 1623 | position: absolute; 1624 | } 1625 | 1626 | @-webkit-keyframes mul8circ1Anim { 1627 | 0% { 1628 | -webkit-transform: rotate(0deg); 1629 | transform: rotate(0deg); 1630 | } 1631 | 100% { 1632 | -webkit-transform: rotate(360deg); 1633 | transform: rotate(360deg); 1634 | } 1635 | } 1636 | 1637 | @keyframes mul8circ1Anim { 1638 | 0% { 1639 | -webkit-transform: rotate(0deg); 1640 | transform: rotate(0deg); 1641 | } 1642 | 100% { 1643 | -webkit-transform: rotate(360deg); 1644 | transform: rotate(360deg); 1645 | } 1646 | } 1647 | 1648 | @-webkit-keyframes mul8circ2Anim { 1649 | 0% { 1650 | -webkit-transform: rotate(0deg); 1651 | transform: rotate(0deg); 1652 | } 1653 | 100% { 1654 | -webkit-transform: rotate(360deg); 1655 | transform: rotate(360deg); 1656 | } 1657 | } 1658 | 1659 | @keyframes mul8circ2Anim { 1660 | 0% { 1661 | -webkit-transform: rotate(0deg); 1662 | transform: rotate(0deg); 1663 | } 1664 | 100% { 1665 | -webkit-transform: rotate(360deg); 1666 | transform: rotate(360deg); 1667 | } 1668 | } 1669 | 1670 | 1671 | /****************************************************************************************** 1672 | *************** MULTIPLE 9 *************** 1673 | *******************************************************************************************/ 1674 | 1675 | /****************************** 1676 | * * 1677 | * BROWSER COMPATIBILITY * 1678 | * * 1679 | * Chrome: 41+ * 1680 | * Safari: 7.1+ * 1681 | * Firefox: 35+ * 1682 | * Opera: none * 1683 | * IE: none * 1684 | * Android: none * 1685 | * iOS: 8.1+ * 1686 | * * 1687 | ******************************/ 1688 | 1689 | .mul9 { 1690 | height: 50px; 1691 | width: 50px; 1692 | position: relative; 1693 | } 1694 | 1695 | .mul9circ1, 1696 | .mul9circ2, 1697 | .mul9circ3 { 1698 | height: 50px; 1699 | width: 50px; 1700 | border-radius: 50%; 1701 | position: absolute; 1702 | mix-blend-mode: multiply; 1703 | } 1704 | 1705 | .mul9circ1 { 1706 | background-color: #FF00FF; 1707 | -webkit-transform: translate(0, 10px); 1708 | transform: translate(0, 10px); 1709 | -webkit-animation: mul9circ1Anim 3s infinite ease-in-out; 1710 | animation: mul9circ1Anim 3s infinite ease-in-out; 1711 | } 1712 | 1713 | .mul9circ2 { 1714 | background-color: #FFFF00; 1715 | -webkit-transform: translate(-16px, -16px); 1716 | transform: translate(-16px, -16px); 1717 | -webkit-animation: mul9circ2Anim 3s infinite ease-in-out; 1718 | animation: mul9circ2Anim 3s infinite ease-in-out; 1719 | } 1720 | 1721 | .mul9circ3 { 1722 | background-color: #00FFFF; 1723 | -webkit-transform: translate(16px, -16px); 1724 | transform: translate(16px, -16px); 1725 | -webkit-animation: mul9circ3Anim 3s infinite ease-in-out; 1726 | animation: mul9circ3Anim 3s infinite ease-in-out; 1727 | } 1728 | 1729 | @-webkit-keyframes mul9circ1Anim { 1730 | 0%, 25%, 100% { 1731 | -webkit-transform: translate(0, 10px); 1732 | transform: translate(0, 10px); 1733 | } 1734 | 50%, 75% { 1735 | -webkit-transform: translate(0, 0); 1736 | transform: translate(0, 0); 1737 | } 1738 | } 1739 | 1740 | @keyframes mul9circ1Anim { 1741 | 0%, 25%, 100% { 1742 | -webkit-transform: translate(0, 10px); 1743 | transform: translate(0, 10px); 1744 | } 1745 | 50%, 75% { 1746 | -webkit-transform: translate(0, 0); 1747 | transform: translate(0, 0); 1748 | } 1749 | } 1750 | 1751 | @-webkit-keyframes mul9circ2Anim { 1752 | 0%, 25%, 100% { 1753 | -webkit-transform: translate(-16px, -16px); 1754 | transform: translate(-16px, -16px); 1755 | } 1756 | 50%, 75% { 1757 | -webkit-transform: translate(0, 0); 1758 | transform: translate(0, 0); 1759 | } 1760 | } 1761 | 1762 | @keyframes mul9circ2Anim { 1763 | 0%, 25%, 100% { 1764 | -webkit-transform: translate(-16px, -16px); 1765 | transform: translate(-16px, -16px); 1766 | } 1767 | 50%, 75% { 1768 | -webkit-transform: translate(0, 0); 1769 | transform: translate(0, 0); 1770 | } 1771 | } 1772 | 1773 | @-webkit-keyframes mul9circ3Anim { 1774 | 0%, 25%, 100% { 1775 | -webkit-transform: translate(16px, -16px); 1776 | transform: translate(16px, -16px); 1777 | } 1778 | 50%, 75% { 1779 | -webkit-transform: translate(0, 0); 1780 | transform: translate(0, 0); 1781 | } 1782 | } 1783 | 1784 | @keyframes mul9circ3Anim { 1785 | 0%, 25%, 100% { 1786 | -webkit-transform: translate(16px, -16px); 1787 | transform: translate(16px, -16px); 1788 | } 1789 | 50%, 75% { 1790 | -webkit-transform: translate(0, 0); 1791 | transform: translate(0, 0); 1792 | } 1793 | } 1794 | 1795 | /****************************************************************************************** 1796 | *************** MULTIPLE 10 *************** 1797 | *******************************************************************************************/ 1798 | 1799 | .mul10 { 1800 | height: 50px; 1801 | width: 50px; 1802 | position: relative; 1803 | } 1804 | 1805 | .m10c { 1806 | height: 12px; 1807 | width: 12px; 1808 | border-radius: 50%; 1809 | background-color: #E26A6A; 1810 | position: absolute; 1811 | } 1812 | 1813 | .m10c1, .m10c2, .m10c3 { 1814 | top: 0; 1815 | } 1816 | 1817 | .m10c4, .m10c5, .m10c6 { 1818 | top: 19px; 1819 | } 1820 | 1821 | .m10c7, .m10c8, .m10c9 { 1822 | top: 38px; 1823 | } 1824 | 1825 | .m10c1, .m10c4, .m10c7 { 1826 | left: 0; 1827 | } 1828 | 1829 | .m10c2, .m10c5, .m10c8 { 1830 | left: 19px; 1831 | } 1832 | 1833 | .m10c3, .m10c6, .m10c9 { 1834 | left: 38px; 1835 | } 1836 | 1837 | .m10c1 { 1838 | -webkit-animation: m10Anim 3s infinite ease-in-out; 1839 | animation: m10Anim 3s infinite ease-in-out; 1840 | } 1841 | 1842 | .m10c2 { 1843 | -webkit-animation: m10Anim 4s infinite ease-in-out; 1844 | animation: m10Anim 4s infinite ease-in-out; 1845 | } 1846 | 1847 | .m10c3 { 1848 | -webkit-animation: m10Anim 7s infinite ease-in-out; 1849 | animation: m10Anim 7s infinite ease-in-out; 1850 | } 1851 | 1852 | .m10c4 { 1853 | -webkit-animation: m10Anim 2.5s infinite ease-in-out; 1854 | animation: m10Anim 2.5s infinite ease-in-out; 1855 | } 1856 | 1857 | .m10c5 { 1858 | -webkit-animation: m10Anim 5s infinite ease-in-out; 1859 | animation: m10Anim 5s infinite ease-in-out; 1860 | } 1861 | 1862 | .m10c6 { 1863 | -webkit-animation: m10Anim 6.2s infinite ease-in-out; 1864 | animation: m10Anim 6.2s infinite ease-in-out; 1865 | } 1866 | 1867 | .m10c7 { 1868 | -webkit-animation: m10Anim 8.4s infinite ease-in-out; 1869 | animation: m10Anim 8.4s infinite ease-in-out; 1870 | } 1871 | 1872 | .m10c8 { 1873 | -webkit-animation: m10Anim 5.5s infinite ease-in-out; 1874 | animation: m10Anim 5.5s infinite ease-in-out; 1875 | } 1876 | 1877 | .m10c9 { 1878 | -webkit-animation: m10Anim 6s infinite ease-in-out; 1879 | animation: m10Anim 6s infinite ease-in-out; 1880 | } 1881 | 1882 | @-webkit-keyframes m10Anim { 1883 | 0%, 80%, 100% { 1884 | opacity: 0; 1885 | -webkit-transform: scale(0); 1886 | transform: scale(0); 1887 | } 1888 | 40%, 60% { 1889 | opacity: 1; 1890 | -webkit-transform: scale(1); 1891 | transform: scale(1); 1892 | } 1893 | } 1894 | 1895 | @keyframes m10Anim { 1896 | 0%, 80%, 100% { 1897 | opacity: 0; 1898 | -webkit-transform: scale(0); 1899 | transform: scale(0); 1900 | } 1901 | 40%, 60% { 1902 | opacity: 1; 1903 | -webkit-transform: scale(1); 1904 | transform: scale(1); 1905 | } 1906 | } 1907 | 1908 | 1909 | /****************************************************************************************** 1910 | *************** MULTIPLE 11 *************** 1911 | *******************************************************************************************/ 1912 | 1913 | /****************************** 1914 | * * 1915 | * BROWSER COMPATIBILITY * 1916 | * * 1917 | * Chrome: 41+ * 1918 | * Safari: 7.1+ * 1919 | * Firefox: 35+ * 1920 | * Opera: none * 1921 | * IE: none * 1922 | * Android: none * 1923 | * iOS: 8.1+ * 1924 | * * 1925 | ******************************/ 1926 | 1927 | .mul11 { 1928 | width: 60px; 1929 | height: 60px; 1930 | position: relative; 1931 | } 1932 | 1933 | .mul11s { 1934 | height: 30px; 1935 | width: 30px; 1936 | position: absolute; 1937 | opacity: .75; 1938 | mix-blend-mode: multiply; 1939 | } 1940 | 1941 | .mul11s1 { 1942 | top: 0; 1943 | left: 15px; 1944 | background-color: #52B3D9; 1945 | -webkit-animation: mul11Spin 12s infinite steps(8); 1946 | animation: mul11Spin 12s infinite steps(8); 1947 | } 1948 | 1949 | .mul11s2 { 1950 | top: 15px; 1951 | left: 0; 1952 | background-color: #F5D76E; 1953 | -webkit-animation: mul11Spin 12s infinite steps(8); 1954 | animation: mul11Spin 12s infinite steps(8); 1955 | } 1956 | 1957 | .mul11s3 { 1958 | top: 15px; 1959 | left: 30px; 1960 | background-color: #F2784B; 1961 | -webkit-animation: mul11Spin 12s infinite steps(8); 1962 | animation: mul11Spin 12s infinite steps(8); 1963 | } 1964 | 1965 | .mul11s4 { 1966 | top: 30px; 1967 | left: 15px; 1968 | background-color: #68C3A3; 1969 | -webkit-animation: mul11Spin 12s infinite steps(8); 1970 | animation: mul11Spin 12s infinite steps(8); 1971 | } 1972 | 1973 | @-webkit-keyframes mul11Spin { 1974 | 100% { 1975 | -webkit-transform: rotate(360deg); 1976 | transform: rotate(360deg); 1977 | } 1978 | } 1979 | 1980 | @keyframes mul11Spin { 1981 | 100% { 1982 | -webkit-transform: rotate(360deg); 1983 | transform: rotate(360deg); 1984 | } 1985 | } 1986 | 1987 | 1988 | /****************************************************************************************** 1989 | *************** MULTIPLE 12 *************** 1990 | *******************************************************************************************/ 1991 | 1992 | /****************************** 1993 | * * 1994 | * BROWSER COMPATIBILITY * 1995 | * * 1996 | * Chrome: 41+ * 1997 | * Safari: 7.1+ * 1998 | * Firefox: 35+ * 1999 | * Opera: none * 2000 | * IE: none * 2001 | * Android: none * 2002 | * iOS: 8.1+ * 2003 | * * 2004 | ******************************/ 2005 | 2006 | .mul12 { 2007 | height: 40px; 2008 | width: 40px; 2009 | position: relative; 2010 | } 2011 | 2012 | .m12s { 2013 | height: 40px; 2014 | width: 40px; 2015 | position: absolute; 2016 | top: 0; 2017 | left: 0; 2018 | mix-blend-mode: multiply; 2019 | opacity: .75; 2020 | } 2021 | 2022 | .m12s1 { 2023 | background-color: orangered; 2024 | -webkit-animation: m12s1anim 5s infinite linear; 2025 | animation: m12s1anim 5s infinite linear; 2026 | } 2027 | 2028 | .m12s2 { 2029 | background-color: green; 2030 | -webkit-animation: m12s2anim 5s infinite linear; 2031 | animation: m12s2anim 5s infinite linear; 2032 | } 2033 | 2034 | @-webkit-keyframes m12s1anim { 2035 | 0%, 20% { 2036 | -webkit-transform: rotate(0deg) translateX(0px); 2037 | transform: rotate(0deg) translateX(0px); 2038 | background-color: #F4D03F; 2039 | } 2040 | 25%, 45% { 2041 | -webkit-transform: rotate(90deg) translateX(20px); 2042 | transform: rotate(90deg) translateX(20px); 2043 | background-color: #EC644B; 2044 | } 2045 | 50%, 70% { 2046 | -webkit-transform: rotate(180deg) translateX(0px); 2047 | transform: rotate(180deg) translateX(0px); 2048 | background-color: #C0392B; 2049 | } 2050 | 75%, 95% { 2051 | -webkit-transform: rotate(270deg) translateX(20px); 2052 | transform: rotate(270deg) translateX(20px); 2053 | background-color: #EC644B; 2054 | } 2055 | 100% { 2056 | -webkit-transform: rotate(360deg) translateX(0px); 2057 | transform: rotate(360deg) translateX(0px); 2058 | background-color: #F4D03F; 2059 | } 2060 | } 2061 | 2062 | @keyframes m12s1anim { 2063 | 0%, 20% { 2064 | -webkit-transform: rotate(0deg) translateX(0px); 2065 | transform: rotate(0deg) translateX(0px); 2066 | background-color: #F4D03F; 2067 | } 2068 | 25%, 45% { 2069 | -webkit-transform: rotate(90deg) translateX(20px); 2070 | transform: rotate(90deg) translateX(20px); 2071 | background-color: #EC644B; 2072 | } 2073 | 50%, 70% { 2074 | -webkit-transform: rotate(180deg) translateX(0px); 2075 | transform: rotate(180deg) translateX(0px); 2076 | background-color: #C0392B; 2077 | } 2078 | 75%, 95% { 2079 | -webkit-transform: rotate(270deg) translateX(20px); 2080 | transform: rotate(270deg) translateX(20px); 2081 | background-color: #EC644B; 2082 | } 2083 | 100% { 2084 | -webkit-transform: rotate(360deg) translateX(0px); 2085 | transform: rotate(360deg) translateX(0px); 2086 | background-color: #F4D03F; 2087 | } 2088 | } 2089 | 2090 | @-webkit-keyframes m12s2anim { 2091 | 0%, 20% { 2092 | -webkit-transform: rotate(0deg) translateX(-20px); 2093 | transform: rotate(0deg) translateX(-20px); 2094 | background-color: #16A085; 2095 | } 2096 | 25%, 45% { 2097 | -webkit-transform: rotate(-90deg) translateX(0px); 2098 | transform: rotate(-90deg) translateX(0px); 2099 | background-color: #68C3A3; 2100 | } 2101 | 50%, 70% { 2102 | -webkit-transform: rotate(-180deg) translateX(-20px); 2103 | transform: rotate(-180deg) translateX(-20px); 2104 | background-color: #A2DED0; 2105 | } 2106 | 75%, 95% { 2107 | -webkit-transform: rotate(-270deg) translateX(0px); 2108 | transform: rotate(-270deg) translateX(0px); 2109 | background-color: #68C3A3; 2110 | } 2111 | 100% { 2112 | -webkit-transform: rotate(-360deg) translateX(-20px); 2113 | transform: rotate(-360deg) translateX(-20px); 2114 | background-color: #16A085; 2115 | } 2116 | } 2117 | 2118 | @keyframes m12s2anim { 2119 | 0%, 20% { 2120 | -webkit-transform: rotate(0deg) translateX(-20px); 2121 | transform: rotate(0deg) translateX(-20px); 2122 | background-color: #16A085; 2123 | } 2124 | 25%, 45% { 2125 | -webkit-transform: rotate(-90deg) translateX(0px); 2126 | transform: rotate(-90deg) translateX(0px); 2127 | background-color: #68C3A3; 2128 | } 2129 | 50%, 70% { 2130 | -webkit-transform: rotate(-180deg) translateX(-20px); 2131 | transform: rotate(-180deg) translateX(-20px); 2132 | background-color: #A2DED0; 2133 | } 2134 | 75%, 95% { 2135 | -webkit-transform: rotate(-270deg) translateX(0px); 2136 | transform: rotate(-270deg) translateX(0px); 2137 | background-color: #68C3A3; 2138 | } 2139 | 100% { 2140 | -webkit-transform: rotate(-360deg) translateX(-20px); 2141 | transform: rotate(-360deg) translateX(-20px); 2142 | background-color: #16A085; 2143 | } 2144 | } 2145 | 2146 | 2147 | /****************************************************************************************** 2148 | *************** MULTIPLE 13 *************** 2149 | *******************************************************************************************/ 2150 | 2151 | .mul13 { 2152 | width: 30px; 2153 | height: 30px; 2154 | position: relative; 2155 | } 2156 | 2157 | .m13s { 2158 | height: 30px; 2159 | width: 30px; 2160 | border-radius: 50%; 2161 | position: absolute; 2162 | opacity: .75; 2163 | } 2164 | 2165 | .m13c1 { 2166 | background-color: #68C3A3; 2167 | -webkit-animation: m13s1anim 2s infinite linear; 2168 | animation: m13s1anim 2s infinite linear; 2169 | } 2170 | 2171 | .m13c2 { 2172 | background-color: #EC644B; 2173 | -webkit-animation: m13s2anim 2s infinite linear; 2174 | animation: m13s2anim 2s infinite linear; 2175 | } 2176 | 2177 | @-webkit-keyframes m13s1anim { 2178 | 0%, 100% { 2179 | -webkit-transform: translateX(-15px); 2180 | transform: translateX(-15px); 2181 | } 2182 | 25% { 2183 | -webkit-transform: scale(0.6); 2184 | transform: scale(0.6); 2185 | opacity: .25; 2186 | } 2187 | 50% { 2188 | -webkit-transform: translateX(15px); 2189 | transform: translateX(15px); 2190 | } 2191 | 75% { 2192 | -webkit-transform: scale(1.4); 2193 | transform: scale(1.4); 2194 | opacity: .8; 2195 | } 2196 | } 2197 | 2198 | @keyframes m13s1anim { 2199 | 0%, 100% { 2200 | -webkit-transform: translateX(-15px); 2201 | transform: translateX(-15px); 2202 | } 2203 | 25% { 2204 | -webkit-transform: scale(0.6); 2205 | transform: scale(0.6); 2206 | opacity: .25; 2207 | } 2208 | 50% { 2209 | -webkit-transform: translateX(15px); 2210 | transform: translateX(15px); 2211 | } 2212 | 75% { 2213 | -webkit-transform: scale(1.4); 2214 | transform: scale(1.4); 2215 | opacity: .8; 2216 | } 2217 | } 2218 | 2219 | @-webkit-keyframes m13s2anim { 2220 | 0%, 100% { 2221 | -webkit-transform: translateX(15px); 2222 | transform: translateX(15px); 2223 | } 2224 | 25% { 2225 | -webkit-transform: scale(1.4); 2226 | transform: scale(1.4); 2227 | opacity: .8; 2228 | } 2229 | 50% { 2230 | -webkit-transform: translateX(-15px); 2231 | transform: translateX(-15px); 2232 | } 2233 | 75% { 2234 | -webkit-transform: scale(0.6); 2235 | transform: scale(0.6); 2236 | opacity: .25; 2237 | } 2238 | } 2239 | 2240 | @keyframes m13s2anim { 2241 | 0%, 100% { 2242 | -webkit-transform: translateX(15px); 2243 | transform: translateX(15px); 2244 | } 2245 | 25% { 2246 | -webkit-transform: scale(1.4); 2247 | transform: scale(1.4); 2248 | opacity: .8; 2249 | } 2250 | 50% { 2251 | -webkit-transform: translateX(-15px); 2252 | transform: translateX(-15px); 2253 | } 2254 | 75% { 2255 | -webkit-transform: scale(0.6); 2256 | transform: scale(0.6); 2257 | opacity: .25; 2258 | } 2259 | } 2260 | 2261 | 2262 | /****************************************************************************************** 2263 | *************** MULTIPLE 14 *************** 2264 | *******************************************************************************************/ 2265 | 2266 | .mul14 { 2267 | height: 20px; 2268 | width: 140px; 2269 | } 2270 | 2271 | .mul14s { 2272 | height: 20px; 2273 | width: 20px; 2274 | border-radius: 50%; 2275 | background-color: aquamarine; 2276 | float: left; 2277 | margin: 0 4px; 2278 | } 2279 | 2280 | .mul14s1, 2281 | .mul14s5 { 2282 | background-color: #EC644B; 2283 | -webkit-animation: m14s_anim 2.5s infinite ease-in-out; 2284 | animation: m14s_anim 2.5s infinite ease-in-out; 2285 | -webkit-animation-delay: .4s; 2286 | animation-delay: .4s; 2287 | } 2288 | 2289 | .mul14s2, 2290 | .mul14s4 { 2291 | background-color: #C0392B; 2292 | -webkit-animation: m14s_anim 2.5s infinite ease-in-out; 2293 | animation: m14s_anim 2.5s infinite ease-in-out; 2294 | -webkit-animation-delay: .2s; 2295 | animation-delay: .2s; 2296 | } 2297 | 2298 | .mul14s3 { 2299 | background-color: #96281B; 2300 | -webkit-animation: m14s_anim 2.5s infinite ease-in-out; 2301 | animation: m14s_anim 2.5s infinite ease-in-out; 2302 | } 2303 | 2304 | 2305 | 2306 | @-webkit-keyframes m14s_anim { 2307 | 0%, 40%, 100% { 2308 | -webkit-transform: translateY(0); 2309 | transform: translateY(0); 2310 | } 2311 | 20% { 2312 | -webkit-transform: translateY(-25px); 2313 | transform: translateY(-25px); 2314 | } 2315 | } 2316 | 2317 | @keyframes m14s_anim { 2318 | 0%, 40%, 100% { 2319 | -webkit-transform: translateY(0); 2320 | transform: translateY(0); 2321 | } 2322 | 20% { 2323 | -webkit-transform: translateY(-25px); 2324 | transform: translateY(-25px); 2325 | } 2326 | } 2327 | 2328 | 2329 | /****************************************************************************************** 2330 | *************** MULTIPLE 15 *************** 2331 | *******************************************************************************************/ 2332 | 2333 | .mul15 { 2334 | height: 14px; 2335 | width: 144px; 2336 | } 2337 | 2338 | .m15c { 2339 | height: 14px; 2340 | width: 14px; 2341 | margin: 0 2px; 2342 | border-radius: 50%; 2343 | float: left; 2344 | background-color: #F4D03F; 2345 | } 2346 | 2347 | .m15c1, .m15c2, 2348 | .m15c3, .m15c4, 2349 | .m15c5, .m15c6, 2350 | .m15c7, .m15c8 { 2351 | -webkit-animation: m15anim 2s infinite ease-in-out; 2352 | animation: m15anim 2s infinite ease-in-out; 2353 | } 2354 | 2355 | .m15c2 { -webkit-animation-delay: .25s; animation-delay: .25s } 2356 | 2357 | .m15c3 { -webkit-animation-delay: .5s; animation-delay: .5s } 2358 | 2359 | .m15c4 { -webkit-animation-delay: .75s; animation-delay: .75s } 2360 | 2361 | .m15c5 { -webkit-animation-delay: 1s; animation-delay: 1s } 2362 | 2363 | .m15c6 { -webkit-animation-delay: 1.25s; animation-delay: 1.25s } 2364 | 2365 | .m15c7 { -webkit-animation-delay: 1.5s; animation-delay: 1.5s } 2366 | 2367 | .m15c8 { -webkit-animation-delay: 1.75s; animation-delay: 1.75s } 2368 | 2369 | @-webkit-keyframes m15anim { 2370 | 0%, 40%, 100% { 2371 | background-color: #F4D03F; 2372 | -webkit-transform: translateY(0); 2373 | transform: translateY(0); 2374 | } 2375 | 20% { 2376 | background-color: #C0392B; 2377 | -webkit-transform: translateY(-12px); 2378 | transform: translateY(-12px); 2379 | } 2380 | } 2381 | 2382 | @keyframes m15anim { 2383 | 0%, 40%, 100% { 2384 | background-color: #F4D03F; 2385 | -webkit-transform: translateY(0); 2386 | transform: translateY(0); 2387 | } 2388 | 20% { 2389 | background-color: #C0392B; 2390 | -webkit-transform: translateY(-12px); 2391 | transform: translateY(-12px); 2392 | } 2393 | } 2394 | 2395 | 2396 | /****************************************************************************************** 2397 | *************** MULTIPLE 16 *************** 2398 | *******************************************************************************************/ 2399 | 2400 | .mul16 { 2401 | height: 100px; 2402 | width: 100px; 2403 | -webkit-animation: mul16turn 2s infinite linear; 2404 | animation: mul16turn 2s infinite linear; 2405 | } 2406 | 2407 | @-webkit-keyframes mul16turn { 2408 | 0% { 2409 | -webkit-transform: rotate(0deg); 2410 | transform: rotate(0deg); 2411 | } 2412 | 100% { 2413 | -webkit-transform: rotate(360deg); 2414 | transform: rotate(360deg); 2415 | } 2416 | } 2417 | 2418 | @keyframes mul16turn { 2419 | 0% { 2420 | -webkit-transform: rotate(0deg); 2421 | transform: rotate(0deg); 2422 | } 2423 | 100% { 2424 | -webkit-transform: rotate(360deg); 2425 | transform: rotate(360deg); 2426 | } 2427 | } 2428 | 2429 | .m16c { 2430 | height: 40px; 2431 | width: 40px; 2432 | border-radius: 50%; 2433 | background-color: red; 2434 | float: left; 2435 | margin: 30px 3px 0; 2436 | } 2437 | 2438 | .m16c1 { 2439 | -webkit-animation: m16c1anim 3s infinite ease-in-out; 2440 | animation: m16c1anim 3s infinite ease-in-out; 2441 | } 2442 | 2443 | .m16c2 { 2444 | -webkit-animation: m16c2anim 3s infinite ease-in-out; 2445 | animation: m16c2anim 3s infinite ease-in-out; 2446 | } 2447 | 2448 | @-webkit-keyframes m16c1anim { 2449 | 0%, 100% { 2450 | -webkit-transform: scale(.25); 2451 | transform: scale(.25); 2452 | background-color: #67b4d4; 2453 | } 2454 | 50% { 2455 | -webkit-transform: scale(1.5); 2456 | transform: scale(1.5); 2457 | background-color: #4b7b9f; 2458 | } 2459 | } 2460 | 2461 | @keyframes m16c1anim { 2462 | 0%, 100% { 2463 | -webkit-transform: scale(.25); 2464 | transform: scale(.25); 2465 | background-color: #67b4d4; 2466 | } 2467 | 50% { 2468 | -webkit-transform: scale(1.5); 2469 | transform: scale(1.5); 2470 | background-color: #4b7b9f; 2471 | } 2472 | } 2473 | 2474 | @-webkit-keyframes m16c2anim { 2475 | 0%, 100% { 2476 | -webkit-transform: scale(1.5); 2477 | transform: scale(1.5); 2478 | background-color: #4b7b9f; 2479 | } 2480 | 50% { 2481 | -webkit-transform: scale(.25); 2482 | transform: scale(.25); 2483 | background-color: #67b4d4; 2484 | } 2485 | } 2486 | 2487 | @keyframes m16c2anim { 2488 | 0%, 100% { 2489 | -webkit-transform: scale(1.5); 2490 | transform: scale(1.5); 2491 | background-color: #4b7b9f; 2492 | } 2493 | 50% { 2494 | -webkit-transform: scale(.25); 2495 | transform: scale(.25); 2496 | background-color: #67b4d4; 2497 | } 2498 | } 2499 | 2500 | 2501 | 2502 | 2503 | 2504 | 2505 | 2506 | 2507 | 2508 | 2509 | 2510 | 2511 | 2512 | 2513 | 2514 | 2515 | 2516 | 2517 | 2518 | 2519 | 2520 | 2521 | 2522 | 2523 | 2524 | 2525 | 2526 | 2527 | 2528 | 2529 | 2530 | 2531 | 2532 | 2533 | 2534 | 2535 | 2536 | --------------------------------------------------------------------------------