35 lines
739 B
Vue
35 lines
739 B
Vue
<template>
|
|
<view class="min-page u-flex u-col-center u-row-center">
|
|
<view class="loader">
|
|
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
/* HTML: <div class="loader"></div> */
|
|
.loader {
|
|
width: 50px;
|
|
--b: 8px;
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
padding: 1px;
|
|
background: conic-gradient(#0000 10%, #f03355) content-box;
|
|
-webkit-mask:
|
|
repeating-conic-gradient(#0000 0deg, #000 1deg 20deg, #0000 21deg 36deg),
|
|
radial-gradient(farthest-side, #0000 calc(100% - var(--b) - 1px), #000 calc(100% - var(--b)));
|
|
-webkit-mask-composite: destination-in;
|
|
mask-composite: intersect;
|
|
animation: l4 1s infinite steps(10);
|
|
}
|
|
|
|
@keyframes l4 {
|
|
to {
|
|
transform: rotate(1turn)
|
|
}
|
|
}
|
|
</style> |