Pogress Circle Bar

結構

percentage-bar-min

範例

.outer
 .inner
  .block
  .txt 75%
.outer
 width: 150px
 height: 150px
 background-color: #BFEAE7
 border-radius: 100%
 position: relative
 margin-left: auto
 margin-right: auto
 top: 150px
 
.inner
 width: 130px
 height: 130px
 background-color: #BFEAE7
 border-radius: 100%
 overflow: hidden
 position: absolute
 top: 10px
 left: 10px
 
.block
 width: 130px
 height: 97.5px
 background-color: #20B4A9
 position: absolute
 bottom: 0px
 opacity: 0.65
 
.txt
 font-size: 36px
 font-family: メイリオ
 color: white
 opacity: 0.9
 text-align: center
 position: absolute
 top: 50%
 left: 50%
 transform: translateX(-50%) translateY(-50%)

Display

75%

10 Replies to “Pogress Circle Bar”

  1. I have to thank you for the efforts you’ve put in penning this website.

    I am hoping to view the same high-grade content
    from you later on as well. In fact, your creative writing abilities
    has inspired me to get my own blog now 😉

    1. Thank you very much 😀
      Most of the posts are Chinese, I am sorry I can’t translate them to English.
      If you have any question, please feel free to leave comment.
      I’ll reply as soon as possible.

  2. Every weekend i used to go to see this website, because i want enjoyment, for the reason that this this web site conations actually nice funny stuff too.

Leave a Reply

Your email address will not be published. Required fields are marked *