雪花 loading 实现归档
雪花 loading 效果如下:
记录实现代码,以备后用
1234567891011121314151617181920212223<style>
.loading {
width: 28px;
height: 28px;
top: calc(50% - 14px);
left: calc(50% - 14px);
z-index: 1000;
animation: rotating 2s linear infinite;
}
@keyframes rotating {
0% {
transform: rotate(0)
}
to {
transform: rotate(360deg)
}
}
</style>
<div class="loading">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32m0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32m448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32m-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32M195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0m-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"></path></svg>
</div>
ThreeJS 实现精灵标签方法
docker容器替换脚本
评论
即可发布评论!
文章29
分类13
标签7
博客之家
一个优雅的写作平台
一个优雅的写作平台