mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-11 16:44:57 +02:00
Add radial progress bar
This commit is contained in:
Phuoc Nguyen
@@ -29,6 +29,7 @@ enum Pattern {
|
|||||||
PropertyList = 'Property list',
|
PropertyList = 'Property list',
|
||||||
ProgressBar = 'Progress bar',
|
ProgressBar = 'Progress bar',
|
||||||
QuestionsAndAnswers = 'Questions and answers',
|
QuestionsAndAnswers = 'Questions and answers',
|
||||||
|
RadialProgressBar = 'Radial progress bar',
|
||||||
RadioSwitch = 'Radio switch',
|
RadioSwitch = 'Radio switch',
|
||||||
Rating = 'Rating',
|
Rating = 'Rating',
|
||||||
SameHeightColumns = 'Same height columns',
|
SameHeightColumns = 'Same height columns',
|
||||||
|
|||||||
@@ -112,6 +112,7 @@ const ExplorePage = () => {
|
|||||||
<CoverCard pattern={Pattern.PropertyList} />
|
<CoverCard pattern={Pattern.PropertyList} />
|
||||||
<CoverCard pattern={Pattern.ProgressBar} />
|
<CoverCard pattern={Pattern.ProgressBar} />
|
||||||
<CoverCard pattern={Pattern.QuestionsAndAnswers} />
|
<CoverCard pattern={Pattern.QuestionsAndAnswers} />
|
||||||
|
<CoverCard pattern={Pattern.RadialProgressBar} />
|
||||||
<CoverCard pattern={Pattern.RadioSwitch} />
|
<CoverCard pattern={Pattern.RadioSwitch} />
|
||||||
<CoverCard pattern={Pattern.Rating} />
|
<CoverCard pattern={Pattern.Rating} />
|
||||||
<CoverCard pattern={Pattern.SameHeightColumns} />
|
<CoverCard pattern={Pattern.SameHeightColumns} />
|
||||||
|
|||||||
61
client/patterns/radial-progress-bar/Cover.tsx
Normal file
61
client/patterns/radial-progress-bar/Cover.tsx
Normal 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
176
client/patterns/radial-progress-bar/Details.tsx
Normal 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;
|
||||||
@@ -34,6 +34,7 @@
|
|||||||
<url><loc>https://csslayout.io/patterns/progress-bar</loc></url>
|
<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/property-list</loc></url>
|
||||||
<url><loc>https://csslayout.io/patterns/questions-and-answers</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/radio-switch</loc></url>
|
||||||
<url><loc>https://csslayout.io/patterns/rating</loc></url>
|
<url><loc>https://csslayout.io/patterns/rating</loc></url>
|
||||||
<url><loc>https://csslayout.io/patterns/same-height-columns</loc></url>
|
<url><loc>https://csslayout.io/patterns/same-height-columns</loc></url>
|
||||||
|
|||||||
Reference in New Issue
Block a user