Rotate / Pulse Loading Animation

index.html

<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>

rotate-pulse-loading-animation.markdown

Rotate / Pulse Loading Animation

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.

License.

script.js

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
});

scripts

<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>

style.scss

$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;
}