progress-widgets/src/app/ProgressBars.module.css

Progress Widget component for use with React.js and Next.js. Customize size, color and amount of sections. Bar, Meter, Pie and Symbol Widgets available.

/* .circles{
    width: var(--size);
    height: var(--size);
    background-color: var(--bgcolor);
    border-radius: 50%;
}

.circle_fill{
    border-radius: 50%;
    background: conic-gradient(var(--shape));
    width: 5px;
    height: var(--size);
}

.squares{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    width: var(--size);
    height: var(--size);
    background-color: var(--bgcolor);
}

.bar{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    width: var(--width);
    height: var(--height);
    background-color: var(--bgcolor);
}

.meter{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    width: var(--width);
    height: var(--height);
    background-color: var(--bgcolor);
}

.stars{
    clip-path: polygon(
        50% 0%, 61% 35%, 98% 35%, 
        68% 57%, 79% 91%, 50% 70%, 
        21% 91%, 32% 57%, 2% 35%, 
        39% 35%
    );
    width: var(--size);
    height: var(--size);
    background-color: var(--bgcolor);
}

.hearts{
    clip-path: polygon(
        50% 80%, 20% 50%, 0% 20%, 
        25% 0%, 50% 15%, 75% 0%, 
        100% 20%, 80% 50%
    );
    width: var(--size);
    height: var(--size);
    background-color: var(--bgcolor);  
}

.moons{
    border-radius: 50%;
    clip-path: polygon(40% 0%, 100% 0%, 100% 100%, 40% 100%, 60% 50%);
    width: var(--size);
    height: var(--size);
    background-color: var(--bgcolor);  
}

.hexagons{
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    width: var(--size);
    height: var(--size);
    background-color: var(--bgcolor);  
}

.diamonds{
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    width: var(--size);
    height: var(--size);
    background-color: var(--bgcolor);  
}

.trapezoids{
    clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%);
    width: var(--size);
    height: var(--size);
    background-color: var(--bgcolor);  
}

.arrows_right{
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
    width: var(--size);
    height: var(--size);
    background-color: var(--bgcolor);  
}

.arrows_left{
    clip-path: polygon(100% 0%, 0% 50%, 100% 100%);
    width: var(--size);
    height: var(--size);
    background-color: var(--bgcolor);  
}

.arrows_up{
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    width: var(--size);
    height: var(--size);
    background-color: var(--bgcolor);  
}

.arrows_down{
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    width: var(--size);
    height: var(--size);
    background-color: var(--bgcolor);  
} */