csslayout/contents/radial-progress-bar.mdx

---
category: Feedback
created: '2019-11-30'
description: Create a radial progress bar with CSS flexbox
keywords: css clip rect, css flexbox, css progress bar
thumbnail: /assets/css-layout/thumbnails/radial-progress-bar.png
title: Radial progress bar
---

## HTML

```html index.html
<div class="radial-progress-bar">
    <!-- Show number of percentages -->
    <div class="radial-progress-bar__percentages">...</div>

    <!-- The curve -->
    <div class="radial-progress-bar__curve">
        <!-- The first half -->
        <div class="radial-progress-bar__half radial-progress-bar__half--first"></div>

        <!-- The second half -->
        <div class="radial-progress-bar__half radial-progress-bar__half--second"></div>
    </div>
</div>
```

## CSS

```css styles.css
:root {
    --radial-progress-bar-size: 8rem;
    --radial-progress-bar-border-width: 0.75rem;
}

.radial-progress-bar {
    position: relative;
    height: var(--radial-progress-bar-size);
    width: var(--radial-progress-bar-size);
}

.radial-progress-bar__percentages {
    /* Center the content */
    align-items: center;
    display: flex;
    justify-content: center;

    /* Rounded border */
    border: var(--radial-progress-bar-border-width) solid #d1d5db;
    border-radius: 9999px;

    /* Size */
    height: 100%;
    width: 100%;
}

.radial-progress-bar__curve {
    /* Position */
    left: 0;
    position: absolute;
    top: 0;

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

    /* If percentages is less than 50 */
    /* clip: rect(
        0px,
        var(--radial-progress-bar-size),
        var(--radial-progress-bar-size),
        calc(var(--radial-progress-bar-size) * 0.5),
        0px
    ); */

    /* If percentages is greater than or equals to 50 */
    clip: rect(auto, auto, auto, auto);
}

.radial-progress-bar__half {
    /* 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: var(--radial-progress-bar-border-width) solid #3b82f6;
    border-radius: 9999px;
}

.radial-progress-bar__half--first {
    /* Position */
    clip: rect(0px, calc(var(--radial-progress-bar-size) * 0.5), var(--radial-progress-bar-size), 0px);

    /* Number of percentages * 360 / 100 */
    transform: rotate(270deg);
}

.radial-progress-bar__half--second {
    /* Position */
    clip: rect(0px, calc(var(--radial-progress-bar-size) * 0.5), var(--radial-progress-bar-size), 0px);

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

    /* If percentages is greater than or equals to 50 */
    transform: rotate(180deg);
}
```

<Playground>
```css styles.css hidden
:root {
    --radial-progress-bar-size: 8rem;
    --radial-progress-bar-border-width: 0.75rem;
}

body {
    align-items: center;
    display: flex;
    justify-content: center;
}

.radial-progress-bar {
    position: relative;
    height: var(--radial-progress-bar-size);
    width: var(--radial-progress-bar-size);
}

.radial-progress-bar__percentages {
    /* Center the content */
    align-items: center;
    display: flex;
    justify-content: center;

    /* Rounded border */
    border: var(--radial-progress-bar-border-width) solid #d1d5db;
    border-radius: 9999px;

    /* Size */
    height: 100%;
    width: 100%;
}

.radial-progress-bar__curve {
    /* Position */
    left: 0;
    position: absolute;
    top: 0;

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

    /* If percentages is less than 50 */
    // clip: rect(0px, var(--radial-progress-bar-size), var(--radial-progress-bar-size), calc(var(--radial-progress-bar-size) * 0.5), 0px);

    /* If percentages is greater than or equals to 50 */
    clip: rect(auto, auto, auto, auto);
}

.radial-progress-bar__half {
    /* 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: var(--radial-progress-bar-border-width) solid #3b82f6;
    border-radius: 9999px;
}

.radial-progress-bar__half--first {
    /* Position */
    clip: rect(0px, calc(var(--radial-progress-bar-size) * 0.5), var(--radial-progress-bar-size), 0px);

    /* Number of percentages * 360 / 100 */
    transform: rotate(270deg);
}

.radial-progress-bar__half--second {
    /* Position */
    clip: rect(0px, calc(var(--radial-progress-bar-size) * 0.5), var(--radial-progress-bar-size), 0px);

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

    /* If percentages is greater than or equals to 50 */
    transform: rotate(180deg);
}
```

```html index.html hidden
<div class="radial-progress-bar">
    <div class="radial-progress-bar__percentages">
        75%
    </div>
    <div class="radial-progress-bar__curve">
        <div class="radial-progress-bar__half radial-progress-bar__half--first"></div>
        <div class="radial-progress-bar__half radial-progress-bar__half--second"></div>
    </div>
</div>
```
</Playground>