.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    white-space: nowrap !important;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

<div class="spinner loading"></div>
<style>
.spinner {
  --spinner-color: purple;
}
.spinner.loading {
  content: "";
  display: block;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border-width: 2px;
  border-style: solid;
  border-color: var(--spinner-color) var(--spinner-color) var(--spinner-color) transparent;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

UK政府网站link

<code-demo>
<template shadowrootmode="open">
<a href="#">Buy tickeet</a>
<style>
a {
  text-decoration: underline;
  text-decoration-thickness: max(1px, .0625rem);
  text-underline-offset: .1578em;
}
a:hover {
  text-decoration-thickness: max(3px, .1875rem, .12em);
  text-decoration-skip-ink: none;
}
a:active, a:focus {
  outline: 3px solid rgba(0, 0, 0, 0);
  background-color: #fd0;
  box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
  text-decoration: none;
}
</style>
</template>
</code-demo>