css转圈圈

最新推荐文章于 2024-08-31 02:24:31 发布

sunnyboysix

最新推荐文章于 2024-08-31 02:24:31 发布

阅读量247

点赞数

分类专栏：动画css3 文章标签： css 前端

本文链接：https://blog.csdn.net/sunnyboysix/article/details/127694006

版权

动画css3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: sun
 * @Date: 2022-07-23 21:39:41
 * @LastEditors: lhl
 * @LastEditTime: 2022-07-23 21:50:33
-->
<template>
  <div class="progressLoading">

    <div class="isLoadingState">
      <div :class="`spinnerOne mobile`"></div>
      <div class="loadNum">{{ loadingNum }}%</div>
    </div>


  </div>
</template>

<script>
export default {
  name: 'progressLoading',
  props: {
    loadingNum: Number,
  },
  created() {
  },
  data() {
    return {

    }
  }
}
</script>

<style lang="less" scoped>
.progressLoading {
  width: 100%;
  height: 100%;
  position: relative;

  .isLoadingState {
    position: absolute;
    z-index: 1111;
    width: 100%;
    height: 100%;
    pointer-events: none;
    .spinnerOne {
      position: absolute;
      &.mobile {
        top: calc(45% - 15px);
        left: calc(50% - 85px);
        background: none;
        width: 180px;
        height: 180px;
        border: 8px solid rgba(255, 255, 255, 0.5);
        border-top-color: #ffff;
        border-radius: 50%;
        animation: circleround 2.5s infinite;
      }
    }
    .loadNum {
      width: 100px;
      font-size: 30px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      position: absolute;
      text-align: center;
      z-index: 99;
      top: calc(45% + 65px);
      left: calc(50% - 60px + 25px);
    }

    @keyframes circleround {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

  }
}
</style>