Spinner

Hi, Admin 先生/小姐

範例 1

過場動畫

置左

< div class="loading-area">
  < div class='loader'>
    < div class='loader_overlay'>< /div>
    < div class='loader_cogs'>
      < div class='loader_cogs__top'>
        < div class='top_part'>< /div>
        < div class='top_part'>< /div>
        < div class='top_part'>< /div>
        < div class='top_hole'>< /div>
      < /div>
      < div class='loader_cogs__left'>
        < div class='left_part'>< /div>
        < div class='left_part'>< /div>
        < div class='left_part'>< /div>
        < div class='left_hole'>< /div>
      < /div>
      < div class='loader_cogs__bottom'>
        < div class='bottom_part'>< /div>
        < div class='bottom_part'>< /div>
        < div class='bottom_part'>< /div>
        < div class='bottom_hole'>< /div>
      < /div>
      < h6 class="text-secondary">loading......< /h6>
    < /div>
  < /div>
< /div>

loading......

範例 2

過場動畫

置中

< div class="loading-area">
  < div class='loader'>
    < div class='loader_overlay m-auto'>< /div>
    < div class='loader_cogs'>
      < div class='loader_cogs__top'>
        < div class='top_part'>< /div>
        < div class='top_part'>< /div>
        < div class='top_part'>< /div>
        < div class='top_hole'>< /div>
      < /div>
      < div class='loader_cogs__left'>
        < div class='left_part'>< /div>
        < div class='left_part'>< /div>
        < div class='left_part'>< /div>
        < div class='left_hole'>< /div>
      < /div>
      < div class='loader_cogs__bottom'>
        < div class='bottom_part'>< /div>
        < div class='bottom_part'>< /div>
        < div class='bottom_part'>< /div>
        < div class='bottom_hole'>< /div>
      < /div>
      < h6 class="text-secondary">loading......< /h6>
    < /div>
  < /div>
< /div>

loading......

範例 3

過場動畫

置右

< div class="loading-area">
  < div class='loader'>
    < div class='loading-area d-flex justify-content-end'>< /div>
    < div class='loader_cogs'>
      < div class='loader_cogs__top'>
        < div class='top_part'>< /div>
        < div class='top_part'>< /div>
        < div class='top_part'>< /div>
        < div class='top_hole'>< /div>
      < /div>
      < div class='loader_cogs__left'>
        < div class='left_part'>< /div>
        < div class='left_part'>< /div>
        < div class='left_part'>< /div>
        < div class='left_hole'>< /div>
      < /div>
      < div class='loader_cogs__bottom'>
        < div class='bottom_part'>< /div>
        < div class='bottom_part'>< /div>
        < div class='bottom_part'>< /div>
        < div class='bottom_hole'>< /div>
      < /div>
      < h6 class="text-secondary">loading......< /h6>
    < /div>
  < /div>
< /div>