本篇将记录一些 loading demo。
通过svg属性stroke-dashoffset
偏移和svg的差速旋转实现 loading
了解 stroke-dashoffset
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-dashoffset
loading-1
效果
html
<div class="loading-2"> <svg class="l-svg" width="75" viewBox="0 0 150 150"> <g> <circle class="l-circle" r="65" cx="75" cy="75" stroke-linecap="round" stroke-opacity="0.7" /> </g> </svg> </div>
|
css
.loading-2 { .l-svg { animation: loading2-svg linear 3s infinite; .l-circle { fill: transparent; stroke: #7c4dff; stroke-width: 10; stroke-dasharray: 300; stroke-dashoffset: 0; stroke-miterlimit: 10; animation: loading2-circle linear 2s infinite; } }
@keyframes loading2-svg { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes loading2-circle { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -600; } } }
|
loading-2
效果
通过伪类遮盖,修改旋转 origin 来达到此 loading
html
<div class="loading-4"></div>
|
css
.loading-4 { position: relative; width: 75px; height: 75px; border-radius: 50%; background-color: rgba(78, 167, 249, 0.21); overflow: hidden;
// 10px的"边框" &::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 65px; height: 65px; border-radius: 50%; background-color: #fff; }
// 转圈的矩形 &::before { content: ''; position: absolute; bottom: 50%; left: 50%; width: 100%; height: 100%; background-color: #00adb5; animation: loading4-rotate 1.5s linear infinite; transform-origin: bottom left; }
@keyframes loading4-rotate { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } }
|