Glowseph Glowing Orb Loader Thing

glowseph-glowing-orb-loader-thing.markdown

Glowseph Glowing Orb Loader Thing

A Pen by Josh Ward on CodePen.

License.

index.html

<div>LOADING...</div>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.scss

@import "bourbon";
@import "neat";

$base-duration: 500ms;

// Colors
$color-1: #20293a;
$color-2: #00fcbd;
$color-3: #7400f9;

// Breakpoints
$sm: new-breakpoint(min-width 320px);
$med: new-breakpoint(min-width 768px);
$lg: new-breakpoint(min-width 1024px);

*, *:before, *:after {
	box-sizing: border-box;
	outline: none;
}

html {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 16px;
	font-smooth: auto;
	font-weight: 300;
	line-height: 1.5;
	color: #444;
}

body {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100vh;
	background-color: $color-1;
}

@mixin backlight($x, $y, $spread, $size, $color1, $color2, $duration) {
	
	&:after {
		position: absolute;
		content: "";
		top: $y;
		left: $x;
		right: 0;
		z-index: -1;
		height: 100%;
		width: 100%;
		margin: 0 auto;
		transform: scale($size);
		filter: blur($spread);
		background: linear-gradient(270deg,$color1,$color2);
		background-size: 150% 150%;
		border-radius: 50%;
		animation: glowmation $duration linear infinite;

		@keyframes glowmation {
			0%    { top: -3%;
					left: -3%;
					background-position: 0% 50%;
					background-size: 150% 150%; }
			12.5% { top: -3%;
					left: 0;
					background-size: 70% 30%; }
			25%   { top: -3%;
					left: 3%;
					background-size: 100% 50%; }
			37.5% { top: 0;
					left: 3%; 
					background-size: 70% 30%; }
			50%   { top: 3%;
					left: 3%;
					background-position: 100% 50%;
					background-size: 30% 30%; }
			62.5% { top: 3%;
					left: 0;
					background-size: 30% 70%; }
			75%   { top: 3%;
					left: -3%;
					background-size: 50% 100%; }
			87.5% { top: 0;
					left: -3%; 
					background-size: 30% 70%; }
			100%  { top: -3%;
					left: -3%;
					background-position: 0% 50%;
					background-size: 150% 150%; }
		}
	}
}

div {
	@include backlight(-5%, -5%, 5vw, 0.85, $color-2, $color-3, 10s);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 300px;
	height: 300px;
	background-color: $color-1;
	color: $color-1;
	border-radius: 50%;
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
	animation: text 10s ease infinite;

	@keyframes text {
		0%   { color: $color-3; }
		50%  { color: $color-2; }
		100% { color: $color-3; }
	}
}

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />