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

Add radial progress bar

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-11-30 19:04:19 +07:00
parent c0091af17f
commit b503032f0d
5 changed files with 240 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/constants/Pattern.ts
View File

@@ -29,6 +29,7 @@ enum Pattern {
PropertyList = 'Property list',
ProgressBar = 'Progress bar',
QuestionsAndAnswers = 'Questions and answers',
RadialProgressBar = 'Radial progress bar',
RadioSwitch = 'Radio switch',
Rating = 'Rating',
SameHeightColumns = 'Same height columns',

1
client/pages/ExplorePage.tsx
View File

@@ -112,6 +112,7 @@ const ExplorePage = () => {
<CoverCard pattern={Pattern.PropertyList} />
<CoverCard pattern={Pattern.ProgressBar} />
<CoverCard pattern={Pattern.QuestionsAndAnswers} />
<CoverCard pattern={Pattern.RadialProgressBar} />
<CoverCard pattern={Pattern.RadioSwitch} />
<CoverCard pattern={Pattern.Rating} />
<CoverCard pattern={Pattern.SameHeightColumns} />

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

@@ -0,0 +1,61 @@
import 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',
}}
>
45%
</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;

176
client/patterns/radial-progress-bar/Details.tsx Normal file
View File

@@ -0,0 +1,176 @@
import React from 'react';
import DetailsLayout from '../../layouts/DetailsLayout';
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 (
<DetailsLayout title="Radial progress bar">
<div style={{ padding: '64px 32px' }}>
<BrowserFrame
content={(
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ marginRight: '16px' }}><RadialProgress percentages={45} /></div>
<RadialProgress percentages={80} />
</div>
)}
source={`
<div style="
position: relative;
">
<!-- Show number of percentages -->
<div style="
/* Content is centered */
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>
`}
/>
</div>
</DetailsLayout>
);
};
export default Details;

1
public/sitemap.xml
View File

@@ -34,6 +34,7 @@
<url><loc>https://csslayout.io/patterns/progress-bar</loc></url>
<url><loc>https://csslayout.io/patterns/property-list</loc></url>
<url><loc>https://csslayout.io/patterns/questions-and-answers</loc></url>
<url><loc>https://csslayout.io/patterns/radial-progress-bar</loc></url>
<url><loc>https://csslayout.io/patterns/radio-switch</loc></url>
<url><loc>https://csslayout.io/patterns/rating</loc></url>
<url><loc>https://csslayout.io/patterns/same-height-columns</loc></url>