html代码

<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/three.js/106/three.min.js"></script>
<div id="loader">
    <canvas></canvas>
</div>

css代码

#loader canvas {
  width: 240px;
  height: 240px;
}

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;overflow: hidden
}

* {
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #275EFE;
}
body .dribbble {
  position: fixed;
  display: block;
  right: 24px;
  bottom: 24px;
}
body .dribbble img {
  display: block;
  width: 76px;
}

js代码