CSS3 Spinner 练习

See the Pen practice-spinner by Wen Yan (@yanwen) on CodePen.

https://static.codepen.io/assets/embed/ei.js


spinner-before-base()
  content ''
  box-sizing border-box
  position relative
  top 50%
  left 50%
  height 60px
  width 60px
  margin-top -30px
  margin-left -30px
  border-radius 50%

spinner-color = #76d2e0

.spinners
   position absolute
   top 50%
   left 50%
   transform translate(-50%, -50%)
   
   [class*='spinner-']
     margin 4rem

  .spinner-1

    &:before
      spinner-before-base()

      border 3px solid lightgray
      border-top-color spinner-color
      animation spinner .7s linear infinite

  .spinner-2

    &:before
      spinner-before-base()

      border 2px solid transparent
      border-top-color spinner-color
      border-bottom-color spinner-color
      animation spinner .7s ease infinite

  .spinner-3

    &:before
      spinner-before-base()

      border-top 2px solid spinner-color
      border-right 2px solid transparent
      animation spinner .7s linear infinite

  @keyframes spinner
    to
      transform rotate(360deg)

作者: V

Web Dev

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google photo

您的留言將使用 Google 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s