Home/Explore/

Radial progress bar

CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
45%
80%
<div style="
    position: relative;
">
    <!-- Show number of percentages -->
    <div style="
        /* Center the content */
        align-items: center;
        display: flex;
        justify-content: center;

        /* Rounded border */
        border: 12px solid rgba(0, 0, 0, 0.3);
        border-radius: 9999px;

        /* Size */
        height: 128px;
        width: 128px;
    ">
        ...
    </div>

    <!-- The curve -->
    <div style="
        /* Position */
        left: 0;
        position: absolute;
        top: 0;

        /* Take full size */
        height: 100%;
        width: 100%;

        /* If percentages is less than 50 */
        clip: rect(0px, 128px, 128px, 64px);

        /* If percentages is greater than or equals to 50 */
        clip: rect(auto, auto, auto, auto);
    ">
        <!-- The first half -->
        <div style="
            /* Take full size */
            height: 100%;
            position: absolute;
            width: 100%;

            /*
            Background color of curve.
            The border width should be the same as the area showing the percentages
            */
            border: 12px solid rgb(0, 68, 158);
            border-radius: 9999px;

            /* Position */
            clip: rect(0px, 64px, 128px, 0px);
            transform: rotate(162deg); /* Number of percentages * 360 / 100 */
        " />

        <!-- The second half -->
        <div style="
            /* Take full size */
            height: 100%;
            position: absolute;
            width: 100%;

            /*
            Background color of curve.
            The border width should be the same as the area showing the percentages
            */
            border: 12px solid rgb(0, 68, 158);
            border-radius: 9999px;

            /* Position */
            clip: rect(0px, 64px, 128px, 0px);

            /* If percentages is less than 50 */
            transform: rotate(0deg);

            /* If percentages is greater than or equals to 50 */
            transform: rotate(180deg);
        " />
    </div>
</div>
Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!