mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-06 14:16:50 +02:00
Code Issues Releases Wiki Activity

feat: Radial progress bar

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-20 17:58:20 +07:00
parent 57517c5947
commit 9f91d36b6d
7 changed files with 222 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
contents/_includes/patterns/radial-progress-bar.njk Normal file
View File

@@ -0,0 +1,9 @@
<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>

1
contents/index.njk
View File

@@ -74,6 +74,7 @@ eleventyExcludeFromCollections: true
<div class="category__posts">
{% pattern "Popover arrow" %}{% include "patterns/popover-arrow.njk" %}{% endpattern %}
{% pattern "Progress bar" %}{% include "patterns/progress-bar.njk" %}{% endpattern %}
{% pattern "Radial progress bar" %}{% include "patterns/radial-progress-bar.njk" %}{% endpattern %}
</div>
</div>

126
contents/radial-progress-bar.md Normal file
View File

@@ -0,0 +1,126 @@
---
layout: layouts/post.njk
title: Radial progress bar
description: Create a radial progress bar with CSS flexbox
keywords: css clip rect, css flexbox, css progress bar
---
## HTML
```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
: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);
}
```
{% demo %}
{% include "patterns/radial-progress-bar.njk" %}
{% enddemo %}

182
pages/radial-progress-bar/index.tsx
View File

@@ -1,182 +0,0 @@
import * as React from 'react';
import Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
interface RadialProgressProps {
percentages: number;
}
const RadialProgress: React.FC<RadialProgressProps> = ({ percentages }) => {
return (
<div style={{ position: 'relative' }}>
<div
style={{
alignItems: 'center',
border: '12px solid rgba(0, 0, 0, 0.3)',
borderRadius: '9999px',
color: 'rgba(0, 0, 0, 0.3)',
display: 'flex',
fontSize: '24px',
height: '128px',
justifyContent: 'center',
width: '128px',
}}
>
{percentages}%
</div>
<div
style={{
clip: percentages >= 50 ? 'rect(auto, auto, auto, auto)' : 'rect(0px, 128px, 128px, 64px)',
height: '100%',
left: 0,
position: 'absolute',
top: 0,
width: '100%',
}}
>
<div
style={{
border: '12px solid #00449E',
borderRadius: '9999px',
clip: 'rect(0px, 64px, 128px, 0px)',
height: '100%',
position: 'absolute',
transform: `rotate(${(percentages * 360) / 100}deg)`,
width: '100%',
}}
/>
<div
style={{
border: '12px solid #00449E',
borderRadius: '9999px',
clip: 'rect(0px, 64px, 128px, 0px)',
height: '100%',
position: 'absolute',
transform: `rotate(${percentages >= 50 ? 180 : 0}deg)`,
width: '100%',
}}
/>
</div>
</div>
);
};
const Details: React.FC<{}> = () => {
return (
<PatternLayout pattern={Pattern.RadialProgressBar}>
<Head>
<meta name="description" content="Create a radial progress bar with CSS flexbox" />
<meta name="og:description" content="Create a radial progress bar with CSS flexbox" />
<meta name="twitter:description" content="Create a radial progress bar with CSS flexbox" />
<meta name="keywords" content="css clip rect, css flexbox, css progress bar" />
</Head>
<BrowserFrame
html={`
<div class="container">
<!-- Show number of percentages -->
<div class="container__percentages">
...
</div>
<!-- The curve -->
<div class="container__curve">
<!-- The first half -->
<div class="container__half container__half--first"></div>
<!-- The second half -->
<div class="container__half container__half--second"></div>
</div>
</div>
`}
css={`
.container {
position: relative;
}
.container__percentages {
/* 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;
}
.container__curve {
/* 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);
}
.container__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: 12px solid rgb(0, 68, 158);
border-radius: 9999px;
}
.container__half--first {
/* Position */
clip: rect(0px, 64px, 128px, 0px);
transform: rotate(162deg); /* Number of percentages * 360 / 100 */
}
.container__half--second {
/* 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
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ marginRight: '16px' }}>
<RadialProgress percentages={45} />
</div>
<RadialProgress percentages={80} />
</div>
</BrowserFrame>
</PatternLayout>
);
};
export default Details;

61
patterns/radial-progress-bar/Cover.tsx
View File

@@ -1,61 +0,0 @@
import * as React from 'react';
import Frame from '../../placeholders/Frame';
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ position: 'relative' }}>
<div
style={{
alignItems: 'center',
border: '8px solid rgba(0, 0, 0, 0.3)',
borderRadius: '9999px',
color: 'rgba(0, 0, 0, 0.3)',
display: 'flex',
height: '64px',
justifyContent: 'center',
width: '64px',
}}
>
33%
</div>
<div
style={{
clip: 'rect(0px, 64px, 64px, 32px)',
height: '100%',
left: 0,
position: 'absolute',
top: 0,
width: '100%',
}}
>
<div
style={{
border: '8px solid #00449E',
borderRadius: '9999px',
clip: 'rect(0px, 32px, 64px, 0px)',
height: '100%',
position: 'absolute',
transform: 'rotate(120deg)',
width: '100%',
}}
/>
</div>
</div>
</div>
</Frame>
);
};
export default Cover;

1
styles/index.scss
View File

@@ -49,6 +49,7 @@
@import './patterns/progress-bar';
@import './patterns/property-list';
@import './patterns/questions-and-answers';
@import './patterns/radial-progress-bar';
@import './patterns/ribbon';
@import './patterns/separator';
@import './patterns/stacked-cards';

85
styles/patterns/_radial-progress-bar.scss Normal file
View File

@@ -0,0 +1,85 @@
: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);
}