customElements.define(
"spin-loading",
class extends HTMLElement {
constructor() {
super()
this.attachShadow({ mode: "open" }).innerHTML = `
<style>
#loading {
display: block;
box-sizing: border-box;
width: var(--size, 100px);
height: var(--size, 100px);
border: 0 solid transparent;
border-bottom-width: calc(var(--size) / 2);
border-right: var(--width, 6px) solid var(--color, #d4ba00);
border-radius: 50%;
animation: loading var(--speed, 0.6s) linear 0s infinite;
}
@keyframes loading{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
</style>
<div id="loading"></div>
`
}
}
)
使用例
<!doctype html>
<script src="loading.js"></script>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
width: 100vw;
height: 100vh;
background: #333;
}
spin-loading{
--size: 100px;
--speed: 0.6s;
--width: 6px;
--color: #d4ba00;
}
</style>
<spin-loading></spin-loading>
