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)

作者: YanWen

Web 开发者

发表评论

Fill in your details below or click an icon to log in:

WordPress.com 徽标

You are commenting using your WordPress.com account. Log Out /  更改 )

Google photo

You are commenting using your Google account. Log Out /  更改 )

Twitter picture

You are commenting using your Twitter account. Log Out /  更改 )

Facebook photo

You are commenting using your Facebook account. Log Out /  更改 )

Connecting to %s