Q: 說好的文字Loading呢？
A: 客倌這裡上菜囉～

前幾篇的Loading都是以圖案循環為主，今天比較特別要來做文字版本的Loading，文字可以隨著使用者的需求任意改變～本篇一樣當作Loading系列來做介紹，開始吧！

既然是文字，就要來上字啦！

本篇的Loading需要兩個元素，文字相同且有共用的class，並有不同的class可以對文字做樣式的修改。

1. 首先需要一個.container將文字的元素都包在一起。
2. 將兩組文字的font-size、font-weight、letter-spacing、均設置相同。
3. 兩組文字的顏色樣式設置不同。

<style>
  .text {
    white-space: nowrap;
    font-size: 40px;
    font-weight: bold;
    letter-spacing: 5px;
  }
  .text-background {
    color: White;
    text-shadow: 0 0 6px #DDA0DD;
  }
  .text-color {
    color: MediumOrchid;
  }
</style>

<div class="container">
  <div class="text text-background">Loading . . .</div>
  <div class="text text-color">Loading . . .</div>
</div>

定位很好用！

再來要將文字重疊，這時候就要用到定位。

<style>
  .container {
    position: relative;
  }
  .text-color {
    position: absolute;
    left: 0;
    top: 0;
  }
</style>

容器給寬度，文字不換行！

再來就要對.text-color設置寬度，希望如果只有width: 50%時，只顯示文字的一半，接下來的設置就很重要了！

1. 為了達到這個效果，須將.container改為inline-block。
2. 讓.text無論如何死都不換行就要下white-space: nowrap。
3. 最後對.text-color設置寬度，並且要有overflow: hidden把超出容器的都隱藏。

<style>
  .container {
    display: inline-block;
  }
  .text {
    white-space: nowrap;
  }
  .text-color {
    width: 50%;
    overflow: hidden;
  }
</style>

<div class="container">
  <div class="text text-background">Loading . . .</div>
  <div class="text text-color">Loading . . .</div>
</div>

再來就可以用animation來做動畫效果

<style>
  .text-color {
    animation: widthChange 3s infinite;
  }

  @keyframes widthChange {
    0% {
      width: 0;
    }
    100% {
      width: 100%;
    }
  }
</style>

文字Loading完成！

將文字替換掉也是可以的！！

如果有寫錯的地方，歡迎點評！ 會及時改進～
如果有更好的寫法，歡迎指教！ 希望各位不吝賜教～
如果想看更多效果，歡迎敲碗！ 提供示意圖小編寫寫看～
如果內容疑似侵權，拜託告知！ 內容皆為小編理解後原創～
如果對你有點幫助，拿去用吧！