css实现6种loading加载动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现6种loading加载动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  


  
  
<style>
.loader {
	--color: white;
	--size-mid: 6vmin;
	--size-dot: 1.5vmin;
	--size-bar: 0.4vmin;
	--size-square: 3vmin;
	
	display: block;
	position: relative;
	width: 50%;
	display: grid;
	place-items: center;
}

.loader::before,
.loader::after {
	content: '';
	box-sizing: border-box;
	position: absolute;
}

/**
	loader --1
**/
.loader.--1::before {
	width: var(--size-mid);
	height: var(--size-mid);
	border: 4px solid var(--color);
	border-top-color: transparent;
	border-radius: 50%;
	-webkit-animation: loader-1 1s linear infinite;
	        animation: loader-1 1s linear infinite;
}

.loader.--1::after {
	width: calc(var(--size-mid) - 2px);
	height: calc(var(--size-mid) - 2px);
	border: 2px solid transparent;
	border-top-color: var(--color);
	border-radius: 50%;
	animation: loader-1 0.6s linear reverse infinite;
}

@-webkit-keyframes loader-1 {
	100% {
		transform: rotate(1turn);
	}
}

@keyframes loader-1 {
	100% {
		transform: rotate(1turn);
	}
}

/**
	loader --2
**/
.loader.--2::before,
.loader.--2::after {
	width: var(--size-dot);
	height: var(--size-dot);
	background-color: var(--color);
	border-radius: 50%;
	opacity: 0;
	-webkit-animation: loader-2 0.8s cubic-bezier(0.2, 0.32, 0, 0.87) infinite;
	        animation: loader-2 0.8s cubic-bezier(0.2, 0.32, 0, 0.87) infinite;
}

.loader.--2::after {
	-webkit-animation-delay: 0.3s;
	        animation-delay: 0.3s;
}

@-webkit-keyframes loader-2 {
	0%, 80%, 100% {
		opacity: 0;
	}
	
	33% {
		opacity: 1;
	}
	
	0%, 100% {
		transform: translateX(-4vmin);
	}
	
	90% {
		transform: translateX(4vmin);
	}
}

@keyframes loader-2 {
	0%, 80%, 100% {
		opacity: 0;
	}
	
	33% {
		opacity: 1;
	}
	
	0%, 100% {
		transform: translateX(-4vmin);
	}
	
	90% {
		transform: translateX(4vmin);
	}
}

/**
	loader --3
**/
.loader.--3::before,
.loader.--3::after {
	width: var(--size-dot);
	height: var(--size-dot);
	background-color: var(--color);
	border-radius: 50%;
	-webkit-animation: loader-3 1.2s ease-in-out infinite;
	        animation: loader-3 1.2s ease-in-out infinite;
}

.loader.--3::before {
	left: calc(50% - 1.6vmin - var(--size-dot));
}

.loader.--3::after {
	left: calc(50% + 1.6vmin);
	-webkit-animation-delay: -0.4s;
	        animation-delay: -0.4s;
}

@-webkit-keyframes loader-3 {
	0%, 100% {
		transform: translateY(-2.6vmin);
	}
	
	44% {
		transform: translateY(2.6vmin);
	}
}

@keyframes loader-3 {
	0%, 100% {
		transform: translateY(-2.6vmin);
	}
	
	44% {
		transform: translateY(2.6vmin);
	}
}

/**
	loader --4
**/
.loader.--4::before {
	height: var(--size-bar);
	width: 6vmin;
	background-color: var(--color);
	-webkit-animation: loader-4 0.8s cubic-bezier(0, 0, 0.03, 0.9) infinite;
	        animation: loader-4 0.8s cubic-bezier(0, 0, 0.03, 0.9) infinite;
}

@-webkit-keyframes loader-4 {
	0%, 44%, 88.1%, 100% {
		transform-origin: left;
	}
	
	0%, 100%, 88% {
		transform: scaleX(0);
	}
	
	44.1%, 88% {
		transform-origin: right;
	}
	
	33%, 44% {
		transform: scaleX(1);
	}
}

@keyframes loader-4 {
	0%, 44%, 88.1%, 100% {
		transform-origin: left;
	}
	
	0%, 100%, 88% {
		transform: scaleX(0);
	}
	
	44.1%, 88% {
		transform-origin: right;
	}
	
	33%, 44% {
		transform: scaleX(1);
	}
}

/**
	loader --5
**/
.loader.--5::before,
.loader.--5::after {
	height: 3vmin;
	width: var(--size-bar);
	background-color: var(--color);
	-webkit-animation: loader-5 0.6s cubic-bezier(0, 0, 0.03, 0.9) infinite;
	        animation: loader-5 0.6s cubic-bezier(0, 0, 0.03, 0.9) infinite;
}

.loader.--5::before {
	left: calc(50% - 1vmin);
	top: calc(50% - 3vmin);
}

.loader.--5::after {
	left: calc(50% + 1vmin);
	top: calc(50% - 1vmin);
	-webkit-animation-delay: 0.2s;
	        animation-delay: 0.2s;
}

@-webkit-keyframes loader-5 {
	0%, 88%, 100% {
		opacity: 0;
	}
	
	0%, 44%, 88.1%, 100% {
		transform-origin: top;
	}
	
	0% {
		transform: translateY(-6vmin);
	}
	
	44.1%, 88% {
		transform-origin: bottom;
	}
	
	33% {
		opacity: 1;
	}
	
	33%, 88% {
		transform: translateY(3vmin);
	}
}

@keyframes loader-5 {
	0%, 88%, 100% {
		opacity: 0;
	}
	
	0%, 44%, 88.1%, 100% {
		transform-origin: top;
	}
	
	0% {
		transform: translateY(-6vmin);
	}
	
	44.1%, 88% {
		transform-origin: bottom;
	}
	
	33% {
		opacity: 1;
	}
	
	33%, 88% {
		transform: translateY(3vmin);
	}
}

/**
	loader --6
**/
.loader.--6::before {
	width: var(--size-square);
	height: var(--size-square);
	background-color: var(--color);
	top: calc(50% - var(--size-square));
	left: calc(50% - var(--size-square));
	-webkit-animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
	        animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
}

@-webkit-keyframes loader-6 {
	0%, 100% {
		transform: none;
	}
	
	25% {
		transform: translateX(100%);
	}
	
	50% {
		transform: translateX(100%) translateY(100%);
	}
	
	75% {
		transform: translateY(100%);
	}
}

@keyframes loader-6 {
	0%, 100% {
		transform: none;
	}
	
	25% {
		transform: translateX(100%);
	}
	
	50% {
		transform: translateX(100%) translateY(100%);
	}
	
	75% {
		transform: translateY(100%);
	}
}

/**
	loader --7
**/
.loader.--7::before.........完整代码请登录后点击上方下载按钮下载查看