CSS Icon Loaders

Last Updated:

January 22, 2023

CSS icon loader can be used to improve website performance and user experience by ensuring that all styling and formatting is loaded before the user interacts with the website.

Animated icon loaders HTML CSS

<div class="loaders-container-02">
  <div>
      <span class="icon-loader-1"></span>
  </div>
  <div>
      <span class="icon-loader-2"></span>
  </div>
  <div>
      <span class="icon-loader-3"></span>
  </div>
  <div>
      <span class="icon-loader-4"></span>
  </div>
  <div>
      <span class="icon-loader-5"></span>
  </div>
  <div>
      <span class="icon-loader-6"></span>
  </div>
  <div>
      <span class="icon-loader-7"></span>
  </div>
  <div>
      <span class="icon-loader-8"></span>
  </div>
</div>

.icon-loader-1 {
  width: 175px;
  height: 80px;
  background-image: radial-gradient(
      circle 25px at 25px 25px,
      #fff 100%,
      transparent 0
    ),
    radial-gradient(circle 50px at 50px 50px, #fff 100%, transparent 0),
    radial-gradient(circle 25px at 25px 25px, #fff 100%, transparent 0),
    linear-gradient(#fff 50px, transparent 0);
  background-size: 50px 50px, 100px 76px, 50px 50px, 120px 40px;
  background-position: 0px 30px, 37px 0px, 122px 30px, 25px 40px;
  background-repeat: no-repeat;
  position: relative;
  display: inline-block;
}
.icon-loader-1::after {
  content: "";
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 0);
  position: absolute;
  border: 15px solid transparent;
  border-top-color: #ff3d00;
  -webkit-animation: fadePush 1s linear infinite;
  animation: fadePush 1s linear infinite;
}
.icon-loader-1::before {
  content: "";
  left: 50%;
  bottom: 30px;
  transform: translate(-50%, 0);
  position: absolute;
  width: 15px;
  height: 15px;
  background: #ff3d00;
  -webkit-animation: fadePush 1s linear infinite;
  animation: fadePush 1s linear infinite;
}

.icon-loader-2 {
  width: 175px;
  height: 80px;
  background-image: radial-gradient(
      circle 25px at 25px 25px,
      #fff 100%,
      transparent 0
    ),
    radial-gradient(circle 50px at 50px 50px, #fff 100%, transparent 0),
    radial-gradient(circle 25px at 25px 25px, #fff 100%, transparent 0),
    linear-gradient(#fff 50px, transparent 0);
  background-size: 50px 50px, 100px 76px, 50px 50px, 120px 40px;
  background-position: 0px 30px, 37px 0px, 122px 30px, 25px 40px;
  background-repeat: no-repeat;
  position: relative;
  display: inline-block;
}
.icon-loader-2::after {
  content: "";
  left: 50%;
  bottom: 30px;
  transform: translate(-50%, 0);
  position: absolute;
  border: 15px solid transparent;
  border-bottom-color: #ff3d00;
  -webkit-animation: fadePull 1s linear infinite;
  animation: fadePull 1s linear infinite;
}
.icon-loader-2::before {
  content: "";
  left: 50%;
  bottom: 15px;
  transform: translate(-50%, 0);
  position: absolute;
  width: 15px;
  height: 15px;
  background: #ff3d00;
  -webkit-animation: fadePull 1s linear infinite;
  animation: fadePull 1s linear infinite;
}

.icon-loader-3 {
  width: 60px;
  height: 60px;
  display: inline-block;
  position: relative;
  background: radial-gradient(ellipse at center, #fff 69%, rgba(0, 0, 0, 0) 70%),
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0) 47%,
      #fff 48%,
      #fff 52%,
      rgba(0, 0, 0, 0) 53%
    );
  background-size: 20px 20px, 20px auto;
  background-repeat: repeat-x;
  background-position: center bottom, center -5px;
}
.icon-loader-3::before,
.icon-loader-3::after {
  content: "";
  position: absolute;
  left: -20px;
  top: 0;
  width: 20px;
  height: 60px;
  background: radial-gradient(ellipse at center, #fff 69%, rgba(0, 0, 0, 0) 70%),
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0) 47%,
      #fff 48%,
      #fff 52%,
      rgba(0, 0, 0, 0) 53%
    );
  background-size: 20px 20px, 20px auto;
  background-repeat: no-repeat;
  background-position: center bottom, center -5px;
  transform: rotate(0deg);
  transform-origin: 50% 0%;
  -webkit-animation: animPend 1s linear infinite alternate;
  animation: animPend 1s linear infinite alternate;
}
.icon-loader-3::after {
  -webkit-animation: animPend2 1s linear infinite alternate;
  animation: animPend2 1s linear infinite alternate;
  left: 100%;
}

.icon-loader-4 {
  width: 48px;
  height: 48px;
  display: inline-block;
  position: relative;
}
.icon-loader-4::after {
  content: "";
  width: 48px;
  height: 48px;
  left: 0;
  bottom: 0;
  position: absolute;
  border-radius: 50% 50% 0;
  border: 15px solid #fff;
  transform: rotate(45deg) translate(0, 0);
  -webkit-animation: animMarker 0.4s ease-in-out infinite alternate;
  animation: animMarker 0.4s ease-in-out infinite alternate;
}
.icon-loader-4::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 150%;
  width: 24px;
  height: 4px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  -webkit-animation: animShadow 0.4s ease-in-out infinite alternate;
  animation: animShadow 0.4s ease-in-out infinite alternate;
}
.icon-loader-5 {
  width: 48px;
  height: 48px;
  display: inline-block;
  position: relative;
  border: 3px solid #fff;
  border-radius: 50%;
  -webkit-animation: animloader94 2s linear infinite;
  animation: animloader94 2s linear infinite;
}
.icon-loader-5::after {
  content: "";
  width: 6px;
  height: 24px;
  background: #fff;
  transform: rotate(-45deg);
  position: absolute;
  bottom: -20px;
  left: 46px;
}
.icon-loader-6 {
  width: 175px;
  height: 80px;
  position: relative;
  display: inline-block;
}
.icon-loader-6::before {
  content: "";
  left: 60px;
  bottom: 18px;
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #fff;
  background-image: radial-gradient(
      circle 8px at 18px 18px,
      #263238 100%,
      transparent 0
    ),
    radial-gradient(circle 4px at 18px 0px, #263238 100%, transparent 0),
    radial-gradient(circle 4px at 0px 18px, #263238 100%, transparent 0),
    radial-gradient(circle 4px at 36px 18px, #263238 100%, transparent 0),
    radial-gradient(circle 4px at 18px 36px, #263238 100%, transparent 0),
    radial-gradient(circle 4px at 30px 5px, #263238 100%, transparent 0),
    radial-gradient(circle 4px at 30px 5px, #263238 100%, transparent 0),
    radial-gradient(circle 4px at 30px 30px, #263238 100%, transparent 0),
    radial-gradient(circle 4px at 5px 30px, #263238 100%, transparent 0),
    radial-gradient(circle 4px at 5px 5px, #263238 100%, transparent 0);
  background-repeat: no-repeat;
  -webkit-animation: rotationBack 3s linear infinite;
  animation: rotationBack 3s linear infinite;
}
.icon-loader-6::after {
  content: "";
  left: 94px;
  bottom: 15px;
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #fff;
  background-image: radial-gradient(
      circle 5px at 12px 12px,
      #263238 100%,
      transparent 0
    ),
    radial-gradient(circle 2.5px at 12px 0px, #263238 100%, transparent 0),
    radial-gradient(circle 2.5px at 0px 12px, #263238 100%, transparent 0),
    radial-gradient(circle 2.5px at 24px 12px, #263238 100%, transparent 0),
    radial-gradient(circle 2.5px at 12px 24px, #263238 100%, transparent 0),
    radial-gradient(circle 2.5px at 20px 3px, #263238 100%, transparent 0),
    radial-gradient(circle 2.5px at 20px 3px, #263238 100%, transparent 0),
    radial-gradient(circle 2.5px at 20px 20px, #263238 100%, transparent 0),
    radial-gradient(circle 2.5px at 3px 20px, #263238 100%, transparent 0),
    radial-gradient(circle 2.5px at 3px 3px, #263238 100%, transparent 0);
  background-repeat: no-repeat;
  animation: rotationBack 4s linear infinite reverse;
}

.icon-loader-7 {
  width: 48px;
  height: 12px;
  background: #fff;
  display: inline-block;
  position: relative;
}
.icon-loader-7::after {
  content: "";
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 0);
  position: absolute;
  border: 15px solid transparent;
  border-top-color: #fff;
  -webkit-animation: bump 0.4s ease-in-out infinite alternate;
  animation: bump 0.4s ease-in-out infinite alternate;
}
.icon-loader-7::before {
  content: "";
  left: 50%;
  bottom: 25px;
  transform: translate(-50%, 0);
  position: absolute;
  width: 15px;
  height: 20px;
  background: #fff;
  -webkit-animation: bump 0.4s ease-in-out infinite alternate;
  animation: bump 0.4s ease-in-out infinite alternate;
}
.icon-loader-8 {
  width: 48px;
  height: 12px;
  background: #fff;
  display: inline-block;
  position: relative;
}
.icon-loader-8::after {
  content: "";
  left: 50%;
  top: -47px;
  transform: translate(-50%, 0);
  position: absolute;
  border: 15px solid transparent;
  border-bottom-color: #fff;
  -webkit-animation: bump 0.4s ease-in-out infinite alternate;
  animation: bump 0.4s ease-in-out infinite alternate;
}
.icon-loader-8::before {
  content: "";
  left: 50%;
  bottom: 15px;
  transform: translate(-50%, 0);
  position: absolute;
  width: 15px;
  height: 20px;
  background: #fff;
  -webkit-animation: bump 0.4s ease-in-out infinite alternate;
  animation: bump 0.4s ease-in-out infinite alternate;
}
@-webkit-keyframes fadePush {
  0% {
    transform: translate(-50%, -15px);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, 0px);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 15px);
    opacity: 0;
  }
}
@keyframes fadePush {
  0% {
    transform: translate(-50%, -15px);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, 0px);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 15px);
    opacity: 0;
  }
}

@-webkit-keyframes fadePull {
  0% {
    transform: translate(-50%, 15px);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, 0px);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -15px);
    opacity: 0;
  }
}
@keyframes fadePull {
  0% {
    transform: translate(-50%, 15px);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, 0px);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -15px);
    opacity: 0;
  }
}

@-webkit-keyframes animPend {
  0% {
    transform: rotate(22deg);
  }
  50% {
    transform: rotate(0deg);
  }
}
@keyframes animPend {
  0% {
    transform: rotate(22deg);
  }
  50% {
    transform: rotate(0deg);
  }
}
@-webkit-keyframes animPend2 {
  0%,
  55% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-22deg);
  }
}
@keyframes animPend2 {
  0%,
  55% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-22deg);
  }
}

@-webkit-keyframes animMarker {
  0% {
    transform: rotate(45deg) translate(5px, 5px);
  }
  100% {
    transform: rotate(45deg) translate(-5px, -5px);
  }
}
@keyframes animMarker {
  0% {
    transform: rotate(45deg) translate(5px, 5px);
  }
  100% {
    transform: rotate(45deg) translate(-5px, -5px);
  }
}

@-webkit-keyframes animloader94 {
  0% {
    transform: translate(-10px, -10px);
  }
  25% {
    transform: translate(-10px, 10px);
  }
  50% {
    transform: translate(10px, 10px);
  }
  75% {
    transform: translate(10px, -10px);
  }
  100% {
    transform: translate(-10px, -10px);
  }
}
@keyframes animloader94 {
  0% {
    transform: translate(-10px, -10px);
  }
  25% {
    transform: translate(-10px, 10px);
  }
  50% {
    transform: translate(10px, 10px);
  }
  75% {
    transform: translate(10px, -10px);
  }
  100% {
    transform: translate(-10px, -10px);
  }
}

@-webkit-keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@-webkit-keyframes bump {
  0% {
    transform: translate(-50%, 5px);
  }
  100% {
    transform: translate(-50%, -5px);
  }
}
@keyframes bump {
  0% {
    transform: translate(-50%, 5px);
  }
  100% {
    transform: translate(-50%, -5px);
  }
}

.icon-loader-1 {
	width: 175px;
	height: 80px;
	background-image: radial-gradient( circle 25px at 25px 25px, #fff 100%, transparent 0 ), radial-gradient(circle 50px at 50px 50px, #fff 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #fff 100%, transparent 0), linear-gradient(#fff 50px, transparent 0);
	background-size: 50px 50px, 100px 76px, 50px 50px, 120px 40px;
	background-position: 0px 30px, 37px 0px, 122px 30px, 25px 40px;
	background-repeat: no-repeat;
	position: relative;
	display: inline-block;
	&::after {
		content: "";
		left: 50%;
		bottom: 0;
		transform: translate(-50%, 0);
		position: absolute;
		border: 15px solid transparent;
		border-top-color: #ff3d00;
		-webkit-animation: fadePush 1s linear infinite;
		animation: fadePush 1s linear infinite;
	}
	&::before {
		content: "";
		left: 50%;
		bottom: 30px;
		transform: translate(-50%, 0);
		position: absolute;
		width: 15px;
		height: 15px;
		background: #ff3d00;
		-webkit-animation: fadePush 1s linear infinite;
		animation: fadePush 1s linear infinite;
	}
}
.icon-loader-2 {
	width: 175px;
	height: 80px;
	background-image: radial-gradient( circle 25px at 25px 25px, #fff 100%, transparent 0 ), radial-gradient(circle 50px at 50px 50px, #fff 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #fff 100%, transparent 0), linear-gradient(#fff 50px, transparent 0);
	background-size: 50px 50px, 100px 76px, 50px 50px, 120px 40px;
	background-position: 0px 30px, 37px 0px, 122px 30px, 25px 40px;
	background-repeat: no-repeat;
	position: relative;
	display: inline-block;
	&::after {
		content: "";
		left: 50%;
		bottom: 30px;
		transform: translate(-50%, 0);
		position: absolute;
		border: 15px solid transparent;
		border-bottom-color: #ff3d00;
		-webkit-animation: fadePull 1s linear infinite;
		animation: fadePull 1s linear infinite;
	}
	&::before {
		content: "";
		left: 50%;
		bottom: 15px;
		transform: translate(-50%, 0);
		position: absolute;
		width: 15px;
		height: 15px;
		background: #ff3d00;
		-webkit-animation: fadePull 1s linear infinite;
		animation: fadePull 1s linear infinite;
	}
}
.icon-loader-3 {
	width: 60px;
	height: 60px;
	display: inline-block;
	position: relative;
	background: radial-gradient(ellipse at center, #fff 69%, rgba(0, 0, 0, 0) 70%), linear-gradient( to right, rgba(0, 0, 0, 0) 47%, #fff 48%, #fff 52%, rgba(0, 0, 0, 0) 53% );
	background-size: 20px 20px, 20px auto;
	background-repeat: repeat-x;
	background-position: center bottom, center -5px;
	&::before {
		content: "";
		position: absolute;
		left: -20px;
		top: 0;
		width: 20px;
		height: 60px;
		background: radial-gradient(ellipse at center, #fff 69%, rgba(0, 0, 0, 0) 70%), linear-gradient( to right, rgba(0, 0, 0, 0) 47%, #fff 48%, #fff 52%, rgba(0, 0, 0, 0) 53% );
		background-size: 20px 20px, 20px auto;
		background-repeat: no-repeat;
		background-position: center bottom, center -5px;
		transform: rotate(0deg);
		transform-origin: 50% 0%;
		-webkit-animation: animPend 1s linear infinite alternate;
		animation: animPend 1s linear infinite alternate;
	}
	&::after {
		content: "";
		position: absolute;
		left: -20px;
		top: 0;
		width: 20px;
		height: 60px;
		background: radial-gradient(ellipse at center, #fff 69%, rgba(0, 0, 0, 0) 70%), linear-gradient( to right, rgba(0, 0, 0, 0) 47%, #fff 48%, #fff 52%, rgba(0, 0, 0, 0) 53% );
		background-size: 20px 20px, 20px auto;
		background-repeat: no-repeat;
		background-position: center bottom, center -5px;
		transform: rotate(0deg);
		transform-origin: 50% 0%;
		-webkit-animation: animPend 1s linear infinite alternate;
		animation: animPend 1s linear infinite alternate;
		-webkit-animation: animPend2 1s linear infinite alternate;
		animation: animPend2 1s linear infinite alternate;
		left: 100%;
	}
}
.icon-loader-4 {
	width: 48px;
	height: 48px;
	display: inline-block;
	position: relative;
	&::after {
		content: "";
		width: 48px;
		height: 48px;
		left: 0;
		bottom: 0;
		position: absolute;
		border-radius: 50% 50% 0;
		border: 15px solid #fff;
		transform: rotate(45deg) translate(0, 0);
		-webkit-animation: animMarker 0.4s ease-in-out infinite alternate;
		animation: animMarker 0.4s ease-in-out infinite alternate;
	}
	&::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		top: 150%;
		width: 24px;
		height: 4px;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.2);
		-webkit-animation: animShadow 0.4s ease-in-out infinite alternate;
		animation: animShadow 0.4s ease-in-out infinite alternate;
	}
}
.icon-loader-5 {
	width: 48px;
	height: 48px;
	display: inline-block;
	position: relative;
	border: 3px solid #fff;
	border-radius: 50%;
	-webkit-animation: animloader94 2s linear infinite;
	animation: animloader94 2s linear infinite;
	&::after {
		content: "";
		width: 6px;
		height: 24px;
		background: #fff;
		transform: rotate(-45deg);
		position: absolute;
		bottom: -20px;
		left: 46px;
	}
}
.icon-loader-6 {
	width: 175px;
	height: 80px;
	position: relative;
	display: inline-block;
	&::before {
		content: "";
		left: 60px;
		bottom: 18px;
		position: absolute;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		background-color: #fff;
		background-image: radial-gradient( circle 8px at 18px 18px, #263238 100%, transparent 0 ), radial-gradient(circle 4px at 18px 0px, #263238 100%, transparent 0), radial-gradient(circle 4px at 0px 18px, #263238 100%, transparent 0), radial-gradient(circle 4px at 36px 18px, #263238 100%, transparent 0), radial-gradient(circle 4px at 18px 36px, #263238 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, #263238 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, #263238 100%, transparent 0), radial-gradient(circle 4px at 30px 30px, #263238 100%, transparent 0), radial-gradient(circle 4px at 5px 30px, #263238 100%, transparent 0), radial-gradient(circle 4px at 5px 5px, #263238 100%, transparent 0);
		background-repeat: no-repeat;
		-webkit-animation: rotationBack 3s linear infinite;
		animation: rotationBack 3s linear infinite;
	}
	&::after {
		content: "";
		left: 94px;
		bottom: 15px;
		position: absolute;
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background-color: #fff;
		background-image: radial-gradient( circle 5px at 12px 12px, #263238 100%, transparent 0 ), radial-gradient(circle 2.5px at 12px 0px, #263238 100%, transparent 0), radial-gradient(circle 2.5px at 0px 12px, #263238 100%, transparent 0), radial-gradient(circle 2.5px at 24px 12px, #263238 100%, transparent 0), radial-gradient(circle 2.5px at 12px 24px, #263238 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, #263238 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, #263238 100%, transparent 0), radial-gradient(circle 2.5px at 20px 20px, #263238 100%, transparent 0), radial-gradient(circle 2.5px at 3px 20px, #263238 100%, transparent 0), radial-gradient(circle 2.5px at 3px 3px, #263238 100%, transparent 0);
		background-repeat: no-repeat;
		animation: rotationBack 4s linear infinite reverse;
	}
}
.icon-loader-7 {
	width: 48px;
	height: 12px;
	background: #fff;
	display: inline-block;
	position: relative;
	&::after {
		content: "";
		left: 50%;
		bottom: 0;
		transform: translate(-50%, 0);
		position: absolute;
		border: 15px solid transparent;
		border-top-color: #fff;
		-webkit-animation: bump 0.4s ease-in-out infinite alternate;
		animation: bump 0.4s ease-in-out infinite alternate;
	}
	&::before {
		content: "";
		left: 50%;
		bottom: 25px;
		transform: translate(-50%, 0);
		position: absolute;
		width: 15px;
		height: 20px;
		background: #fff;
		-webkit-animation: bump 0.4s ease-in-out infinite alternate;
		animation: bump 0.4s ease-in-out infinite alternate;
	}
}
.icon-loader-8 {
	width: 48px;
	height: 12px;
	background: #fff;
	display: inline-block;
	position: relative;
	&::after {
		content: "";
		left: 50%;
		top: -47px;
		transform: translate(-50%, 0);
		position: absolute;
		border: 15px solid transparent;
		border-bottom-color: #fff;
		-webkit-animation: bump 0.4s ease-in-out infinite alternate;
		animation: bump 0.4s ease-in-out infinite alternate;
	}
	&::before {
		content: "";
		left: 50%;
		bottom: 15px;
		transform: translate(-50%, 0);
		position: absolute;
		width: 15px;
		height: 20px;
		background: #fff;
		-webkit-animation: bump 0.4s ease-in-out infinite alternate;
		animation: bump 0.4s ease-in-out infinite alternate;
	}
}
@-webkit-keyframes fadePush {
  0% {
    transform: translate(-50%, -15px);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, 0px);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 15px);
    opacity: 0;
  }
}
@keyframes fadePush {
  0% {
    transform: translate(-50%, -15px);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, 0px);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 15px);
    opacity: 0;
  }
}

@-webkit-keyframes fadePull {
  0% {
    transform: translate(-50%, 15px);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, 0px);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -15px);
    opacity: 0;
  }
}
@keyframes fadePull {
  0% {
    transform: translate(-50%, 15px);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, 0px);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -15px);
    opacity: 0;
  }
}

@-webkit-keyframes animPend {
  0% {
    transform: rotate(22deg);
  }
  50% {
    transform: rotate(0deg);
  }
}
@keyframes animPend {
  0% {
    transform: rotate(22deg);
  }
  50% {
    transform: rotate(0deg);
  }
}
@-webkit-keyframes animPend2 {
  0%,
  55% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-22deg);
  }
}
@keyframes animPend2 {
  0%,
  55% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-22deg);
  }
}

@-webkit-keyframes animMarker {
  0% {
    transform: rotate(45deg) translate(5px, 5px);
  }
  100% {
    transform: rotate(45deg) translate(-5px, -5px);
  }
}
@keyframes animMarker {
  0% {
    transform: rotate(45deg) translate(5px, 5px);
  }
  100% {
    transform: rotate(45deg) translate(-5px, -5px);
  }
}

@-webkit-keyframes animloader94 {
  0% {
    transform: translate(-10px, -10px);
  }
  25% {
    transform: translate(-10px, 10px);
  }
  50% {
    transform: translate(10px, 10px);
  }
  75% {
    transform: translate(10px, -10px);
  }
  100% {
    transform: translate(-10px, -10px);
  }
}
@keyframes animloader94 {
  0% {
    transform: translate(-10px, -10px);
  }
  25% {
    transform: translate(-10px, 10px);
  }
  50% {
    transform: translate(10px, 10px);
  }
  75% {
    transform: translate(10px, -10px);
  }
  100% {
    transform: translate(-10px, -10px);
  }
}

@-webkit-keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@-webkit-keyframes bump {
  0% {
    transform: translate(-50%, 5px);
  }
  100% {
    transform: translate(-50%, -5px);
  }
}
@keyframes bump {
  0% {
    transform: translate(-50%, 5px);
  }
  100% {
    transform: translate(-50%, -5px);
  }
}

CSS SVG Loaders

CSS Pulse Loaders

CSS Icon Loaders

Animated icon loaders HTML CSS

Related Snippets