SVG Animation With Blur Loading

index.html

<div class="wrapper">
	<div class="container">
		<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="" pageAlignment="none" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
		<path class="path" transform="matrix(1 0 0 1 25.00000000000002 25)" width="50" height="50" stroke="#000000" stroke-width="4" stroke-miterlimit="10" fill="none" d="M0,0 L50,0 L50,50 L0,50 L0,0 Z "/>
		<filter id="blur-filter" x="-2" y="-2" width="100" height="100">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
    </filter>
		</svg>
		<h2 class="loader">
			<span>L</span>
			<span>O</span>
			<span>A</span>
			<span>D</span>
			<span>I</span>
			<span>N</span>
			<span>G</span>
		</h2>
			</div>
	</div>

style.css

body,html {
	min-height: 100%;
	min-width: 100%;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}
body {
	background-color: #000000;
	font-family: 'Roboto Condensed', sans-serif;
}

.wrapper {
	width: 100%;
	height: 100%;
}

.container {
	width: 200px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: dash 4s linear alternate infinite;
  -webkit-box-shadow: 0px 0px 15px 5px rgba(0, 86, 151, .75);
-moz-box-shadow: 0px 0px 15px 5px rgba(0, 86, 151, .75);
box-shadow: 0px 0px 15px 5px rgba(0, 86, 151, .75);
filter: url(#blur-filter);
stroke: rgba(0, 86, 151, 1);
stroke-linecap: round;
}

.loader span {
	animation: blurFadeInOut 4s ease-in-out infinite alternate;
	color: transparent;
	text-shadow: 0px 0px 1px rgba(0, 86, 151, 1);
  opacity: 0;
}

.loader span:nth-child(2){
  animation-delay:0.15s;
}
.loader span:nth-child(3){
  animation-delay:0.30s;
}
.loader span:nth-child(4){
  animation-delay:0.45s;
}
.loader span:nth-child(5){
  animation-delay:0.60s;
}
.loader span:nth-child(6){
  animation-delay:0.75s;
}
.loader span:nth-child(7){
  animation-delay:0.90s;
}

@keyframes blurFadeInOut{
	0%{
		opacity: 0;
		text-shadow: 0px 0px 40px rgba(0, 86, 151, 1);
		/*transform: scale(0.9);*/
	}
	20%,75%{
		opacity: 1;
		text-shadow: 0px 0px 1px rgba(0, 86, 151, 1);
		transform: scale(1);
	}
	100%{
		opacity: 0;
		text-shadow: 0px 0px 50px rgba(0, 86, 151, 1);
		/*transform: scale(0);*/
	}
}

@keyframes dash {
  from {
    stroke-dashoffset: 200;
  }
  to {
    stroke-dashoffset: 0;
  }
}

SVG Animation With Blur Loading.markdown

SVG Animation With Blur Loading

A simple loading CSS animation with a SVG animated border. Something to just add a little bit of action to a page.

A Pen by Giles Papworth on CodePen.

License.