Loading animation

      No Comments on Loading animation

Loading animation in CSS

Loading animation – CSS only

Loading animation

HTML markup

<span class="wave">
	<span>L</span>
	<span>o</span>
	<span>a</span>
	<span>d</span>
	<span>i</span>
	<span>n</span>
	<span>g</span>
</span>

CSS animations

@import url(https://fonts.googleapis.com/css?family=Roboto:300);
body
{
  background:#002266;
  padding:4%;
  text-align:center;
}
.wave span
{
               font-size:40px;
	       color:#ff8c1a;
		background:#262B37;
		box-shadow:inset 0 0 5px rgba(0,0,0,0.3), 0 5px 0 #ccc;
		padding: 0 18px;
		line-height: 100px;
                display:table-cell;
		animation:glow 2s infinite;
}
	@keyframes glow {
		0% {
			transform:translateY(0px)
		}
		50% {
			transform:translateY(-30px);
			box-shadow:0 15px 0 rgb(255, 153, 51);
		}
		100% {
			transform:translateY(0px)	
		}
	}
	.wave span:nth-child(1) {
		animation-delay:0s;
	}
	.wave span:nth-child(2) {
		animation-delay:.1s;	
	}
	.wave span:nth-child(3) {
		animation-delay:.2s;
	}
	.wave span:nth-child(4) {
		animation-delay:.3s;	
	}
	.wave span:nth-child(5) {
		animation-delay:.4s;
	}
	.wave span:nth-child(6) {
		animation-delay:.5s;	
	}
	.wave span:nth-child(7) {
		animation-delay:.6s;
	}

Demo:

See the Pen Loading animation in css by scanfcode (@scanfcode) on CodePen.

Summary
Loading animation
Article Name
Loading animation
Description
Loading animation in CSS - building animation using CSS @keyframes only. This snippet creates a infinite loading effect in CSS
Author
Publisher Name
Scanfcode
Publisher Logo

Leave a Reply

Your email address will not be published. Required fields are marked *