动态菊花框加载CSS+HTML

<template>

  <div v-if="loading" class="loading-page">

    <!-- <p>Loading...</p> -->

    <div color="#8f282c" x-large class="tc_loading">

      <div class="box">

        <div class="dot"></div>

      <div class="dot"></div>

      <div class="dot"></div>

      <div class="dot"></div>

      <div class="dot"></div>

      <div class="dot"></div>

      <div class="dot"></div>

      <div class="dot"></div>

      <div class="dot"></div>

      <div class="dot"></div>

      <div class="dot"></div>

      <div class="dot"></div>

      </div>

     

    </div>

  </div>

</template>

<script>

export default {

  name: "loading",

  data: () => ({

    loading: false,

  }),

  methods: {

  },

};

</script>

<style lang="scss" scoped >

.loading-page {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(255, 255, 255, 0.3);

  text-align: center;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 30px;

  font-family: sans-serif;

  z-index: 9;

  .tc_loading {

    color: #8f282c !important;

    animation: animate 4s linear infinite;

  }

  @keyframes animate {

    0% {

      transform: rotate(0deg);

    }

    100% {

      transform: rotate(360deg);

    }

  }

  .box{

    position: relative;

    margin: 100px auto;

    width: 30px;

    height: 30px;

    animation-name: spinner;

    animation-duration: 1.2s;

    animation-delay: 0;

    animation-timing-function: steps(12);

    animation-iteration-count: infinite;

    animation-play-state:running;

  }

  .dot{

    width: 100%;

    height: 100%;

    color: #8f282c;

    // border: 1px solid #000;

    position: absolute;

    top: 0;

    left: 0;

   

  }

  .dot::before{

    display: block;

    width: 2px;

    height: 25%;

    margin: 0 auto;

    background-color: currentColor;

    border-radius: 40%;

    content: " ";

  }

  @keyframes spinner{

    0%{

      transform:rotate(0);

    }

    100%{

      transform:rotate(1turn);

    }

  }

  .dot:first-child{

    transform: rotate(30deg);

    opacity: 1;

  }

  .dot:nth-child(2){

    transform: rotate(60deg);

    opacity: .9375;

  }

  .dot:nth-child(3){

    transform: rotate(90deg);

    opacity: .875;

  }

  .dot:nth-child(4){

    transform: rotate(120deg);

    opacity: .775;

  }

  .dot:nth-child(5){

    transform: rotate(150deg);

    opacity: .675;

  }

  .dot:nth-child(6){

    transform: rotate(180deg);

    opacity: .555;

  }

  .dot:nth-child(7){

    transform: rotate(210deg);

    opacity: .455;

  }

  .dot:nth-child(8){

    transform: rotate(240deg);

    opacity: .355;

  }

  .dot:nth-child(9){

    transform: rotate(270deg);

    opacity: .255;

  }

  .dot:nth-child(10){

    transform: rotate(300deg);

    opacity: .155;

  }

  .dot:nth-child(11){

    transform: rotate(330deg);

    opacity: .55;

  }

  .dot:nth-child(12){

    transform: rotate(360deg);

    opacity: .35;

  }

}

</style>