diff --git a/contents/_includes/patterns/progress-bar.njk b/contents/_includes/patterns/progress-bar.njk new file mode 100644 index 0000000..ae5be01 --- /dev/null +++ b/contents/_includes/patterns/progress-bar.njk @@ -0,0 +1,3 @@ +
+
40%
+
\ No newline at end of file diff --git a/contents/index.njk b/contents/index.njk index aca6c0c..b68b9f0 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -64,7 +64,7 @@ eleventyExcludeFromCollections: true {% pattern "Triangle buttons" %}{% include "patterns/triangle-buttons.njk" %}{% endpattern %} {% pattern "Video background" %}{% include "patterns/video-background.njk" %}{% endpattern %} {% pattern "Voting" %}{% include "patterns/voting.njk" %}{% endpattern %} - {% pattern "Watermark" %}{% include "patterns/Watermark.njk" %}{% endpattern %} + {% pattern "Watermark" %}{% include "patterns/watermark.njk" %}{% endpattern %} {% pattern "Zigzag timeline" %}{% include "patterns/zigzag-timeline.njk" %}{% endpattern %} @@ -73,6 +73,7 @@ eleventyExcludeFromCollections: true

Feedback

{% pattern "Popover arrow" %}{% include "patterns/popover-arrow.njk" %}{% endpattern %} + {% pattern "Progress bar" %}{% include "patterns/progress-bar.njk" %}{% endpattern %}
diff --git a/contents/progress-bar.md b/contents/progress-bar.md new file mode 100644 index 0000000..1c8f99d --- /dev/null +++ b/contents/progress-bar.md @@ -0,0 +1,49 @@ +--- +layout: layouts/post.njk +title: Progress bar +description: Create a progress bar with CSS flexbox +keywords: css flexbox, css progress bar +--- + +## HTML + +```html +
+ +
+ + 40% +
+
+``` + +## CSS + +```css +.progress-bar { + /* Colors */ + background-color: #d1d5db; + + /* Rounded border */ + border-radius: 9999px; + padding: 0.25rem; +} + +.progress-bar__progress { + /* Center the content */ + align-items: center; + display: flex; + justify-content: center; + + /* Colors */ + background-color: #3b82f6; + color: #fff; + + /* Rounded border */ + border-radius: 9999px; +} +``` + +{% demo %} +{% include "patterns/progress-bar.njk" %} +{% enddemo %} diff --git a/pages/progress-bar/index.tsx b/pages/progress-bar/index.tsx deleted file mode 100644 index 378cc61..0000000 --- a/pages/progress-bar/index.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import * as React from 'react'; -import Head from 'next/head'; -import { Pattern } from '../../constants/Pattern'; - -import useInterval from '../../hooks/useInterval'; -import { PatternLayout } from '../../layouts/PatternLayout'; -import BrowserFrame from '../../placeholders/BrowserFrame'; - -const Details: React.FC<{}> = () => { - const [progress, setProgress] = React.useState(0); - useInterval(() => { - setProgress((v) => (v === 100 ? 0 : v + 1)); - }, 1 * 100); - - return ( - - - - - - - - -
- - 40% -
- -`} - css={` - .container { - /* Colors */ - background-color: rgba(0, 0, 0, 0.1); - - /* Rounded border */ - border-radius: 9999px; - } - - .container__progress { - /* Center the content */ - align-items: center; - display: flex; - justify-content: center; - - /* Colors */ - background-color: #357edd; - color: #fff; - - /* Rounded border */ - border-radius: 9999px; - } - `} - > -
-
-
- {progress}% -
-
-
- - - ); -}; - -export default Details; diff --git a/patterns/progress-bar/Cover.tsx b/patterns/progress-bar/Cover.tsx deleted file mode 100644 index 8413d96..0000000 --- a/patterns/progress-bar/Cover.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import * as React from 'react'; - -import Frame from '../../placeholders/Frame'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
-
-
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index 25fa341..bfc184c 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -46,6 +46,7 @@ @import './patterns/popover-arrow'; @import './patterns/price-tag'; @import './patterns/pricing-table'; +@import './patterns/progress-bar'; @import './patterns/property-list'; @import './patterns/questions-and-answers'; @import './patterns/ribbon'; diff --git a/styles/patterns/_progress-bar.scss b/styles/patterns/_progress-bar.scss new file mode 100644 index 0000000..04f8be1 --- /dev/null +++ b/styles/patterns/_progress-bar.scss @@ -0,0 +1,27 @@ +.progress-bar { + /* Colors */ + background-color: #d1d5db; + + /* Rounded border */ + border-radius: 9999px; + padding: 0.25rem; + + /* Demo */ + width: 100%; +} + +.progress-bar__progress { + /* Center the content */ + align-items: center; + display: flex; + justify-content: center; + + /* Colors */ + background-color: #3b82f6; + color: #fff; + + /* Rounded border */ + border-radius: 9999px; + + width: 40%; +} \ No newline at end of file