CSS loader

css-loader.markdown

CSS loader

An experimental loader for my website that I'll never use. I didn't care about cross-browser compatibility so if you want to use it you'll have to change some properties.

A Pen by BLVKOBLSK on CodePen.

License.

index.html

<div id="circleContainer">
	<div class="circle0 delay0"></div>
	<div class="circle0 delay1"></div>
	<div class="circle0 delay2"></div>
	<div class="circle1 delay3"></div>
	<div class="circle1 delay4"></div>
	<div class="circle1 delay5"></div>
	<div class="circle2 delay6"></div>
	<div class="circle2 delay7"></div>
	<div class="circle2 delay8"></div>
</div>
<svg width="100" height="100" id="logo" xmlns="http://www.w3.org/2000/svg">
	<path data-name="V" d="M99.302,23.0173a.7193.7193,0,0,0-.7193-.7193.7056.7056,0,0,0-.31.0766c-.103.0507-1.8937.883-5.0244,2.0355a80.72,80.72,0,0,1-13.8193,3.8227,42.81,42.81,0,0,1-11.4167.5587c-.0046-.3865,0-.7729,0-1.1594.0093-.9033.014-1.8345-.0745-2.8682L67.71,23.3951c-.5727-3.5339-1.2245-7.5382-4.5443-10.6578a5.4779,5.4779,0,0,0-3.6876-1.3317,6.1073,6.1073,0,0,0-3.8552,1.3177,9.1432,9.1432,0,0,0-3.5014,6.03c-.8148,4.8237,2.9426,8.8093,6.7792,10.4716a25.2379,25.2379,0,0,0,5.2428,1.5877c.0046.41.0093.8148.014,1.2245.0045.3487.0087.7005.011,1.0533-.3615,5.3393-.882,10.3409-1.5257,14.9865-.4935,3.1113-1.0243,5.9606-1.5072,8.414-.942,4.7233-1.8657,8.7814-2.6335,11.9527-4.96,17.488-11.5642,24.25-14.6918,16.9709-4.116-12.3526-6.4068-32.709-8.0085-50.2067C33.86,14.05,14.0839,22.1781,14.0839,22.1781c8.8856,22.053,2.7442,60.6381,15.4413,73.9033,14.0865,14.7531,33.44,3.2545,37.9327-50.7673.2941-2.7312.5379-5.6213.6849-8.6118.0674-1.0012.0554-2.0352.0213-3.0631.0318-.8051.06-1.62.0858-2.4412a45.8991,45.8991,0,0,0,11.5611-.9631A82.441,82.441,0,0,0,93.8258,25.9c3.2453-1.313,5.0239-2.2117,5.0984-2.2489l-.0047-.01A.7113.7113,0,0,0,99.302,23.0173Zm-39.2654,3.8c-2.9473-1.4247-5.62-4.3162-4.9354-7.636.2514-2.2769,2.3885-4.5071,4.3069-4.5071a2.2459,2.2459,0,0,1,1.5784.6425c2.1977,2.044,2.8216,6.1693,3.2313,9.8337.0373.7682.0093,1.5179-.0186,2.2722-.014.2794-.0233.5587-.0326.8428A22.1748,22.1748,0,0,1,60.0366,26.8173Z" transform="translate(-14.0839 -11.4057)"/>
</svg>

style.css

html, body, #circleContainer {
	width:100%;
	height:100%;
	margin:0;
}

body{
		background-color:#fff;
		overflow:hidden;
		animation:blinkBG 3s infinite;
}

.circle0, .circle1, .circle2 {
	opacity:0;
	height:160px;
	width:160px;
	transform:rotate(45deg);
	box-sizing:border-box;
	position:absolute;
	z-index:3;
	left:calc(50% - 80px);
	top:calc(50% - 80px);
}

.circle1 {
	border: 2px solid #63a1f4;
	animation : enlarge1 4.5s infinite, blink 3s infinite;
}

.circle2 {
	border: 1px solid #63a1f4;
	animation : enlarge2 4.5s infinite, blink 3s infinite;
}

.circle0 {
	border: 3px solid #63a1f4;
	animation : enlarge0 4.5s infinite, blink 3s infinite;
}

.delay0 {
	animation-delay:0s,0s;
}

.delay1 {
	animation-delay:1.5s,0s;
}

.delay2 {
	animation-delay:3s,0s;
}

.delay3 {
	animation-delay:0.05s,0s;
}

.delay4 {
	animation-delay:1.55s,0s;
}

.delay5 {
	animation-delay:3.05s,0s;
}

.delay6 {
	animation-delay:0.1s,0s;
}

.delay7 {
	animation-delay:1.6s,0s;
}

.delay8 {
	animation-delay:3.1s,0s;
}

#logo{
	position:absolute;
	opacity:1;
	left:calc(50% - 35px);
	top:calc(50% - 42px);
	animation : blinkSVG 3s infinite;
}


@keyframes enlarge0{
	0% {
		opacity:0;
		height:110px;
		width:110px;
		left:calc(50% - 55px);
		top:calc(50% - 55px);
	}
	20% {
		opacity:1;
		height:180px;
		width:180px;
		left:calc(50% - 90px);
		top:calc(50% - 90px);
	}
	38% {
		opacity:0;
	}
	100% {
		opacity:0;
		height:4200px;
		width:4200px;
		left:calc(50% - 2100px);
		top:calc(50% - 2100px);
	}
}

@keyframes enlarge1{
	0% {
		opacity:0;
		height:110px;
		width:110px;
		left:calc(50% - 55px);
		top:calc(50% - 55px);
	}
	20% {
		opacity:1;
		height:160px;
		width:160px;
		left:calc(50% - 80px);
		top:calc(50% - 80px);
	}
	38% {
		opacity:0;
	}
	100% {
		opacity:0;
		height:3000px;
		width:3000px;
		left:calc(50% - 1500px);
		top:calc(50% - 1500px);
	}
}

@keyframes enlarge2{
	0% {
		opacity:0;
		height:110px;
		width:110px;
		left:calc(50% - 55px);
		top:calc(50% - 55px);
	}
	20% {
		opacity:1;
		height:140px;
		width:140px;
		left:calc(50% - 70px);
		top:calc(50% - 70px);
	}
	38% {
		opacity:0;
	}
	100% {
		height:1800px;
		width:1800px;
		left:calc(50% - 900px);
		top:calc(50% - 900px);
	}
}

@keyframes blink{
	0%{
		border-color:#63a1f4;
		border-radius:0;
	}
	40%{
		border-color:#63a1f4;
		border-radius:0;
	}
	50%{
		border-color:#fff;
		border-radius:50%;
	}
	90% {
		border-color:#fff;
		border-radius:50%;
	}
	100%{
		border-color:#63a1f4;
		border-radius:0;
	}
}

@keyframes blinkBG{
	0%{
		background-color:#fff;
	}
	40%{
		background-color:#fff;
	}
	50%{
		background-color:#63a1f4;
	}
	90% {
		background-color:#63a1f4;
	}
	100%{
		background-color:#fff;
	}
}

@keyframes blinkSVG{
	0%{
		fill:#63a1f4;
	}
	40%{
		fill:#63a1f4;
	}
	50%{
		fill:#fff;
	}
	90% {
		fill:#fff;
	}
	100%{
		fill:#63a1f4;
	}
}