123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126 |
- .progress
- width 150px
- height 150px
- line-height 150px
- background none
- margin 0 auto
- position relative
-
- .progressafter
- content ""
- width 100%
- height 100%
- border-radius 50%
- border 12px solid off-white
- position absolute
- top 0
- left 0
-
- .progress > span
- width 50%
- height 100%
- overflow hidden
- position absolute
- top 0
- z-index 1
-
- .progress .progress-left
- left 0
-
- .progress .progress-bar
- width 100%
- height 100%
- background none
- border-width 12px
- border-style solid
- position absolute
- top 0
-
- .progress .progress-left .progress-bar
- left 100%
- border-top-right-radius 80px
- border-bottom-right-radius 80px
- border-left 0
- -webkit-transform-origin center left
- transform-origin center left
-
- .progress .progress-right
- right 0
-
- .progress .progress-right .progress-bar
- left -100%
- border-top-left-radius 80px
- border-bottom-left-radius 80px
- border-right 0
- -webkit-transform-origin center right
- transform-origin center right
- animation loading-1 1.8s linear forwards
-
- .progress .progress-value
- display flex
- justify-content center
- align-items center
- width 90%
- height 90%
- border 10px solid off-white
- border-radius 50%
- font-size 24px
- color off-white
- line-height 135px
- text-align center
- position absolute
- top 5%
- left 5%
-
-
- .progress.blue .progress-bar
- border-color blue
-
- .progress.blue .progress-left .progress-bar
- animation loading-2 1.5s linear forwards 1.8s
-
- @keyframes loading-1
- 0%
- -webkit-transform rotate(0deg)
- transform rotate(0deg)
-
- 100%
- -webkit-transform rotate(180deg)
- transform rotate(180deg)
-
- @keyframes loading-2
- 0%
- -webkit-transform rotate(0deg)
- transform rotate(0deg)
-
- 100%
- -webkit-transform rotate(144deg)
- transform rotate(144deg)
-
- @keyframes loading-3
- 0%
- -webkit-transform rotate(0deg)
- transform rotate(0deg)
-
- 100%
- -webkit-transform rotate(90deg)
- transform rotate(90deg)
-
- @keyframes loading-4
- 0%
- -webkit-transform rotate(0deg)
- transform rotate(0deg)
-
- 100%
- -webkit-transform rotate(36deg)
- transform rotate(36deg)
-
- @keyframes loading-5
- 0%
- -webkit-transform rotate(0deg)
- transform rotate(0deg)
-
- 100%
- -webkit-transform rotate(126deg)
- transform rotate(126deg)
|