div+css实现6种不同的loading加载动画效果代码-html代码-BFW代码库

div+css实现6种不同的loading加载动画效果代码

代码语言：html

代码描述：div+css实现6种不同的loading加载动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  
  
  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&display=swap');

.uia-loader {
	--_uia-loader-size_default: 5rem; 
	--_uia-loader-main-aligment: var(--uia-loader-main-aligment, center);
	/*	
	inline-size: var(--uia-loader-main-size, var(--_uia-loader-size_default));
	block-size: var(--uia-loader-extra-size, var(--_uia-loader-size_default));
	*/
	display: var(--uia-loader-display, grid);
	gap: var(--uia-loader-caption-gap, 0.5rem);
	justify-items: var(--_uia-loader-main-aligment);
}

.uia-loader__canvas {
	--_uia-loader-canvas-size: var(--uia-loader-canvas-size, 3rem);

	box-sizing: border-box;	
	inline-size: var(--uia-loader-canvas-main-size, var(--_uia-loader-canvas-size));
	block-size: var(--uia-loader-canvas-extra-size, var(--_uia-loader-canvas-size));
	padding: var(--uia-loader-canvas-safe-gap, 0.25rem);

	display: var(--uia-loader-canvas-display, grid);
	justify-items: var(--_uia-loader-main-aligment);
	align-items: var(--uia-loader-canvas-extra-aligment, center);
}

[data-uia-loader-adapter-skin-1="ui-clippy-loader-skin-#1"] {
	--uia-clippy-loader-size: calc(var(--uia-loader-canvas-main-size) - 0.25rem);
}

[data-uia-loader-skin="1"] .uia-loader__caption {
	font-size: var(--uia-loader-caption-font-size);
	color: var(--uia-loader-caption-color);
}

.uia-clippy-loader {
	--_uia-clippy-loader-size: var(--uia-clippy-loader-size, 2rem);
	--_uia-clippy-loader-animation-name: var(--uia-clippy-loader-animation-name);
	--_uia-clippy-loader-animation-duration: var(--uia-clippy-loader-animation-duration, 2s);
	--_uia-clippy-loader-animation-fill-mode: var(--uia-clippy-loader-animation-fill-mode, both);
	--_uia-clippy-loader-animation-iteration-count: var(--uia-clippy-loader-animation-iteration-count, infinite);
	--_uia-clippy-loader-stroke: var(--uia-clippy-loader-stroke, 2px);

	box-sizing: border-box;
	inline-size: var(--_uia-clippy-loader-size);
	block-size: var(--_uia-clippy-loader-size);
	padding: var(--_uia-clippy-loader-stroke);

	background-color: var(--uia-clippy-loader-stroke-color, #222); 

	animation-name: var(--_uia-clippy-loader-animation-name);
	animation-duration: var(--_uia-clippy-loader-animation-duration);
	animation-fill-mode: var(--_uia-clippy-loader-animation-fill-mode);
	animation-iteration-count: var(--_uia-clippy-loader-animation-iteration-count);

	position: relative;
}

.uia-clippy-loader::before {
	content: "";
	position: absolute;
	inset: var(--_uia-clippy-loader-stroke);
	background-color: var(--uia-clippy-loader-background-color, #fff);.........完整代码请登录后点击上方下载按钮下载查看