Take any inline SVG and turn it into a spinner! Branding is super-flexible through a Sass mixin.
The only rule is that the things you want to animate have to be DIRECT CHILDREN of the parent SVG element.
A Pen by Chris Hart on CodePen.
Last active
November 10, 2015 12:48
-
-
Save Poordeveloper/84327fa653148d610fb9 to your computer and use it in GitHub Desktop.
Spin Cycle CSS-powered spinner from any inline SVG
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <header class="words"> | |
| <h1>Spin Cycle</h1> | |
| <p>Take any simple inline SVG and turn it into a spinner! Branding is super-flexible and set through a Sass mixin.</p> | |
| <p><b>The only rule is that the things you want to animate have to be DIRECT CHILDREN of the SVG element.</b></p> | |
| </header> | |
| <main class="examples"> | |
| <div class="ic-Spin-cycle--classic"> | |
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0" y="0" viewBox="156 -189 512 512" enable-background="new 156 -189 512 512" xml:space="preserve"> | |
| <path d="M636 99h-64c-17.7 0-32-14.3-32-32s14.3-32 32-32h64c17.7 0 32 14.3 32 32S653.7 99 636 99z"/> | |
| <path d="M547.8-23.5C535.2-11 515-11 502.5-23.5s-12.5-32.8 0-45.2l45.2-45.2c12.5-12.5 32.8-12.5 45.2 0s12.5 32.8 0 45.2L547.8-23.5z"/> | |
| <path d="M412-61c-17.7 0-32-14.3-32-32v-64c0-17.7 14.3-32 32-32s32 14.3 32 32v64C444-75.3 429.7-61 412-61z"/> | |
| <path d="M276.2-23.5L231-68.8c-12.5-12.5-12.5-32.8 0-45.2s32.8-12.5 45.2 0l45.2 45.2c12.5 12.5 12.5 32.8 0 45.2S288.8-11 276.2-23.5z"/> | |
| <path d="M284 67c0 17.7-14.3 32-32 32h-64c-17.7 0-32-14.3-32-32s14.3-32 32-32h64C269.7 35 284 49.3 284 67z"/> | |
| <path d="M276.2 248c-12.5 12.5-32.8 12.5-45.2 0 -12.5-12.5-12.5-32.8 0-45.2l45.2-45.2c12.5-12.5 32.8-12.5 45.2 0s12.5 32.8 0 45.2L276.2 248z"/> | |
| <path d="M412 323c-17.7 0-32-14.3-32-32v-64c0-17.7 14.3-32 32-32s32 14.3 32 32v64C444 308.7 429.7 323 412 323z"/> | |
| <path d="M547.8 157.5l45.2 45.2c12.5 12.5 12.5 32.8 0 45.2 -12.5 12.5-32.8 12.5-45.2 0l-45.2-45.2c-12.5-12.5-12.5-32.8 0-45.2S535.2 145 547.8 157.5z"/> | |
| </svg> | |
| </div> | |
| <div class="ic-Spin-cycle--classic-salmon-yellow"> | |
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0" y="0" viewBox="156 -189 512 512" enable-background="new 156 -189 512 512" xml:space="preserve"> | |
| <path d="M636 99h-64c-17.7 0-32-14.3-32-32s14.3-32 32-32h64c17.7 0 32 14.3 32 32S653.7 99 636 99z"/> | |
| <path d="M547.8-23.5C535.2-11 515-11 502.5-23.5s-12.5-32.8 0-45.2l45.2-45.2c12.5-12.5 32.8-12.5 45.2 0s12.5 32.8 0 45.2L547.8-23.5z"/> | |
| <path d="M412-61c-17.7 0-32-14.3-32-32v-64c0-17.7 14.3-32 32-32s32 14.3 32 32v64C444-75.3 429.7-61 412-61z"/> | |
| <path d="M276.2-23.5L231-68.8c-12.5-12.5-12.5-32.8 0-45.2s32.8-12.5 45.2 0l45.2 45.2c12.5 12.5 12.5 32.8 0 45.2S288.8-11 276.2-23.5z"/> | |
| <path d="M284 67c0 17.7-14.3 32-32 32h-64c-17.7 0-32-14.3-32-32s14.3-32 32-32h64C269.7 35 284 49.3 284 67z"/> | |
| <path d="M276.2 248c-12.5 12.5-32.8 12.5-45.2 0 -12.5-12.5-12.5-32.8 0-45.2l45.2-45.2c12.5-12.5 32.8-12.5 45.2 0s12.5 32.8 0 45.2L276.2 248z"/> | |
| <path d="M412 323c-17.7 0-32-14.3-32-32v-64c0-17.7 14.3-32 32-32s32 14.3 32 32v64C444 308.7 429.7 323 412 323z"/> | |
| <path d="M547.8 157.5l45.2 45.2c12.5 12.5 12.5 32.8 0 45.2 -12.5 12.5-32.8 12.5-45.2 0l-45.2-45.2c-12.5-12.5-12.5-32.8 0-45.2S535.2 145 547.8 157.5z"/> | |
| </svg> | |
| </div> | |
| <div class="ic-Spin-cycle--circles"> | |
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0" y="0" viewBox="0 0 200 79" enable-background="new 0 0 200 79" xml:space="preserve"> | |
| <circle cx="39.5" cy="39.5" r="39.5"/> | |
| <circle cx="100" cy="39.5" r="39.5"/> | |
| <circle cx="160.5" cy="39.5" r="39.5"/> | |
| </svg> | |
| </div> | |
| <div class="ic-Spin-cycle--police-car"> | |
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0" y="0" viewBox="0 0 200 79" enable-background="new 0 0 200 79" xml:space="preserve"> | |
| <rect y="-0.5" width="33" height="79"/> | |
| <rect x="33" y="-0.5" width="34" height="79"/> | |
| <rect x="67" y="-0.5" width="33" height="79"/> | |
| <rect x="100" y="-0.5" width="33" height="79"/> | |
| <rect x="133" y="-0.5" width="34" height="79"/> | |
| <rect x="167" y="-0.5" width="33" height="79"/> | |
| </svg> | |
| </div> | |
| <div class="ic-Spin-cycle--faces"> | |
| <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="195.6 -49.9 600 200" enable-background="new 195.6 -49.9 600 200" xml:space="preserve"><path d="M295.6-38.9c49.1 0 89 39.9 89 89s-39.9 89-89 89 -89-39.9-89-89S246.6-38.9 295.6-38.9M295.6-49.9c-55.2 0-100 44.8-100 100s44.8 100 100 100 100-44.8 100-100S350.9-49.9 295.6-49.9L295.6-49.9zM264.6 11.1c-8.6 0-15.5 6.9-15.5 15.5s6.9 15.5 15.5 15.5 15.5-6.9 15.5-15.5S273.2 11.1 264.6 11.1zM326.6 11.1c-8.6 0-15.5 6.9-15.5 15.5s6.9 15.5 15.5 15.5 15.5-6.9 15.5-15.5S335.2 11.1 326.6 11.1zM295.6 68.1c-10.6 0-19.2 6.7-19.2 15s8.6 15 19.2 15 19.2-6.7 19.2-15S306.2 68.1 295.6 68.1z"/><path d="M495.6-38.9c49.1 0 89 39.9 89 89s-39.9 89-89 89 -89-39.9-89-89S446.6-38.9 495.6-38.9M495.6-49.9c-55.2 0-100 44.8-100 100s44.8 100 100 100 100-44.8 100-100S550.9-49.9 495.6-49.9L495.6-49.9zM464.6 11.1c-8.6 0-15.5 6.9-15.5 15.5s6.9 15.5 15.5 15.5 15.5-6.9 15.5-15.5S473.2 11.1 464.6 11.1zM526.6 11.1c-8.6 0-15.5 6.9-15.5 15.5s6.9 15.5 15.5 15.5c8.6 0 15.5-6.9 15.5-15.5S535.2 11.1 526.6 11.1zM495.6 68.1c-10.6 0-19.2 6.7-19.2 15s8.6 15 19.2 15 19.2-6.7 19.2-15S506.2 68.1 495.6 68.1z"/><path d="M695.6-38.9c49.1 0 89 39.9 89 89s-39.9 89-89 89 -89-39.9-89-89S646.6-38.9 695.6-38.9M695.6-49.9c-55.2 0-100 44.8-100 100s44.8 100 100 100c55.2 0 100-44.8 100-100S750.9-49.9 695.6-49.9L695.6-49.9zM664.6 11.1c-8.6 0-15.5 6.9-15.5 15.5s6.9 15.5 15.5 15.5c8.6 0 15.5-6.9 15.5-15.5S673.2 11.1 664.6 11.1zM726.6 11.1c-8.6 0-15.5 6.9-15.5 15.5s6.9 15.5 15.5 15.5c8.6 0 15.5-6.9 15.5-15.5S735.2 11.1 726.6 11.1zM695.6 68.1c-10.6 0-19.2 6.7-19.2 15s8.6 15 19.2 15c10.6 0 19.2-6.7 19.2-15S706.2 68.1 695.6 68.1z"/></svg> | |
| </div> | |
| </main> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // *** Start Spin Cycle code *** | |
| @mixin ic-Spin-cycle-animation ( | |
| $animation-name: spin-cycle, | |
| $animation-grow-to: 1, | |
| $animation-shrink-to: 1, | |
| $color-spin-highlight: white, | |
| $color-spin-base: black | |
| ) { | |
| @keyframes #{$animation-name} { | |
| from { | |
| fill: $color-spin-highlight; | |
| transform: scale($animation-grow-to); | |
| } | |
| to { | |
| fill: $color-spin-base; | |
| transform: scale($animation-shrink-to); | |
| } | |
| } | |
| } | |
| @mixin ic-Spin-cycle-branding( | |
| $animation-name: spin-cycle, | |
| $animation-grow-to: 1, | |
| $animation-shrink-to: 1, | |
| $spin-width: 72px, | |
| $spin-height: 72px, | |
| $spin-margin: 12px, | |
| $color-spin-base: rgba(white, 0.1), | |
| $color-spin-highlight: white, | |
| $number-of-paths: 8 | |
| ) { | |
| @include ic-Spin-cycle-animation($animation-name, $animation-grow-to, $animation-shrink-to, $color-spin-highlight, $color-spin-base); | |
| margin: $spin-margin; | |
| width: $spin-width; | |
| height: $spin-height; | |
| > svg { | |
| width: $spin-width; height: $spin-height; | |
| > * { | |
| fill: $color-spin-base; | |
| animation-name: $animation-name; | |
| animation-duration: #{$number-of-paths*0.1}s; | |
| @for $i from 1 through ($number-of-paths - 1) { | |
| &:nth-of-type(#{$i}) { | |
| animation-delay: #{$i*0.1}s; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| %ic-Spin-cycle { | |
| box-sizing: border-box; | |
| display: inline-block; | |
| vertical-align: middle; | |
| overflow: visible; | |
| > svg { | |
| display: block; | |
| overflow: visible; | |
| > * { | |
| transform: translate3d(0,0,0); | |
| transform-origin: center; | |
| animation-iteration-count: infinite; | |
| } | |
| } | |
| } | |
| // IMPORTANT HACK FOR FIREFOX. FF has a bug with transform-origin and inline SVGs that pretty much ruins the whole scaling effect. My solution for now is just to remove the scale transforms from Firefox, which leaves the color animation only | |
| body:not(:-moz-handler-blocked) { | |
| svg > * { | |
| transform: none !important; | |
| transform-origin: 0 0; | |
| } | |
| } | |
| // END HACK | |
| // Let's make some spinners! | |
| .ic-Spin-cycle--classic { | |
| @extend %ic-Spin-cycle; | |
| // pass no parameters into the mixin, and you get a classic spinner | |
| @include ic-Spin-cycle-branding; | |
| } | |
| .ic-Spin-cycle--classic-salmon-yellow { | |
| @extend %ic-Spin-cycle; | |
| @include ic-Spin-cycle-branding( | |
| yellow, // name your animation | |
| 1.1, // how BIG should the child paths scale to? | |
| 0.9, // how SMALL should the child paths scale to? | |
| 48px, // what is the width of the spinner? | |
| 48px, // what is the height of the spinner? | |
| 12px 24px, // what margin should be around the spinner element? | |
| salmon, // what is the base color of the spinner? | |
| yellow, // what is the highlight color of the spinner? | |
| 8 // how many direct child paths/circles/etc. does the SVG have? Feel free to play with this to make the timing of the animation slower or faster. | |
| ); | |
| } | |
| .ic-Spin-cycle--circles { | |
| @extend %ic-Spin-cycle; | |
| @include ic-Spin-cycle-branding( | |
| circles, // name your animation | |
| 1.6, // how BIG should the child paths scale to? | |
| 1, // how SMALL should the child paths scale to? | |
| 100px, // what is the width of the spinner? | |
| 40px, // what is the height of the spinner? | |
| 12px 24px, // what margin should be around the spinner element? | |
| rgba(white,0.5), // what is the base color of the spinner? | |
| rgba(lime, 0.8), // what is the highlight color of the spinner? | |
| 8 // how many direct child paths/circles/etc. does the SVG have? Feel free to play with this to make the timing of the animation slower or faster. | |
| ); | |
| } | |
| .ic-Spin-cycle--police-car { | |
| @extend %ic-Spin-cycle; | |
| @include ic-Spin-cycle-branding( | |
| your-animation, // name your animation | |
| 1.1, // how BIG should the child paths scale to? | |
| 0.3, // how SMALL should the child paths scale to? | |
| 100px, // what is the width of the spinner? | |
| 40px, // what is the height of the spinner? | |
| 12px 24px, // what margin should be around the spinner element? | |
| rgba(#222, 0.8), // what is the base color of the spinner? | |
| cyan, // what is the highlight color of the spinner? | |
| 6 // how many direct child paths/circles/etc. does the SVG have? Feel free to play with this to make the timing of the animation slower or faster. | |
| ); | |
| } | |
| .ic-Spin-cycle--faces { | |
| @extend %ic-Spin-cycle; | |
| @include ic-Spin-cycle-branding( | |
| faces, // name your animation | |
| 2, // how BIG should the child paths scale to? | |
| 1, // how SMALL should the child paths scale to? | |
| 100px, // what is the width of the spinner? | |
| 40px, // what is the height of the spinner? | |
| 12px 24px, // what margin should be around the spinner element? | |
| rgba(rebeccapurple, 0.8), // what is the base color of the spinner? | |
| rgba(yellow, 0.7), // what is the highlight color of the spinner? | |
| 12 // how many direct child paths/circles/etc. does the SVG have? Feel free to play with this to make the timing of the animation slower or faster. | |
| ); | |
| } | |
| // *** End Spin Cycle code *** | |
| :root { background: black; height: 100%; } | |
| body { text-align: center; height: 100%; display: flex; align-items: center; justify-content: center; color: #666; font-family: "Helvetica Neue"; font-weight: 300 } | |
| .words { flex: 0 0 34%; text-align: left; box-sizing: border-box; padding: 24px; margin-right: 24px; line-height: 1.5; border-right: 1px solid #222; border-bottom: 1px solid #222; border-top: 1px solid #222; background: #111; | |
| } | |
| .examples { flex: 1; text-align: center; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment