Open xgqfrms opened 3 years ago
<view class="mini-block-loading" v-if="!loading"> <uni-icons class="spinner" type="spinner-cycle" size="24" color="#4285F4"></uni-icons> </view>
.mini-block-container { box-sizing: border-box; dispaly: flex; flex-flow: row nowrap; // align-items: center; align-items: flex-start; justify-content: center; position: relative; // min-height: 200px; // border: 1px solid red; // background: #ccc; border-radius: 4px; box-shadow: 0 0 1px 1px #c9c9c9; height: 100%; .mini-block-loading { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: calc(100% - 20px); margin: 10px 10px; padding: 20px 24px; height: 100%; // background-color: rgba(255, 255, 255, 0.3); background-color: rgba(255, 255, 255, 0.95); position: absolute; left: 0; top: 0; // height: 180px; } } .spinner { animation: rotating 2s linear infinite; } @keyframes rotating { 0% { transform: rotate(0deg); } 100% { transform: rotate(1turn); } }
https://www.jianshu.com/p/81dac6ca0860
https://hellouniapp.dcloud.net.cn/pages/extUI/icons/icons
uni-app 使用 uni-icons 组件 loading