"animation"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/ilithya/pen/LOJGgm" /> <style class="cp-pen-styles">:root { --color_01: #c03546; --color_02: #f26d5b; --color_03: #f6ea8c; --color_04: #492540; } body { background-color: var(--color_02); text-align: center; } .u-hidden { display: none; } .hole { width: 340px; height: 340px; background-color: var(--color_04); border: 5px solid var(--color_02); -webkit-box-shadow: 0 0 0 10px var(--color_04); box-shadow: 0 0 0 10px var(--color_04); border-radius: 50%; display: inline-block; margin-top: 68px; overflow: hidden; position: relative; z-index: 1; } .wheel { fill: var(--color_01); stroke: var(--color_02); stroke-width: 10px; margin: -5px; } .wheel:nth-child(1) { width: 87px; height: 87px; -webkit-animation: turn 2s linear 3000; animation: turn 2s linear 3000; } .wheel:nth-child(2) { width: 30px; height: 30px; -webkit-animation: turn 2s linear 3000; animation: turn 2s linear 3000; } .wheel:nth-child(3) { width: 30px; height: 30px; -webkit-animation: turn 2s linear 3000; animation: turn 2s linear 3000; } .wheel:nth-child(4) { width: 38px; height: 38px; -webkit-animation: turn 2s linear 3000; animation: turn 2s linear 3000; } .wheel:nth-child(5) { width: 152px; height: 152px; -webkit-animation: turn 3s linear 3000; animation: turn 3s linear 3000; } .wheel:nth-child(6) { width: 130px; height: 130px; -webkit-animation: turn 2s linear 3000; animation: turn 2s linear 3000; } .wheel:nth-child(7) { width: 162px; height: 162px; -webkit-animation: turn 3s linear 3000; animation: turn 3s linear 3000; } .wheel:nth-child(8) { width: 30px; height: 30px; -webkit-animation: turn 3s linear 3000; animation: turn 3s linear 3000; } .wheel:nth-child(9) { width: 138px; height: 138px; -webkit-animation: turn 2s linear 3000; animation: turn 2s linear 3000; } .wheel:nth-child(10) { width: 54px; height: 54px; -webkit-animation: turn 3s linear 3000; animation: turn 3s linear 3000; } .wheel:nth-child(11) { width: 159px; height: 159px; -webkit-animation: turn 4s linear 3000; animation: turn 4s linear 3000; } .wheel:nth-child(12) { width: 113px; height: 113px; -webkit-animation: turn 4s linear 3000; animation: turn 4s linear 3000; } @-webkit-keyframes turn { 0%, 100% { stroke-dasharray: 1600; } 25%, 75% { stroke-dasharray: 700; } 50% { stroke: var(--color_03); } 100% { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } @keyframes turn { 0%, 100% { stroke-dasharray: 1600; } 25%, 75% { stroke-dasharray: 700; } 50% { stroke: var(--color_03); } 100% { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } </style></head><body> <svg class="u-hidden" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <symbol id="wheel" viewBox="0 0 612 612"> <path d="M342.982 612h-73.975c-14.775 0-27.011-11.073-28.467-25.747l-7.584-45.446c-14.249-4.43-28.093-10.184-41.32-17.141l-38.064 27.183c-4.551 3.772-10.982 6.077-17.576 6.077-7.646 0-14.825-2.982-20.236-8.393l-52.303-52.304c-10.446-10.446-11.255-26.93-1.901-38.357l26.778-37.508c-6.978-13.247-12.722-27.102-17.141-41.311l-46.114-7.695c-13.996-1.344-25.079-13.581-25.079-28.376v-73.964c0-14.775 11.073-27.011 25.747-28.478l45.446-7.605c4.439-14.269 10.193-28.113 17.131-41.3l-27.173-38.064c-8.96-10.871-8.151-27.354 2.306-37.791l52.313-52.323c10.083-10.062 27.345-10.901 38.327-1.921l37.559 26.789c13.177-6.947 27.021-12.691 41.3-17.131l7.675-46.104c1.366-14.017 13.612-25.09 28.387-25.09h73.974c14.755 0 26.991 11.063 28.478 25.727l7.595 45.467c14.259 4.439 28.103 10.184 41.29 17.131l38.074-27.183c4.541-3.762 10.973-6.058 17.565-6.058 7.646 0 14.825 2.973 20.226 8.373l52.303 52.323c10.437 10.406 11.275 26.879 1.941 38.317l-26.788 37.539c6.957 13.187 12.691 27.031 17.131 41.3l46.114 7.696c14.016 1.375 25.079 13.611 25.079 28.386v73.964c0 14.795-11.073 27.021-25.768 28.446l-45.426 7.595c-4.439 14.279-10.184 28.134-17.131 41.32l27.183 38.055c8.95 10.911 8.11 27.405-2.346 37.821l-52.293 52.293c-10.042 10.052-27.345 10.941-38.357 1.911l-37.508-26.769c-13.228 6.968-27.071 12.722-41.29 17.142l-7.706 46.124c-1.375 14.007-13.611 25.08-28.376 25.08zm-152.075-110.359c1.699 0 3.408.424 4.945 1.294 15.412 8.637 31.814 15.442 48.794 20.245 3.762 1.062 6.573 4.207 7.22 8.07l8.707 52.344c.506 4.874 4.177 8.181 8.434 8.181h73.975c4.257 0 7.918-3.297 8.333-7.514l8.828-53.011c.637-3.853 3.458-6.998 7.221-8.06 16.938-4.794 33.341-11.6 48.763-20.246 3.408-1.921 7.636-1.688 10.821.597l43.19 30.854c4.359 3.509 8.799 2.78 11.751-.162l52.313-52.313c3.074-3.063 3.316-7.888.586-11.234l-31.268-43.718c-2.286-3.186-2.508-7.402-.597-10.83 8.636-15.352 15.432-31.754 20.226-48.764 1.062-3.772 4.206-6.583 8.079-7.23l52.354-8.728c4.875-.506 8.182-4.156 8.182-8.414v-73.964c0-4.257-3.297-7.928-7.514-8.343l-53.011-8.818c-3.873-.647-7.009-3.458-8.08-7.23-4.794-17.01-11.6-33.413-20.226-48.743-1.911-3.429-1.688-7.646.597-10.831l30.874-43.211c3.125-3.863 2.872-8.677-.182-11.731l-52.312-52.334c-2.942-2.943-8.009-3.195-11.205-.576l-43.747 31.278c-3.186 2.286-7.413 2.508-10.82.597-15.361-8.626-31.765-15.432-48.764-20.246-3.762-1.052-6.573-4.207-7.221-8.07l-8.717-52.343c-.536-4.976-4.126-8.211-8.454-8.211h-73.975c-4.338 0-7.918 3.226-8.343 7.514l-8.798 53c-.637 3.863-3.458 7.008-7.22 8.07-17.03 4.824-33.433 11.62-48.753 20.246-3.438 1.912-7.655 1.689-10.831-.597l-43.232-30.874c-4.349-3.479-8.808-2.781-11.751.182l-52.312 52.313c-3.054 3.054-3.287 7.868-.556 11.195l31.258 43.758c2.286 3.195 2.508 7.412.597 10.831-8.616 15.331-15.422 31.733-20.246 48.753-1.052 3.762-4.207 6.574-8.07 7.221l-52.343 8.727c-4.956.526-8.181 4.116-8.181 8.455v73.964c0 4.328 3.216 7.908 7.493 8.322l53.021 8.818c3.863.638 7.008 3.459 8.07 7.23 4.783 16.919 11.589 33.332 20.246 48.784 1.912 3.418 1.689 7.625-.597 10.811l-30.854 43.191c-3.155 3.883-2.913 8.696.151 11.761l52.313 52.303c2.973 2.963 8.02 3.226 11.205.576l43.748-31.258c1.759-1.245 3.822-1.881 5.885-1.881zm115.103-74.592c-66.764 0-121.079-54.305-121.079-121.059 0-66.764 54.315-121.079 121.079-121.079 66.765 0 121.069 54.315 121.069 121.079-.01 66.743-54.315 121.059-121.069 121.059zm0-221.913c-55.609 0-100.854 45.245-100.854 100.854 0 55.6 45.244 100.833 100.854 100.833 55.6 0 100.844-45.233 100.844-100.833-.01-55.61-45.245-100.854-100.844-100.854z"></path> </symbol> </svg> <div class="hole"> <svg class="wheel"> <use xlink:href="#wheel"></use> </svg> <svg class="wheel"> <use xlink:href="#wheel"></use> </svg> <svg class="wheel"> <use xlink:href="#wheel"></use> </svg> <svg class="wheel"> <use xlink:href="#wheel"></use> </svg> <svg class="wheel"> <use xlink:href="#wheel"></use> </svg> <svg class="wheel"> <use xlink:href="#wheel"></use> </svg> <svg class="wheel"> <use xlink:href="#wheel"></use> </svg> <svg class="wheel"> <use xlink:href="#wheel"></use> </svg> <svg class="wheel"> <use xlink:href="#wheel"></use> </svg> <svg class="wheel"> <use xlink:href="#wheel"></use> </svg> <svg class="wheel"> <use xlink:href="#wheel"></use> </svg> <svg class="wheel"> <use xlink:href="#wheel"></use> </svg> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >/* * #codevember - 18: MOTORS * Reload to get different wheel sizes each time. * Resizable circle and SVG wheels with just 1 Sass edit. * By ilithya | 2017 * * Original wheel SVG icon by Fermam Aziz (https://www.flaticon.com/authors/fermam-aziz) from www.flaticon.com */ //# sourceURL=pen.js </script> </body></html>

Related: See More

Bootstrap Wizard
Ripple Dot Animation
Success and Error Icon Animation
Bootstrap4 navigation border animation

Questions / Comments: