Tag:Circular progress bar

  • Circular progress bar implemented by CSS

    Time:2021-9-12

    Realization effect Implementation code html <div class=”wrap”> <div class=”progress-radial progress-25″> <div class=”overlay”>25%</div> </div> <div class=”progress-radial progress-50″> <div class=”overlay”>50%</div> </div> <div class=”progress-radial progress-75″> <div class=”overlay”>75%</div> </div> <div class=”progress-radial progress-90″> <div class=”overlay”>90%</div> </div> </div> css @import url(https://fonts.googleapis.com/css?family=Noto+Sans); body { padding: 30px 0; background-color: #2f3439; font-family: “Noto Sans”, sans-serif; } .wrap { width: 600px; margin: 0 auto; } […]

  • Android shape property to create a circular progress bar

    Time:2021-1-29

    1. Achieve the effect     2. Implementation code:【1】 shape_ drawable.xml Documents <?xml version=”1.0″ encoding=”utf-8″?> <shape xmlns:android=”http://schemas.android.com/apk/res/android” android:innerRadius=”20dp” android:shape=”ring” android:thickness=”8dp” android:useLevel=”false” > <gradient android:angle=”0″ android:startColor=”@color/normal” android:centerColor=”#5027844F” android:endColor=”#fff” android:useLevel=”false” android:type=”sweep” /> </shape> [2] we set the custom circle to a rotation animation, and use the rotation animation to customize the style of a circular progress circle. Finally, […]

  • The realization method of generating circular progress bar by HTML svg

    Time:2020-2-6

    Previously, I met the requirement of a circular progress bar in the project, which requires that the progress can be updated in real time, and the scheme in CSS, SVG, and canvas will pop up in my mind in an instant. For the three schemes, I prefer SVG, which is simple to use, with little […]