纯css实现加载动画

html 复制代码

<button></button>
<svg xmlns="http://www.w3.org/2000/svg" id="svg8" version="1.1" viewBox="0 0 40 14">

    <rect id="load" stroke-width="0" x="0" y="0"   height="9" width="40"/>
    
    <path id="mask" d="M0 0v14h40V0zm9 2.64c.44 0 .84.08 1.2.22.36.15.64.37.86.66.22.3.35.61.39.96.04.34.06.94.06 1.8v1.44c0 .84-.02 1.43-.06 1.78a1.99 1.99 0 01-1.21 1.62c-.36.16-.78.24-1.25.24a3.2 3.2 0 01-1.2-.22 2 2 0 01-1.25-1.62c-.04-.34-.06-.94-.06-1.8V6.28c0-.84.02-1.43.05-1.78a2.02 2.02 0 011.22-1.63c.36-.15.77-.23 1.24-.23zm25.73 0c.63 0 1.16.13 1.58.4.42.26.7.57.83.93.12.36.19.88.19 1.57v.36h-2.18v-.76c0-.48-.02-.78-.06-.9-.04-.12-.14-.18-.3-.18-.13 0-.22.05-.27.15-.05.1-.07.37-.07.8v4.01c0 .38.02.63.07.75.05.11.15.17.29.17.16 0 .27-.06.32-.2.06-.13.09-.4.09-.78v-1h-.44V6.7h2.55v4.5h-1.37l-.2-.6c-.15.25-.34.45-.57.58-.22.13-.49.19-.8.19a2.1 2.1 0 01-1.74-.93 2.09 2.09 0 01-.32-.82 9.97 9.97 0 01-.06-1.3V5.84c0-.8.05-1.38.13-1.74.09-.36.33-.7.74-1 .41-.3.94-.45 1.59-.45zm-32.06.18h2.18V9.5h1.32v1.67h-3.5zm10.27 0h3.14l1.25 8.36H15.1l-.1-1.5h-.79l-.13 1.5h-2.25zm4.76 0h1.63c1.05 0 1.76.05 2.13.14a1.5 1.5 0 011.2 1.21c.05.27.08.8.08 1.6V8.7c0 .75-.04 1.25-.11 1.5-.07.26-.2.46-.37.6-.17.14-.39.24-.65.3s-.65.08-1.17.08H17.7zm5.85 0h2.18v8.36h-2.18zm3.06 0h1.82l1.22 3.76V2.82h1.82v8.36h-1.91l-1.13-3.8v3.8H26.6zM9 4.06a.3.3 0 00-.27.13c-.06.09-.09.35-.09.78v3.9c0 .49.02.79.06.9.04.12.13.17.28.17.15 0 .24-.06.28-.2.04-.12.06-.44.06-.93V4.97c0-.4-.02-.64-.06-.75-.04-.1-.13-.16-.27-.16zm10.87.19v5.5c.3 0 .5-.06.57-.18.08-.13.11-.47.11-1.03V5.29c0-.38 0-.62-.03-.73a.34.34 0 00-.17-.23 1.04 1.04 0 00-.48-.08zm-5.28.44c-.22 1.6-.36 2.77-.41 3.5h.74a98.4 98.4 0 01-.33-3.5z" />
    
    <g id="outline" >
      <path   d="M4.85 2.82V9.5h1.32v1.67h-3.5V2.82z"/>
      <path   d="M11.51 7.72q0 1.26-.06 1.78-.06.53-.37.96-.31.43-.85.67-.53.23-1.24.23-.67 0-1.2-.22-.54-.22-.86-.66-.33-.44-.4-.96-.05-.51-.05-1.8V6.28q0-1.26.05-1.78.07-.53.38-.96.31-.43.84-.67.53-.23 1.24-.23.67 0 1.2.22.54.22.87.66.33.44.39.96.06.51.06 1.8zM9.33 4.97q0-.59-.06-.75-.07-.16-.27-.16-.17 0-.26.13t-.09.78v3.9q0 .73.06.9.06.17.28.17.22 0 .28-.2.06-.19.06-.93z"/>
      <path   d="M16.08 2.82l1.25 8.36H15.1l-.1-1.5h-.79l-.13 1.5h-2.25l1.1-8.36zM14.93 8.2q-.16-1.42-.33-3.51-.33 2.4-.41 3.5z"/>
      <path  d="M17.7 2.82h1.63q1.57 0 2.13.14.56.15.84.48.3.33.37.74.07.4.07 1.59V8.7q0 1.12-.11 1.5-.1.38-.37.6-.26.21-.65.3-.39.08-1.17.08H17.7zm2.18 1.43v5.5q.47 0 .57-.18.11-.2.11-1.03V5.29q0-.57-.03-.73-.04-.16-.17-.23-.13-.08-.48-.08z"/>
      <path  d="M25.73 2.82v8.36h-2.18V2.82z"/>
      <path  d="M31.47 2.82v8.36h-1.91l-1.13-3.8v3.8H26.6V2.82h1.82l1.22 3.76V2.82z"/>
      <path  d="M37.33 5.9h-2.18v-.76q0-.72-.06-.9-.06-.18-.3-.18-.2 0-.27.15-.07.16-.07.8v4.01q0 .57.07.75.07.17.29.17.24 0 .32-.2.09-.2.09-.78v-1h-.44V6.7h2.55v4.5h-1.37l-.2-.6q-.23.38-.57.58-.33.19-.8.19-.54 0-1.02-.26-.48-.27-.72-.67-.25-.39-.31-.82-.07-.43-.07-1.3V5.84q0-1.2.13-1.74t.74-1q.62-.45 1.59-.45.95 0 1.58.4.63.39.83.93.19.54.19 1.56z"/>
    </g>
  
</svg>

css 复制代码

body {
  background: var( --background-col );
  padding: 0;
  margin:0;
  min-height:100vh;
  display: flex;
  justify-content:center;
  align-items:center;
  --foreground-col: #fff;
  --background-col: #000;
}
body.invert {
  --foreground-col: #000;
  --background-col: #fff;
}
button {
  position: absolute;
  top: 10px;
  right:10px;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
svg {
  width: 50vw;
  
}
#outline {
  fill:none;
  stroke: var( --foreground-col );
  stroke-width: .1px;
}
#load {
  fill: var( --foreground-col );
  stroke-width: 0px;
  animation: loading 6s linear infinite;
}
#mask {
  fill: var( --background-col );
  stroke-width: 0px;
}
@keyframes loading {
  from {
    y: 11.5px;
  }
  to {
    y: -6px;
  }
}

javascript 复制代码

const bdy = document.querySelector('body')
addEventListener('click', (e) => {
 bdy.classList.toggle('invert') 
})