Merge pull request #217 from phuocng/progress-bar

feat: Indeterminate progress bar

README.md

@@ -2,17 +2,17 @@
 
 A collection of popular layouts and patterns made with CSS:
 
-* 🎉 Zero dependencies
-* 🎉 No frameworks
-* 🎉 No CSS hacks
-* 🎉 Real use cases
-* Good practices (coming soon)
-* Accessibility Support (coming soon)
+-   🎉 Zero dependencies
+-   🎉 No frameworks
+-   🎉 No CSS hacks
+-   🎉 Real use cases
+-   Good practices (coming soon)
+-   Accessibility Support (coming soon)
 
 ## Why
 
 Being a front-end engineer, I have to deal with a lot of layouts and components.
-There are a lot of CSS frameworks out there that provide popular layouts/components but 
+There are a lot of CSS frameworks out there that provide popular layouts/components but
 I usually don't want to include all of them in my project.
 
 So I collect most popular layouts and components that can be built with pure CSS.
@@ -23,20 +23,20 @@ By composing them, you can have any possible layout that exists in the real life
 
 ## Running it on local
 
-- Clone the project:
+-   Clone the project:
 
 ```shell
 $ git clone https://github.com/phuocng/csslayout
 ```
 
-- Install the dependencies:
+-   Install the dependencies:
 
 ```shell
 $ cd csslayout
 $ npm install
 ```
 
-- Run it on the local:
+-   Run it on the local:
 
 ```shell
 $ npm run start
@@ -61,6 +61,7 @@ If there is any issue, it will be logged in the `tslint.log` file.
 This project is developed by _Nguyen Huu Phuoc_. I love building products and sharing knowledge.
 
 Be my friend on
-* [Twitter](https://twitter.com/nghuuphuoc)
-* [dev.to](https://dev.to/phuocng)
-* [Github](https://github.com/phuoc-ng)
+
+-   [Twitter](https://twitter.com/nghuuphuoc)
+-   [dev.to](https://dev.to/phuocng)
+-   [Github](https://github.com/phuoc-ng)

contents/_includes/covers/indeterminate-progress-bar.njk

@@ -0,0 +1,3 @@
+<div class="indeterminate-progress-bar">
+    <div class="indeterminate-progress-bar__progress"></div>
+</div>

contents/accordion.md

@@ -18,21 +18,15 @@ keywords: css accordion, css flexbox
             <div class="accordion__toggle">...</div>
 
             <!-- The title -->
-            <div class="accordion__title">
-                ...
-            </div>
+            <div class="accordion__title">...</div>
         </div>
 
         <!-- The content -->
-        <div class="accordion__content">
-            ...
-        </div>
+        <div class="accordion__content">...</div>
     </div>
 
     <!-- Expanded item -->
-    <div class="accordion__item accordion__item--expanded">
-        ...
-    </div>
+    <div class="accordion__item accordion__item--expanded">...</div>
 
     <!-- Repeat other item -->
     ...

contents/badge.md

@@ -8,9 +8,7 @@ keywords: css badge, css flexbox
 ## HTML
 
 ```html
-<div class="badge">
-    ...
-</div>
+<div class="badge">...</div>
 ```
 
 ## CSS

contents/box-selector.md

@@ -20,7 +20,7 @@ keywords: css box selector
 .box-selector {
     border: 1px solid #d1d5db;
     border-radius: 0.25rem;
-    padding: .5rem;
+    padding: 0.5rem;
 }
 
 .box-selector--selected {
@@ -54,5 +54,5 @@ keywords: css box selector
 
 ## See also
 
-- [Custom checkbox button](/custom-checkbox-button/)
-- [Custom radio button](/custom-radio-button/)
+-   [Custom checkbox button](/custom-checkbox-button/)
+-   [Custom radio button](/custom-radio-button/)

contents/breadcrumb.md

@@ -40,7 +40,7 @@ keywords: css breadcrumb, css flexbox
     top: 0;
     transform: translate(0.5rem, 0px);
 
-    content: '/';    
+    content: '/';
 }
 ```
 

contents/button-with-icon.md

@@ -13,9 +13,7 @@ keywords: css flexbox, css icon button
     ...
 
     <!-- Label -->
-    <div class="button-with-icon__label">
-        ...
-    </div>
+    <div class="button-with-icon__label">...</div>
 </button>
 ```
 

contents/calendar.md

@@ -17,11 +17,11 @@ keywords: css calendar, css grid
     <div class="calendar__weekday">Fri</div>
     <div class="calendar__weekday">Sat</div>
     <div class="calendar__weekday">Sun</div>
-    
+
     <!-- Days of the previous month -->
     <div class="calendar__day calendar__day--disabled">30</div>
     <div class="calendar__day calendar__day--disabled">31</div>
-    
+
     <!-- Days of the current month -->
     <div class="calendar__day">1</div>
     <div class="calendar__day">2</div>
@@ -60,12 +60,12 @@ keywords: css calendar, css grid
     color: #fff;
 }
 
-.calendar__day:nth-child(7n+1) {
+.calendar__day:nth-child(7n + 1) {
     border-left: 1px solid #d1d5db;
 }
 
 .calendar__day--disabled {
-    color: #d1d5db;   
+    color: #d1d5db;
 }
 ```
 

contents/card-layout.md

@@ -10,9 +10,7 @@ keywords: css card layout, css flexbox, css layout
 ```html
 <div class="card-layout">
     <!-- A card with given width -->
-    <div class="card-layout__item">
-        ...
-    </div>
+    <div class="card-layout__item">...</div>
 
     <!-- Repeat other cards -->
     ...

contents/card.md

@@ -10,14 +10,10 @@ keywords: css card, css flexbox
 ```html
 <div class="card">
     <!-- Cover -->
-    <div class="card__cover">
-        ...
-    </div>
+    <div class="card__cover">...</div>
 
     <!-- Content -->
-    <div class="card__content">
-        ...
-    </div>
+    <div class="card__content">...</div>
     ...
 </div>
 ```

contents/centering.md

@@ -8,9 +8,7 @@ keywords: css centering, css flexbox
 ## HTML
 
 ```html
-<div class="centering">
-    ...
-</div>
+<div class="centering">...</div>
 ```
 
 ## CSS

contents/chip.md

@@ -10,9 +10,7 @@ keywords: css chip, css flexbox, css tag
 ```html
 <div class="chip">
     <!-- Content -->
-    <div class="chip__content">
-        ...
-    </div>
+    <div class="chip__content">...</div>
 
     <!-- The close button -->
     <button class="chip__button">

contents/circular-navigation.md

@@ -15,9 +15,7 @@ keywords: css circular navigation, css flexbox
     <!-- A circle menu item -->
     <div class="circular-navigation__circle">
         <!-- The content -->
-        <div class="circular-navigation__content">            
-            ...
-        </div>
+        <div class="circular-navigation__content">...</div>
     </div>
 
     <!-- Repeat menu items -->

contents/cookie-banner.md

@@ -10,9 +10,7 @@ keywords: css cookie banner, css flexbox
 ```html
 <div class="cookie-banner">
     <!-- Tells visitors that the website uses cookie -->
-    <div class="cookie-banner__content">
-        ...
-    </div>
+    <div class="cookie-banner__content">...</div>
 
     <!-- Close button -->
     ...

contents/corner-ribbon.md

@@ -12,8 +12,7 @@ keywords: css flexbox, css ribbon
     <!-- The container -->
     <div class="corner-ribbon__inner">
         <!-- The ribbon -->
-        <div class="corner-ribbon__ribbon">
-        </div>
+        <div class="corner-ribbon__ribbon"></div>
     </div>
 </div>
 ```

contents/custom-checkbox-button.md

@@ -66,5 +66,5 @@ keywords: css checkbox, css flexbox
 
 ## See also
 
-- [Box selector](/box-selector/)
-- [Custom radio button](/custom-radio-button/)
+-   [Box selector](/box-selector/)
+-   [Custom radio button](/custom-radio-button/)

contents/custom-radio-button.md

@@ -70,5 +70,5 @@ keywords: css flexbox, css radio
 
 ## See also
 
-- [Box selector](/box-selector/)
-- [Custom checkbox button](/custom-checkbox-button/)
+-   [Box selector](/box-selector/)
+-   [Custom checkbox button](/custom-checkbox-button/)

contents/drawer.md

@@ -15,9 +15,7 @@ This pattern is also known as off-canvas.
     <div class="drawer__overlay"></div>
 
     <!-- Sidebar -->
-    <div class="drawer__sidebar">
-        ...
-    </div>
+    <div class="drawer__sidebar">...</div>
 </div>
 ```
 

contents/drop-area.md

@@ -8,9 +8,7 @@ keywords: css dropping area, css flexbox
 ## HTML
 
 ```html
-<div class="drop-area">
-    ...
-</div>
+<div class="drop-area">...</div>
 ```
 
 ## CSS

contents/drop-cap.md

@@ -8,9 +8,7 @@ keywords: css drop cap, css :first-letter
 ## HTML
 
 ```html
-<div class="drop-cap">
-    ...
-</div>
+<div class="drop-cap">...</div>
 ```
 
 ## CSS

contents/dropdown.md

@@ -10,21 +10,17 @@ keywords: css dropdown, css menu
 ```html
 <div class="dropdown">
     <!-- The trigger element -->
-    <div class="dropdown__trigger">
-        ...
-    </div>
+    <div class="dropdown__trigger">...</div>
 
     <!-- The content -->
-    <div class="dropdown__content">
-        ...
-    </div>
+    <div class="dropdown__content">...</div>
 </div>
 ```
 
 ## CSS
 
 ```css
- .dropdown {
+.dropdown {
     position: relative;
 }
 

contents/fading-long-section.md

@@ -12,9 +12,7 @@ The pattern is often used to indicate there is more content.
 ```html
 <div class="fading-long-section">
     <!-- Main content -->
-    <div class="fading-long-section__content">
-        ...
-    </div>
+    <div class="fading-long-section__content">...</div>
 
     <!-- The faded element -->
     <div class="fading-long-section__fading"></div>

contents/feature-comparison.md

@@ -10,9 +10,7 @@ keywords: css feature comparison, css flexbox
 ```html
 <div class="feature-comparison">
     <!-- Feature name -->
-    <div class="feature-comparison__feature">
-        ...
-    </div>
+    <div class="feature-comparison__feature">...</div>
 
     <!-- The model -->
     <div class="feature-comparison__model">

contents/feature-list.md

@@ -11,14 +11,10 @@ keywords: css feature list, css flexbox
 <!-- Feature item -->
 <div class="feature-list">
     <!-- Image -->
-    <div class="feature-list__image">
-        ...
-    </div>
+    <div class="feature-list__image">...</div>
 
     <!-- Right side -->
-    <div class="feature-list__desc">
-        ...
-    </div>
+    <div class="feature-list__desc">...</div>
 </div>
 
 <!-- Repeated items -->

contents/fixed-at-corner.md

@@ -10,24 +10,16 @@ keywords: css fixed
 ```html
 <div class="fixed-at-corner">
     <!-- Top-left corner -->
-    <div class="fixed-at-corner__corner fixed-at-corner__corner--tl">
-        ...
-    </div>
+    <div class="fixed-at-corner__corner fixed-at-corner__corner--tl">...</div>
 
     <!-- Top-right corner -->
-    <div class="fixed-at-corner__corner fixed-at-corner__corner--tr">
-        ...
-    </div>
+    <div class="fixed-at-corner__corner fixed-at-corner__corner--tr">...</div>
 
     <!-- Bottom-right corner -->
-    <div class="fixed-at-corner__corner fixed-at-corner__corner--br">
-        ...
-    </div>
+    <div class="fixed-at-corner__corner fixed-at-corner__corner--br">...</div>
 
     <!-- Bottom-left corner -->
-    <div class="fixed-at-corner__corner fixed-at-corner__corner--bl">    
-        ...
-    </div>
+    <div class="fixed-at-corner__corner fixed-at-corner__corner--bl">...</div>
 </div>
 ```
 

contents/fixed-at-side.md

@@ -9,14 +9,10 @@ keywords: css fixed
 
 ```html
 <!-- Fixed at the middle of left side -->
-<div class="fixed-at-side fixed-at-side--l">
-    ...
-</div>
+<div class="fixed-at-side fixed-at-side--l">...</div>
 
 <!-- Fixed at the middle of right side -->
-<div class="fixed-at-side fixed-at-side--r">
-    ...
-</div>
+<div class="fixed-at-side fixed-at-side--r">...</div>
 ```
 
 ## CSS

contents/folder-structure.md

@@ -31,7 +31,7 @@ keywords: css folder structure, css folder tree
                 ...
             </ul>
         </li>
-        
+
         <!-- Repeat other items -->
         ...
     </ul>
@@ -88,9 +88,7 @@ keywords: css folder structure, css folder tree
 
 /* Remove the border from the last item */
 .folder-structure li:last-child::before {
-    height: calc(
-        var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2
-    );
+    height: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
 }
 ```
 

contents/full-background.md

@@ -8,9 +8,7 @@ keywords: css background size cover, css full background
 ## HTML
 
 ```html
-<div class="full-background">
-    ...
-</div>
+<div class="full-background">...</div>
 ```
 
 ## CSS

contents/full-screen-menu.md

@@ -39,7 +39,7 @@ keywords: css fixed, css flexbox, css menu
 .full-screen-menu__close {
     /* Shown at top left corner */
     left: 1rem;
-    position: absolute;    
+    position: absolute;
     top: 1rem;
 }
 ```

contents/holy-grail.md

@@ -9,9 +9,7 @@ keywords: css flexbox, css holy grail layout, css layout
 
 ```html
 <div class="holy-grail">
-    <header>
-        ...
-    </header>
+    <header>...</header>
     <main class="holy-grail__main">
         <!-- Left sidebar -->
         <aside class="holy-grail__left">...</aside>
@@ -22,9 +20,7 @@ keywords: css flexbox, css holy grail layout, css layout
         <!-- Right sidebar -->
         <nav class="holy-grail__right">...</nav>
     </main>
-    <footer>
-        ...
-    </footer>
+    <footer>...</footer>
 </div>
 ```
 

contents/indeterminate-progress-bar.md

@@ -0,0 +1,66 @@
+---
+layout: layouts/post.njk
+title: Indeterminate progress bar
+description: Create an indeterminate progress bar with CSS
+keywords: css indeterminate progress bar, css progress bar
+---
+
+## HTML
+
+```html
+<div class="indeterminate-progress-bar">
+    <div class="indeterminate-progress-bar__progress"></div>
+</div>
+```
+
+## CSS
+
+```css
+.indeterminate-progress-bar {
+    /* Color */
+    background-color: #d1d5db;
+
+    /* Rounded border */
+    border-radius: 9999px;
+
+    /* Size */
+    height: 0.5rem;
+
+    position: relative;
+    overflow: hidden;
+}
+
+.indeterminate-progress-bar__progress {
+    /* Color */
+    background-color: #3b82f6;
+
+    /* Rounded border */
+    border-radius: 9999px;
+
+    /* Absolute position */
+    position: absolute;
+    bottom: 0;
+    top: 0;
+    width: 50%;
+
+    /* Move the bar infinitely */
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    animation-name: indeterminate-progress-bar;
+}
+
+@keyframes indeterminate-progress-bar {
+    from {
+        left: -50%;
+    }
+    to {
+        left: 100%;
+    }
+}
+```
+
+{% demo %}{% include "covers/indeterminate-progress-bar.njk" %}{% enddemo %}
+
+## See also
+
+-   [Progress bar](/progress-bar/)

contents/index.njk

@@ -77,6 +77,7 @@ eleventyExcludeFromCollections: true
     <div class="category">
         <h2 class="category__name">Feedback</h2>
         <div class="category__posts">
+            {% pattern "Indeterminate progress bar" %}{% include "covers/indeterminate-progress-bar.njk" %}{% endpattern %}
             {% pattern "Modal" %}{% include "covers/modal.njk" %}{% endpattern %}
             {% pattern "Notification" %}{% include "covers/notification.njk" %}{% endpattern %}
             {% pattern "Popover arrow" %}{% include "covers/popover-arrow.njk" %}{% endpattern %}

contents/initial-avatar.md

@@ -8,9 +8,7 @@ keywords: css avatar
 ## HTML
 
 ```html
-<div class="initial-avatar">
-    ...
-</div>
+<div class="initial-avatar">...</div>
 ```
 
 ## CSS

contents/input-addon.md

@@ -11,9 +11,7 @@ keywords: css flexbox, css input add-on
 <!-- Add-on prepended -->
 <div class="input-addon">
     <!-- Add-on -->
-    <div class="input-addon__addon input-addon__addon--prepended">
-        ...
-    </div>
+    <div class="input-addon__addon input-addon__addon--prepended">...</div>
 
     <!-- Input -->
     <input type="text" class="input-addon__input" />
@@ -25,25 +23,19 @@ keywords: css flexbox, css input add-on
     <input type="text" class="input-addon__input" />
 
     <!-- Add-on -->
-    <div class="input-addon__addon input-addon__addon--appended">
-        ...
-    </div>
+    <div class="input-addon__addon input-addon__addon--appended">...</div>
 </div>
 
 <!-- Appended and prepended add-ons -->
 <div class="input-addon">
     <!-- Add-on -->
-    <div class="input-addon__addon input-addon__addon--prepended">
-        ...
-    </div>
+    <div class="input-addon__addon input-addon__addon--prepended">...</div>
 
     <!-- Input -->
     <input type="text" class="input-addon__input" />
 
     <!-- Add-on -->
-    <div class="input-addon__addon input-addon__addon--appended">
-        ...
-    </div>
+    <div class="input-addon__addon input-addon__addon--appended">...</div>
 </div>
 ```
 

contents/inverted-corners.md

@@ -8,9 +8,7 @@ keywords: css border radius, css inverted border radius, css inverted corners
 ## HTML
 
 ```html
-<div class="inverted-corners">
-    ...
-</div>
+<div class="inverted-corners">...</div>
 ```
 
 ## CSS

contents/layered-card.md

@@ -51,10 +51,10 @@ keywords: css layered card
     /* Size */
     height: 100%;
     width: 100%;
-    
+
     z-index: 1;
 
-    background: #FFF;
+    background: #fff;
 }
 ```
 

contents/lined-paper.md

@@ -8,9 +8,7 @@ keywords: css linear gradient, css lined paper, css multiple horizontal lines
 ## HTML
 
 ```html
-<div class="lined-paper">
-    ...
-</div>
+<div class="lined-paper">...</div>
 ```
 
 ## CSS

contents/media-object.md

@@ -10,13 +10,9 @@ keywords: css flexbox, media object
 ```html
 <div class="media-object">
     <!-- Media object -->
-    <div class="media-object__media">
-        ...
-    </div>
+    <div class="media-object__media">...</div>
     <!-- Main content -->
-    <div class="media-object__content">
-        ...
-    </div>
+    <div class="media-object__content">...</div>
 </div>
 ```
 

contents/mega-menu.md

@@ -18,9 +18,7 @@ keywords: css mega menu
         <div>...</div>
 
         <!-- Mega menu -->
-        <div class="mega-menu__content">
-            ...
-        </div>
+        <div class="mega-menu__content">...</div>
     </div>
 
     <!-- Item -->

contents/menu.md

@@ -10,18 +10,14 @@ keywords: css flexbox, css menu
 ```html
 <div class="menu">
     <!-- Normal menu item -->
-    <div class="menu__item">
-        ...
-    </div>
+    <div class="menu__item">...</div>
 
     <!-- With hot key -->
     <div class="menu__item">
         <!-- Label -->
         ...
         <!-- Hot key -->
-        <div class="menu__hotkey">
-            ...
-        </div>
+        <div class="menu__hotkey">...</div>
     </div>
 
     <!-- With image and hot key -->
@@ -33,9 +29,7 @@ keywords: css flexbox, css menu
         ...
 
         <!-- Hot key -->
-        <div class="menu__hotkey">
-            ...
-        </div>
+        <div class="menu__hotkey">...</div>
     </div>
 
     <!-- Divider -->

contents/modal.md

@@ -21,9 +21,7 @@ keywords: css dialog, css flexbox, css modal
     ...
 
     <!-- Footer -->
-    <div class="modal__footer">
-        ...
-    </div>
+    <div class="modal__footer">...</div>
 </div>
 ```
 
@@ -48,7 +46,7 @@ keywords: css dialog, css flexbox, css modal
     display: flex;
     /* Push the buttons to the right */
     justify-content: flex-end;
-    
+
     /* Border */
     border-top: 1px solid #d1d5db;
 }

contents/nested-dropdowns.md

@@ -12,7 +12,8 @@ keywords: css dropdown menu, css multi-level dropdown menu, css nested dropdown
     <li>A</li>
     <li>
         <div class="nested-dropdowns__item">
-            B <div class="nested-dropdowns__arrow">...</div>
+            B
+            <div class="nested-dropdowns__arrow">...</div>
         </div>
         <ul>
             <li>B.1</li>
@@ -54,7 +55,7 @@ keywords: css dropdown menu, css multi-level dropdown menu, css nested dropdown
 
 .nested-dropdowns li {
     cursor: pointer;
-    
+
     /* Spacing */
     padding: 0.25rem;
 

contents/notification.md

@@ -10,9 +10,7 @@ keywords: css alert, css flexbox, css notification
 ```html
 <div class="notification">
     <!-- Content -->
-    <div class="notification__body">
-        ...
-    </div>
+    <div class="notification__body">...</div>
 
     <!-- Close button -->
     <button class="notification__close">

contents/overlay-play-button.md

@@ -15,9 +15,7 @@ keywords: css flexbox
     <!-- The overlay area -->
     <div class="overlay-play-button__overlay">
         <!-- The player button -->
-        <div class="overlay-play-button__play">
-            ...
-        </div>
+        <div class="overlay-play-button__play">...</div>
     </div>
 </div>
 ```
@@ -50,7 +48,7 @@ keywords: css flexbox
 }
 
 .overlay-play-button__play {
-    border: 0.25rem solid #FFF;
+    border: 0.25rem solid #fff;
     border-radius: 9999px;
     height: 3rem;
     width: 3rem;

contents/pagination.md

@@ -10,9 +10,7 @@ keywords: css flexbox, css pagination
 ```html
 <div class="pagination">
     <!-- Pagination item -->
-    <div class="pagination__item">
-        ...
-    </div>
+    <div class="pagination__item">...</div>
 
     <!-- Repeat other items -->
     ...

contents/price-tag.md

@@ -8,9 +8,7 @@ keywords: css price tag
 ## HTML
 
 ```html
-<div class="price-tag">
-    ...
-</div>
+<div class="price-tag">...</div>
 ```
 
 ## CSS
@@ -46,8 +44,7 @@ keywords: css price tag
 
     border-color: transparent var(--price-tag-background) transparent transparent;
     border-style: solid;
-    border-width: calc(var(--price-tag-height) / 2) calc(var(--price-tag-height) / 2)
-        calc(var(--price-tag-height) / 2) 0rem;
+    border-width: calc(var(--price-tag-height) / 2) calc(var(--price-tag-height) / 2) calc(var(--price-tag-height) / 2) 0rem;
 
     /* Position */
     left: 0px;

contents/progress-bar.md

@@ -44,6 +44,8 @@ keywords: css flexbox, css progress bar
 }
 ```
 
-{% demo %}
-{% include "covers/progress-bar.njk" %}
-{% enddemo %}
+{% demo %}{% include "covers/progress-bar.njk" %}{% enddemo %}
+
+## See also
+
+-   [Indeterminate progress bar](/indeterminate-progress-bar/)

contents/questions-and-answers.md

@@ -13,25 +13,18 @@ keywords: css accordion, css faq, css flexbox
     <!-- Heading -->
     <div class="questions-and-answers__header">
         <!-- Question -->
-        <div class="questions-and-answers__title">
-            ...
-        </div>
+        <div class="questions-and-answers__title">...</div>
 
         <!-- The toggle icon sticks to the right -->
-        <div class="questions-and-answers__toggle">
-        </div>
+        <div class="questions-and-answers__toggle"></div>
     </div>
 
     <!-- Answer -->
-    <div class="questions-and-answers__content">
-        ...
-    </div>
+    <div class="questions-and-answers__content">...</div>
 </div>
 
 <!-- Expanded question and answer item -->
-<div class="questions-and-answers__item questions-and-answers__item--expanded">
-    ...
-</div>
+<div class="questions-and-answers__item questions-and-answers__item--expanded">...</div>
 ```
 
 ## CSS

contents/radial-progress-bar.md

@@ -10,9 +10,7 @@ keywords: css clip rect, css flexbox, css progress bar
 ```html
 <div class="radial-progress-bar">
     <!-- Show number of percentages -->
-    <div class="radial-progress-bar__percentages">
-        ...
-    </div>
+    <div class="radial-progress-bar__percentages">...</div>
 
     <!-- The curve -->
     <div class="radial-progress-bar__curve">
@@ -29,7 +27,7 @@ keywords: css clip rect, css flexbox, css progress bar
 
 ```css
 :root {
-    --radial-progress-bar-size: 8rem; 
+    --radial-progress-bar-size: 8rem;
     --radial-progress-bar-border-width: 0.75rem;
 }
 
@@ -93,25 +91,15 @@ keywords: css clip rect, css flexbox, css progress bar
 
 .radial-progress-bar__half--first {
     /* Position */
-    clip: rect(
-        0px,
-        calc(var(--radial-progress-bar-size) * 0.5),
-        var(--radial-progress-bar-size),
-        0px
-    );
-    
+    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
-    );
+    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); */

contents/radio-button-group.md

@@ -19,9 +19,7 @@ keywords: css flexbox, css radio button
     </label>
 
     <!-- Selected item -->
-    <label class="radio-button-group__label radio-button-group__label--selected">
-        ...
-    </label>
+    <label class="radio-button-group__label radio-button-group__label--selected"> ... </label>
 
     <!-- Repeat other items -->
     ...

contents/same-height-columns.md

@@ -15,9 +15,7 @@ keywords: css flexbox, css layout, css same height columns
         ...
 
         <!-- Content -->
-        <div class="same-height-columns__content">
-            ...
-        </div>
+        <div class="same-height-columns__content">...</div>
 
         <!-- Button sticks to the bottom -->
         ...

contents/separator.md

@@ -10,9 +10,7 @@ keywords: css divider, css flexbox, css separator
 ```html
 <div class="separator">
     <!-- Text -->
-    <div class="separator__content">
-        ...
-    </div>
+    <div class="separator__content">...</div>
 
     <!-- Separator line -->
     <div class="separator__separator"></div>

contents/sidebar.md

@@ -10,14 +10,10 @@ keywords: css flexbox, css layout, css sidebar
 ```html
 <div class="sidebar">
     <!-- Sidebar -->
-    <aside class="sidebar__sidebar">
-        ...
-    </aside>
+    <aside class="sidebar__sidebar">...</aside>
 
     <!-- Main -->
-    <main class="sidebar__main">
-        ...
-    </main>
+    <main class="sidebar__main">...</main>
 </div>
 ```
 

contents/simple-grid.md

@@ -14,9 +14,7 @@ keywords: css flexbox, css flexbox grid, css grid, css layout
     <div class="simple-grid__cell simple-grid__cell--1/4">25%</div>
 
     <!-- Cell that takes remaining width -->
-    <div class="simple-grid__cell simple-grid__cell--fill">
-        ...
-    </div>
+    <div class="simple-grid__cell simple-grid__cell--fill">...</div>
 </div>
 ```
 

contents/spin-button.md

@@ -15,14 +15,10 @@ keywords: css flexbox, css spin button
     <!-- Buttons spin-button -->
     <div class="spin-button__buttons">
         <!-- Up button -->
-        <button class="spin-button__button">
-            ...
-        </button>
+        <button class="spin-button__button">...</button>
 
         <!-- Down button -->
-        <button class="spin-button__button">
-            ...
-        </button>
+        <button class="spin-button__button">...</button>
     </div>
 </div>
 ```

contents/split-screen.md

@@ -10,14 +10,10 @@ keywords: css flexbox, css layout, css split screen
 ```html
 <div class="split-screen">
     <!-- Left content -->
-    <div class="split-screen__half">
-        ...
-    </div>
+    <div class="split-screen__half">...</div>
 
     <!-- Right content -->
-    <div class="split-screen__half">
-        ...
-    </div>
+    <div class="split-screen__half">...</div>
 </div>
 ```
 

contents/statistic.md

@@ -10,14 +10,10 @@ keywords: css flexbox, css statistic
 ```html
 <div class="statistic">
     <!-- Value -->
-    <div class="statistic__value">
-        ...
-    </div>
+    <div class="statistic__value">...</div>
 
     <!-- Label -->
-    <div class="statistic__label">
-        ...
-    </div>
+    <div class="statistic__label">...</div>
 </div>
 ```
 

contents/status-light.md

@@ -13,9 +13,7 @@ keywords: css flexbox, css status light
     <div class="status-light__status"></div>
 
     <!-- Content -->
-    <div class="status-light__content">
-        ...
-    </div>
+    <div class="status-light__content">...</div>
 </div>
 ```
 

contents/sticky-footer.md

@@ -9,15 +9,9 @@ keywords: css flexbox, css layout, css sticky, css sticky footer
 
 ```html
 <div class="sticky-footer">
-    <header class="sticky-footer__header">
-        ...
-    </header>
-    <main class="sticky-footer__main">
-        ...
-    </main>
-    <footer class="sticky-footer__footer">
-        ...
-    </footer>
+    <header class="sticky-footer__header">...</header>
+    <main class="sticky-footer__main">...</main>
+    <footer class="sticky-footer__footer">...</footer>
 </div>
 ```
 

contents/sticky-header.md

@@ -9,12 +9,8 @@ keywords: css layout, css position sticky, css sticky header
 
 ```html
 <div>
-    <header class="sticky-header__header">
-        ...
-    </header>
-    <main>
-        ...
-    </main>
+    <header class="sticky-header__header">...</header>
+    <main>...</main>
 </div>
 ```
 

contents/sticky-sections.md

@@ -9,9 +9,7 @@ keywords: css layout, css sticky, css sticky sections
 
 ```html
 <div class="sticky-sections">
-    <section class="sticky-sections__section">
-        ...
-    </section>
+    <section class="sticky-sections__section">...</section>
 
     <!-- Repeat other sections -->
     ...

contents/sticky-table-column.md

@@ -11,9 +11,7 @@ keywords: css position sticky, css sticky table column
 <table class="sticky-table-column">
     <thead>
         <tr>
-            <th class="sticky-table-column__sticky">
-                ...
-            </th>
+            <th class="sticky-table-column__sticky">...</th>
 
             <!-- Other header column ... -->
         </tr>

contents/tab.md

@@ -10,14 +10,10 @@ keywords: css flexbox, css navigation, css tab
 ```html
 <div class="tab">
     <!-- Active tab -->
-    <div class="tab__item tab__item--active">
-        ...
-    </div>
+    <div class="tab__item tab__item--active">...</div>
 
     <!-- Inactive tab -->
-    <div class="tab__item tab__item--inactive">
-        ...
-    </div>
+    <div class="tab__item tab__item--inactive">...</div>
 </div>
 ```
 
@@ -52,7 +48,6 @@ keywords: css flexbox, css navigation, css tab
     /* Has only the bottom border */
     border-bottom: 1px solid #d1d5db;
 }
-
 ```
 
 {% demo %}{% include "covers/tab.njk" %}{% enddemo %}

contents/teardrop.md

@@ -10,9 +10,7 @@ keywords: css border radius, css teardrop, css water drop shape, css water dropl
 ```html
 <div class="teardrop">
     <!-- Display the content vertically -->
-    <div class="teardrop__content">
-        ...
-    </div>
+    <div class="teardrop__content">...</div>
 </div>
 ```
 

contents/three-dimensions-card.md

@@ -8,9 +8,7 @@ keywords: css 3D card
 ## HTML
 
 ```html
-<div class="three-dimensions-card">
-    ...
-</div>
+<div class="three-dimensions-card">...</div>
 ```
 
 ## CSS
@@ -20,7 +18,7 @@ keywords: css 3D card
     --three-dimensions-card-left-side-width: 1rem;
 }
 
-.three-dimensions-card {    
+.three-dimensions-card {
     position: relative;
 }
 

contents/timeline.md

@@ -22,15 +22,11 @@ keywords: css flexbox, css timeline
                 <div class="timeline__circle"></div>
 
                 <!-- The title -->
-                <div class="timeline__title">
-                    ...
-                </div>
+                <div class="timeline__title">...</div>
             </div>
 
             <!-- The description -->
-            <div class="timeline__desc">
-                ...
-            </div>
+            <div class="timeline__desc">...</div>
         </div>
 
         <!-- Repeat other items -->

contents/toggle-password-visibility.md

@@ -13,9 +13,7 @@ keywords: css flexbox, toggle password visibilit
     <input type="text" class="toggle-password-visibility__input" />
 
     <!-- Toggle button sticks to the right -->
-    <button class="toggle-password-visibility__toggle">
-        ...
-    </button>
+    <button class="toggle-password-visibility__toggle">...</button>
 </div>
 ```
 
@@ -53,13 +51,11 @@ keywords: css flexbox, toggle password visibilit
 In reality, the `click` event handler of the button needs to update the `type` attribute of the input to `text` or `password`:
 
 ```js
-document
-    .querySelector('.toggle-password-visibility__toggle')
-    .addEventListener('click', (e) => {
-        const input = e.target.previousElementSibling;
-        const type = input.getAttribute('type');
-        input.setAttribute('type', type === 'text' ? 'password' : 'text');
-    });
+document.querySelector('.toggle-password-visibility__toggle').addEventListener('click', (e) => {
+    const input = e.target.previousElementSibling;
+    const type = input.getAttribute('type');
+    input.setAttribute('type', type === 'text' ? 'password' : 'text');
+});
 ```
 
 {% demo %}{% include "covers/toggle-password-visibility.njk" %}{% enddemo %}

contents/tooltip.md

@@ -10,9 +10,7 @@ keywords: css tooltip
 ```html
 <div class="tooltip">
     <!-- The tooltip content -->
-    <div class="tooltip__content">
-        ...
-    </div>
+    <div class="tooltip__content">...</div>
 
     <!-- The tooltip arrow -->
     <div class="tooltip__arrow"></div>

contents/tree-diagram.md

@@ -31,7 +31,7 @@ keywords: css sitemap, css tree diagram
                 ...
             </ul>
         </li>
-        
+
         <!-- Repeat other items -->
         ...
     </ul>
@@ -120,9 +120,7 @@ You can add a root item to the tree:
 ```html
 <div class="tree-diagram">
     <ul>
-        <li class="tree-diagram__root">
-            ...
-        </li>
+        <li class="tree-diagram__root">...</li>
     </ul>
 </div>
 ```

contents/video-background.md

@@ -13,15 +13,11 @@ In this pattern, the video is displayed in the background.
 <div class="video-background">
     <!-- The video container -->
     <div class="video-background__inner">
-        <video class="video-background__video" src="...">
-            ...
-        </video>
+        <video class="video-background__video" src="...">...</video>
     </div>
 
     <!-- The content -->
-    <div class="video-background__content">
-        ...
-    </div>
+    <div class="video-background__content">...</div>
 </div>
 ```
 

contents/watermark.md

@@ -12,9 +12,7 @@ keywords: css watermark
     <!-- Watermark container -->
     <div class="watermark__inner">
         <!-- The watermark -->
-        <div class="watermark__body">
-            Draft
-        </div>
+        <div class="watermark__body">Draft</div>
     </div>
 
     <!-- Other content -->

contents/wizard.md

@@ -16,9 +16,7 @@ keywords: css flexbox, css stepper, css wizard
             <div class="wizard__connector"></div>
 
             <!-- The step number -->
-            <div class="wizard__number">
-                ...
-            </div>
+            <div class="wizard__number">...</div>
 
             <!-- The right connector -->
             <div class="wizard__connector"></div>

styles/blocks/_category.scss

@@ -10,7 +10,7 @@
     grid-template-columns: repeat(var(--category__post-num-columns), 1fr);
     background-color: #fff;
     border-radius: 0.5rem;
-    box-shadow: 0 0 1.5rem rgb(0 0 0 / 10%);    
+    box-shadow: 0 0 1.5rem rgb(0 0 0 / 10%);
 }
 .category__link {
     background: #4338ca;
@@ -38,4 +38,4 @@
     :root {
         --category__post-num-columns: 5;
     }
-}
+}

styles/blocks/_css-scan.scss

@@ -80,4 +80,4 @@
         right: -5%;
         transform: scale(1.1) rotate(-7deg);
     }
-}
+}

styles/blocks/_example.scss

@@ -68,4 +68,4 @@
 }
 .example__content--large {
     height: 40rem;
-}
+}

styles/blocks/_pattern.scss

@@ -27,4 +27,4 @@
     color: #6366f1;
     font-size: 1.25rem;
     font-weight: 500;
-}
+}

styles/index.scss

@@ -55,6 +55,7 @@
 @import './patterns/full-background';
 @import './patterns/full-screen-menu';
 @import './patterns/holy-grail';
+@import './patterns/indeterminate-progress-bar';
 @import './patterns/initial-avatar';
 @import './patterns/input-addon';
 @import './patterns/inverted-corners';

styles/pages/_home.scss

@@ -2,4 +2,4 @@
     font-size: 1.5rem;
     margin-top: 2rem;
     text-align: center;
-}
+}

styles/patterns/_accordion.scss

@@ -29,4 +29,4 @@
 }
 .accordion__item--expanded .accordion__content {
     display: block;
-}
+}

styles/patterns/_arrow-buttons.scss

@@ -63,4 +63,4 @@
     left: 0;
     top: 50%;
     transform: translate(0%, -50%);
-}
+}

styles/patterns/_avatar-list.scss

@@ -10,8 +10,8 @@
 }
 .avatars__image {
     background-color: #d1d5db;
-    box-shadow: 0 0 0 0.25rem #FFF;
-    color: #FFF;
+    box-shadow: 0 0 0 0.25rem #fff;
+    color: #fff;
     font-size: 0.75rem;
 
     /* Rounded border */
@@ -25,4 +25,4 @@
     /* Size */
     height: 2rem;
     width: 2rem;
-}
+}

styles/patterns/_avatar.scss

@@ -14,4 +14,4 @@
 .avatar__image {
     height: 50%;
     width: 50%;
-}
+}

styles/patterns/_badge.scss

@@ -12,4 +12,4 @@
     border-radius: 9999px;
     height: 3rem;
     width: 3rem;
-}
+}

styles/patterns/_box-selector.scss

@@ -4,7 +4,7 @@
     grid-template-columns: repeat(2, 1fr);
     column-gap: 0.5rem;
     row-gap: 0.5rem;
-    
+
     height: 8rem;
     width: 8rem;
 }
@@ -12,7 +12,7 @@
 .box-selector {
     border: 1px solid #d1d5db;
     border-radius: 0.25rem;
-    padding: .5rem;
+    padding: 0.5rem;
 }
 
 .box-selector--selected {
@@ -32,4 +32,4 @@
         background-position: center center;
         background-repeat: no-repeat;
     }
-}
+}

styles/patterns/_breadcrumb.scss

@@ -10,11 +10,11 @@
 }
 
 .breadcrumb__item:not(:last-child)::after {
-    /* Absolute position */   
+    /* Absolute position */
     position: absolute;
     right: 0;
     top: 0;
     transform: translate(0.5rem, 0px);
 
-    content: '/';    
-}
+    content: '/';
+}

styles/patterns/_button-with-icon.scss

@@ -8,11 +8,11 @@
     /* Demo */
     background: #fff;
     border: 1px solid #d1d5db;
-    border-radius: 0.25rem;    
+    border-radius: 0.25rem;
     width: 8rem;
 }
 
 .button-with-icon__label {
     flex: 1;
     margin-left: 0.5rem;
-}
+}

styles/patterns/_calendar.scss

@@ -24,10 +24,10 @@
     color: #fff;
 }
 
-.calendar__day:nth-child(7n+1) {
+.calendar__day:nth-child(7n + 1) {
     border-left: 1px solid #d1d5db;
 }
 
 .calendar__day--disabled {
-    color: #e5e7eb;   
-}
+    color: #e5e7eb;
+}

styles/patterns/_card-layout.scss

@@ -20,4 +20,4 @@
 
     /* Demo */
     margin: 0.25rem 0;
-}
+}

styles/patterns/_card.scss

@@ -16,4 +16,4 @@
     /* Take available height */
     flex: 1;
     padding: 0.5rem;
-}
+}

styles/patterns/_centering.scss

@@ -6,4 +6,4 @@
     /* Demo */
     flex-direction: column;
     width: 6rem;
-}
+}

styles/patterns/_circular-navigation.scss

@@ -63,7 +63,7 @@
     --circular-navigation__circle-degree: 60deg;
     --circular-navigation__content-degree: -60deg;
 }
-.circular-navigation__circle--3{
+.circular-navigation__circle--3 {
     --circular-navigation__circle-degree: 120deg;
     --circular-navigation__content-degree: -120deg;
 }

styles/patterns/_color-swatch.scss

@@ -15,20 +15,20 @@
     margin: 0.5rem;
 }
 .swatch__item--1st {
-    background-color: rgba(0, 0, 0, .1);
+    background-color: rgba(0, 0, 0, 0.1);
 }
 .swatch__item--2nd {
-    background-color: rgba(0, 0, 0, .2);
+    background-color: rgba(0, 0, 0, 0.2);
 }
 .swatch__item--3rd {
     background-color: #d1d5db;
 }
 .swatch__item--4th {
-    background-color: rgba(0, 0, 0, .4);
+    background-color: rgba(0, 0, 0, 0.4);
 }
 .swatch__item--5th {
-    background-color: rgba(0, 0, 0, .5);
+    background-color: rgba(0, 0, 0, 0.5);
 }
 .swatch__item--6th {
-    background-color: rgba(0, 0, 0, .6);
-}
+    background-color: rgba(0, 0, 0, 0.6);
+}

styles/patterns/_concave-corners.scss

@@ -53,4 +53,4 @@
 
     /* Border radius */
     border-radius: 1rem 0 0 0;
-}
+}

styles/patterns/_cookie-banner.scss

@@ -9,9 +9,9 @@
     display: flex;
 }
 
-.cookie-banner__content {    
+.cookie-banner__content {
     border-top: 1px solid #d1d5db;
     /* Take available width */
     flex: 1;
     padding: 0 0.5rem;
-}
+}

styles/patterns/_corner-ribbon.scss

@@ -38,4 +38,4 @@
 
     /* Centerize the text content */
     text-align: center;
-}
+}

styles/patterns/_curved-background.scss

@@ -11,4 +11,4 @@
 
     height: 50%;
     width: 100%;
-}
+}

styles/patterns/_custom-checkbox-button.scss

@@ -35,4 +35,4 @@
 .custom-checkbox-button__checkbox--selected {
     /* For selected checkbox */
     background-color: #3b82f6;
-}
+}

styles/patterns/_custom-radio-button.scss

@@ -39,4 +39,4 @@
 .custom-radio-button__radio--selected {
     /* For selected radio */
     background-color: #3b82f6;
-}
+}

styles/patterns/_diagonal-section.scss

@@ -21,4 +21,4 @@
 
     /* Background color */
     background-color: #d1d5db;
-}
+}

styles/patterns/_docked-at-corner.scss

@@ -22,4 +22,4 @@
     /* Size */
     height: 1rem;
     width: 1rem;
-}
+}