原文地址:https://segmentfault.com/a/1190000015424389
修改后地址:https://scrimba.com/c/cqKv4VCR
HTML code:
<div class="loader"> <span>Loading...</span> </div>
CSS code:
html, body { margin: 0; padding: 0; } /* 设置body的子元素水平垂直居中 */ body { height: 100vh; display: flex; justify-content: center; align-items: center; background-color: black; overflow: hidden; } /* 设置容器尺寸 */ .loader { position: relative; /* 在此调节font-size可以调节整个loader的大小,前提是不能在后代元素里设置font-size了 */ font-size: 30px; width: 10em; height: 10em; border: 1px solid white; /* 画出组成圆的顶部弧线 */ border-top: 0.3em solid hotpink; border-radius: 50%; /* width、height包括边框、内边距、内容区 */ box-sizing: border-box; animation: rotating 2s ease-in-out infinite; --direction: 1; } /* 用伪元素画出组成圆的另外 2 条弧线 */ .loader::before, .loader::after { content: ''; position: absolute; width: inherit; height: inherit; border-radius: 50%; box-sizing: border-box; top: -0.2em; } .loader::before { border-top: 0.3em solid dodgerblue; transform: rotate(120deg); } .loader::after { border-top: 0.3em solid gold; transform: rotate(240deg); } /* 设置文字样式 */ .loader span { position: absolute; color: white; width: inherit; height: inherit; text-align: center; line-height: 10em; font-family: sans-serif; animation: rotating 2s linear infinite; --direction: -1; } @keyframes rotating { 50% { transform: rotate(calc(180deg * var(--direction))); } 100% { transform: rotate(calc(360deg * var(--direction))); } }