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. 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.

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *