js编写一个自定义loading加载组件ui-loader效果代码-html代码-BFW代码库

js编写一个自定义loading加载组件ui-loader效果代码

代码语言：html

代码描述：js编写一个自定义loading加载组件ui-loader效果代码，通过一段js代码实现在html使用自定义的html组件效果。

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


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

<head>

  <meta charset="UTF-8">

  


</head>

<body>
  <ui-loader></ui-loader>

  
      <script>
const template = `
	<style>
		:host {
			--size: 40px;
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background-color: #fde0ca;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.isometric {
			position: relative;
			transform: rotateX(55deg) rotateZ(-45deg) translate(calc(var(--size) * -2), 0);
			margin-bottom: calc(3 * var(--size));
		}
		.box {
			position: absolute;
			width: var(--size);
			height: var(--size);
			background: #f9ae57;
			animation: slide .9s cubic-bezier(.65,.53,.59,.93) infinite;
		}
		.box:before, .box:after {
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
		}
		.box:before {
			background: #040571;
			transform: skew(0deg, -45deg);
			right: 100%;
			top: 50%;
		}
		.box:after {
			background: #ff5e62;
			transform: skew(-45deg, 0deg);
			top: 100%;
			right: 50%;
		}
		.box:nth-child(1) {
			--sx: 50%;
			--ex: 150%;
			--sy: -50%;
			--ey: 50%;
		}
		.box:nth-child(2) {
			--sx: -50%;
			--sy: -50%;
			--ex: 50%;
			--ey: -50%;
		}
		.box:nth-child(3) {
			--sx: 150%;
			--sy: 50%;
			--ex: 5.........完整代码请登录后点击上方下载按钮下载查看