Pure CSS animated loader. Originally wanted to re-create the GIT Kraken "Loading Repo" animation but, it became this instead.
A Pen by Colin Horn on CodePen.
Created
September 19, 2017 02:55
-
-
Save CodeMyUI/6b07c9c52f169f0008649526fc72e524 to your computer and use it in GitHub Desktop.
Rotate / Pulse Loading Animation
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
| <div class="e-loadholder"> | |
| <div class="m-loader"> | |
| <span class="e-text">Loading</span> | |
| </div> | |
| </div> | |
| <div id="particleCanvas-Blue"></div> | |
| <div id="particleCanvas-White"></div> |
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
| particlesJS("particleCanvas-Blue", { | |
| particles: { | |
| number: { | |
| value: 100, | |
| density: { | |
| enable: true, | |
| value_area: 800 | |
| } | |
| }, | |
| color: { | |
| value: "#1B5F70" | |
| }, | |
| shape: { | |
| type: "circle", | |
| stroke: { | |
| width: 0, | |
| color: "#000000" | |
| }, | |
| polygon: { | |
| nb_sides: 3 | |
| }, | |
| image: { | |
| src: "img/github.svg", | |
| width: 100, | |
| height: 100 | |
| } | |
| }, | |
| opacity: { | |
| value: 0.5, | |
| random: false, | |
| anim: { | |
| enable: true, | |
| speed: 1, | |
| opacity_min: 0.1, | |
| sync: false | |
| } | |
| }, | |
| size: { | |
| value: 10, | |
| random: true, | |
| anim: { | |
| enable: false, | |
| speed: 10, | |
| size_min: 0.1, | |
| sync: false | |
| } | |
| }, | |
| line_linked: { | |
| enable: false, | |
| distance: 150, | |
| color: "#ffffff", | |
| opacity: 0.4, | |
| width: 1 | |
| }, | |
| move: { | |
| enable: true, | |
| speed: 0.5, | |
| direction: "none", | |
| random: true, | |
| straight: false, | |
| out_mode: "bounce", | |
| bounce: false, | |
| attract: { | |
| enable: false, | |
| rotateX: 394.57382081613633, | |
| rotateY: 157.82952832645452 | |
| } | |
| } | |
| }, | |
| interactivity: { | |
| detect_on: "canvas", | |
| events: { | |
| onhover: { | |
| enable: true, | |
| mode: "grab" | |
| }, | |
| onclick: { | |
| enable: false, | |
| mode: "push" | |
| }, | |
| resize: true | |
| }, | |
| modes: { | |
| grab: { | |
| distance: 200, | |
| line_linked: { | |
| opacity: 0.2 | |
| } | |
| }, | |
| bubble: { | |
| distance: 1500, | |
| size: 40, | |
| duration: 7.272727272727273, | |
| opacity: 0.3676323676323676, | |
| speed: 3 | |
| }, | |
| repulse: { | |
| distance: 50, | |
| duration: 0.4 | |
| }, | |
| push: { | |
| particles_nb: 4 | |
| }, | |
| remove: { | |
| particles_nb: 2 | |
| } | |
| } | |
| }, | |
| retina_detect: true | |
| }); | |
| particlesJS("particleCanvas-White", { | |
| particles: { | |
| number: { | |
| value: 250, | |
| density: { | |
| enable: true, | |
| value_area: 800 | |
| } | |
| }, | |
| color: { | |
| value: "#ffffff" | |
| }, | |
| shape: { | |
| type: "circle", | |
| stroke: { | |
| width: 0, | |
| color: "#000000" | |
| }, | |
| polygon: { | |
| nb_sides: 3 | |
| }, | |
| image: { | |
| src: "img/github.svg", | |
| width: 100, | |
| height: 100 | |
| } | |
| }, | |
| opacity: { | |
| value: 0.5, | |
| random: true, | |
| anim: { | |
| enable: false, | |
| speed: 0.2, | |
| opacity_min: 0, | |
| sync: false | |
| } | |
| }, | |
| size: { | |
| value: 15, | |
| random: true, | |
| anim: { | |
| enable: true, | |
| speed: 10, | |
| size_min: 0.1, | |
| sync: false | |
| } | |
| }, | |
| line_linked: { | |
| enable: false, | |
| distance: 150, | |
| color: "#ffffff", | |
| opacity: 0.4, | |
| width: 1 | |
| }, | |
| move: { | |
| enable: true, | |
| speed: 0.5, | |
| direction: "none", | |
| random: true, | |
| straight: false, | |
| out_mode: "bounce", | |
| bounce: false, | |
| attract: { | |
| enable: true, | |
| rotateX: 3945.7382081613637, | |
| rotateY: 157.82952832645452 | |
| } | |
| } | |
| }, | |
| interactivity: { | |
| detect_on: "canvas", | |
| events: { | |
| onhover: { | |
| enable: false, | |
| mode: "grab" | |
| }, | |
| onclick: { | |
| enable: false, | |
| mode: "push" | |
| }, | |
| resize: true | |
| }, | |
| modes: { | |
| grab: { | |
| distance: 200, | |
| line_linked: { | |
| opacity: 0.2 | |
| } | |
| }, | |
| bubble: { | |
| distance: 1500, | |
| size: 40, | |
| duration: 7.272727272727273, | |
| opacity: 0.3676323676323676, | |
| speed: 3 | |
| }, | |
| repulse: { | |
| distance: 50, | |
| duration: 0.4 | |
| }, | |
| push: { | |
| particles_nb: 4 | |
| }, | |
| remove: { | |
| particles_nb: 2 | |
| } | |
| } | |
| }, | |
| retina_detect: true | |
| }); |
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
| <script src="https://code.jquery.com/jquery-3.2.1.js"></script> | |
| <script src="https://use.fontawesome.com/b5bf1bd49e.js"></script> | |
| <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> |
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
| $f-title:'Roboto', sans-serif; | |
| $f-body:'Open Sans', sans-serif; | |
| @mixin centre($axis: "both") { | |
| position: absolute; | |
| @if $axis == "y" { | |
| top: 50%; | |
| -webkit-transform: translateY(-50%); | |
| -moz-transform: translateY(-50%); | |
| -ms-transform: translateY(-50%); | |
| -o-transform: translateY(-50%); | |
| transform: translateY(-50%); | |
| } | |
| @if $axis == "x" { | |
| left: 50%; | |
| -webkit-transform: translateX(-50%); | |
| -moz-transform: translateX(-50%); | |
| -ms-transform: translateX(-50%); | |
| -o-transform: translateX(-50%); | |
| transform: translateX(-50%); | |
| } | |
| @if $axis == "both" { | |
| top: 50%; | |
| left: 50%; | |
| -webkit-transform: translate(-51%, -50%); | |
| -moz-transform: translate(-51%, -50%); | |
| -ms-transform: translate(-51%, -50%); | |
| -o-transform: translate(-51%, -50%); | |
| transform: translate(-51%, -50%); | |
| } | |
| } | |
| @mixin font-size($sizeValue: 1.6, $lineHeight: 2.4) { | |
| font-size: ($sizeValue * 10) + px; | |
| font-size: $sizeValue + rem; | |
| line-height: ($lineHeight * 10) + px; | |
| } | |
| @mixin animation($animate...) { | |
| $max: length($animate); | |
| $animations: ''; | |
| @for $i from 1 through $max { | |
| $animations: #{$animations + nth($animate, $i)}; | |
| @if $i < $max { | |
| $animations: #{$animations + ", "}; | |
| } | |
| } | |
| -webkit-animation: $animations; | |
| -moz-animation: $animations; | |
| -o-animation: $animations; | |
| animation: $animations; | |
| } | |
| @mixin keyframes($animationName) { | |
| @-webkit-keyframes #{$animationName} { | |
| @content; | |
| } | |
| @-moz-keyframes #{$animationName} { | |
| @content; | |
| } | |
| @-o-keyframes #{$animationName} { | |
| @content; | |
| } | |
| @keyframes #{$animationName} { | |
| @content; | |
| } | |
| } | |
| @include keyframes(outerRotate1) { | |
| 0% {transform:translate(-50%, -50%) rotate(0)} | |
| 100% {transform:translate(-50%, -50%) rotate(360deg)} | |
| } | |
| @include keyframes(outerRotate2) { | |
| 0% {transform:translate(-50%, -50%) rotate(0)} | |
| 100% {transform:translate(-50%, -50%) rotate(-360deg)} | |
| } | |
| @include keyframes(textColour) { | |
| 0% {color:#fff;} | |
| 100% {color:#3BB2D0;} | |
| } | |
| html{ | |
| font-size:62.5%; | |
| } | |
| body{ | |
| margin:0; | |
| padding:0; | |
| font-family:$f-body; | |
| width:100vw; | |
| height:100vh; | |
| background:#222; | |
| } | |
| .e-loadholder{ | |
| @include centre(); | |
| width:240px; | |
| height:240px; | |
| border:5px solid #1B5F70; | |
| border-radius:120px; | |
| box-sizing:border-box; | |
| &:after{ | |
| @include centre; | |
| content:" "; | |
| display:block; | |
| background:#222; | |
| transform-origin:center; | |
| z-index:0; | |
| } | |
| &:after{ | |
| width:100px; | |
| height:200%; | |
| @include animation('outerRotate2 30s infinite linear'); | |
| } | |
| .m-loader{ | |
| @include centre(); | |
| width:200px; | |
| height:200px; | |
| color:#888; | |
| text-align:center; | |
| border:5px solid lighten(#1B5F70, 15%); | |
| border-radius:100px; | |
| box-sizing:border-box; | |
| z-index:20; | |
| text-transform:uppercase; | |
| &:after{ | |
| @include centre; | |
| content:" "; | |
| display:block; | |
| background:#222; | |
| transform-origin:center; | |
| z-index:-1; | |
| } | |
| &:after{ | |
| width:100px; | |
| height:106%; | |
| @include animation('outerRotate1 15s infinite linear'); | |
| } | |
| .e-text{ | |
| @include font-size(1.4, 13); | |
| @include centre(); | |
| @include animation('textColour 1s alternate linear infinite'); | |
| display:block; | |
| width:140px; | |
| height:140px; | |
| text-align:center; | |
| border:5px solid lighten(#1B5F70, 25%); | |
| border-radius:70px; | |
| box-sizing:border-box; | |
| z-index:20; | |
| &:before, &:after{ | |
| @include centre; | |
| content:" "; | |
| display:block; | |
| background:#222; | |
| transform-origin:center; | |
| z-index:-1; | |
| } | |
| &:before{ | |
| width:110%; | |
| height:40px; | |
| @include animation('outerRotate2 3.5s infinite linear'); | |
| } | |
| &:after{ | |
| width:40px; | |
| height:110%; | |
| @include animation('outerRotate1 8s infinite linear'); | |
| } | |
| } | |
| } | |
| } | |
| #particleCanvas-White{ | |
| @include centre(); | |
| width:100%; | |
| height:50%; | |
| opacity:0.1; | |
| } | |
| #particleCanvas-Blue{ | |
| @include centre(); | |
| width:300px; | |
| height:300px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment