fercomunello/hx-progres-bar.html

## hx-progres-bar.html
<!-- add hx-indicator="#main-progress-bar" on <body> -->
<div id="main-progress-bar" class="progress-bar">
    <div class="progress-indicator"></div>
</div>

## hx-progress-bar.scss

:root {
  /* on the main style.scss */
  --z-index-progress-bar: 100;
}

.progress-bar {
    position: fixed;
    top: 0;
    height: 4px;
    width: 100%;
    overflow: hidden;
    background: transparent;
    background-clip: padding-box;
    border-radius: 300px;
    z-index: var(--z-index-progress-bar);

    .progress-indicator {
        background-color: var(--header-dash);

        &:before {
            content: '';
            display: block;
            position: absolute;
            background-color: inherit;
            top: 0;
            left: 0;
            bottom: 0;
            width: 90%;
            will-change: left, right;
            animation: indeterminate 2s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
        }
        &:after {
            content: '';
            display: block;
            position: absolute;
            background-color: inherit;
            top: 0;
            left: 0;
            bottom: 0;
            will-change: left, right;
            animation: indeterminate-short 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
            animation-delay: 1s;
        }
    }
}

.progress-bar {
    display: none;
}
.htmx-request .progress-bar {
    display: inline;
}
.htmx-request.progress-bar {
    display: inline;
}

@keyframes indeterminate {
    0% {
        left: -35%;
        right: 100%;
    }
    60% {
        left: 100%;
        right: -90%;
    }
    100% {
        left: 100%;
        right: -90%;
    }
}

@keyframes indeterminate-short {
    0% {
        left: -200%;
        right: 100%;
    }
    60% {
        left: 107%;
        right: -8%;
    }
    100% {
        left: 107%;
        right: -8%;
    }
}

## hx-progress-bar.ts
import html from './hx-progress-bar.html';

domReady(() => {
    insertHtmlAfterBegin( $('#main-header'), html );

    /* when the htmx ajax request is so fast that the progress-bar just blinks,
      add a timeout to display the animation at least for 180ms ... */
    htmxAfterRequest(() => {
        $('.progress-bar').classList.add('htmx-request');

        setTimeout(function () {
            $('.progress-bar').classList.remove('htmx-request');
        }, 180);
    });
});
	<!-- add hx-indicator="#main-progress-bar" on <body> -->
	<div id="main-progress-bar" class="progress-bar">
	<div class="progress-indicator"></div>
	</div>

	:root {
	/* on the main style.scss */
	--z-index-progress-bar: 100;
	}

	.progress-bar {
	position: fixed;
	top: 0;
	height: 4px;
	width: 100%;
	overflow: hidden;
	background: transparent;
	background-clip: padding-box;
	border-radius: 300px;
	z-index: var(--z-index-progress-bar);

	.progress-indicator {
	background-color: var(--header-dash);

	&:before {
	content: '';
	display: block;
	position: absolute;
	background-color: inherit;
	top: 0;
	left: 0;
	bottom: 0;
	width: 90%;
	will-change: left, right;
	animation: indeterminate 2s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
	}
	&:after {
	content: '';
	display: block;
	position: absolute;
	background-color: inherit;
	top: 0;
	left: 0;
	bottom: 0;
	will-change: left, right;
	animation: indeterminate-short 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
	animation-delay: 1s;
	}
	}
	}

	.progress-bar {
	display: none;
	}
	.htmx-request .progress-bar {
	display: inline;
	}
	.htmx-request.progress-bar {
	display: inline;
	}

	@keyframes indeterminate {
	0% {
	left: -35%;
	right: 100%;
	}
	60% {
	left: 100%;
	right: -90%;
	}
	100% {
	left: 100%;
	right: -90%;
	}
	}

	@keyframes indeterminate-short {
	0% {
	left: -200%;
	right: 100%;
	}
	60% {
	left: 107%;
	right: -8%;
	}
	100% {
	left: 107%;
	right: -8%;
	}
	}
	import html from './hx-progress-bar.html';

	domReady(() => {
	insertHtmlAfterBegin( $('#main-header'), html );

	/* when the htmx ajax request is so fast that the progress-bar just blinks,
	add a timeout to display the animation at least for 180ms ... */
	htmxAfterRequest(() => {
	$('.progress-bar').classList.add('htmx-request');

	setTimeout(function () {
	$('.progress-bar').classList.remove('htmx-request');
	}, 180);
	});
	});