Back to top with progress indicator

[Sina]

I nice Feature for Back to top
Take a Look.
https://codepen.io/ig_design/pen/yrwgwO

[Max]

Hi @Sina

I’ve talked to the devs and they’ll be happy to customize the widget this way for you.

I’ve passed your request on to the devs and will update you once the solution is ready

[Max]

Thank you for waiting, @Sina

Our devs came up with a solution for your request. This code was added to the Custom CSS field on the Settings tab of your widget’s settings:

.global-styles,
.progress-square,
.progress-square2 {
	position: fixed;
	right: 2px;
	bottom: 1px;
	width: 71px;
	height: 36px;
	transition: bottom 0.3s; 
}

.global-styles,
.progress-square-svg,
.progress-square-svg2 {
	width: 100%;
	height: 100%;
	
}

.global-styles,
.progress-path {
	fill: transparent;
	stroke: black;
	stroke-width: 1;
	stroke-dasharray: 177;
	stroke-dashoffset: 177;
	transition: stroke-dashoffset 0.25s linear;
}

.global-styles,
.progress-path2 {
	fill: transparent;
	stroke: black;
	stroke-width: 1;
	opacity: 0.1;
}

.global-styles,
[class*='Button__Inner-sc']::after {
  border: none !important;
}

And this script was added to the Custom JS field:

const waitForElement = (selector, root = document) => new Promise(res => {
	let i = 0;

	const check = () => {
		const component = root.querySelector(selector);

		if (component) {
			res(component);
		} else if (i !== 100) {
			setTimeout(check, 100);
			i++;
		}
	};

	check();
});

waitForElement('[class*="Button__Inner-sc"]')
	.then((button) => {
		const progressSquareDiv = document.createElement('div');
		progressSquareDiv.className = 'progress-square';
		const progressSquareDiv2 = document.createElement('div');
		progressSquareDiv2.className = 'progress-square2';
		
		const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
		svgElement.setAttribute('class', 'progress-square-svg');
		svgElement.setAttribute('width', '71');
		svgElement.setAttribute('height', '36');
		svgElement.setAttribute('viewBox', '0 0 71 36');
		const svgElement2 = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
		svgElement2.setAttribute('class', 'progress-square-svg2');
		svgElement2.setAttribute('width', '71');
		svgElement2.setAttribute('height', '36');
		svgElement2.setAttribute('viewBox', '0 0 71 36');
		
		const rectElement = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
		rectElement.setAttribute('x', '1');
		rectElement.setAttribute('y', '1');
		rectElement.setAttribute('width', '70');
		rectElement.setAttribute('height', '34');
		rectElement.setAttribute('rx', '20');
		rectElement.setAttribute('ry', '20');
		rectElement.setAttribute('class', 'progress-path');
		const rectElement2 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
		rectElement2.setAttribute('x', '1');
		rectElement2.setAttribute('y', '1');
		rectElement2.setAttribute('width', '70');
		rectElement2.setAttribute('height', '34');
		rectElement2.setAttribute('rx', '20');
		rectElement2.setAttribute('ry', '20');
		rectElement2.setAttribute('class', 'progress-path2');
		
		svgElement.appendChild(rectElement);
		svgElement2.appendChild(rectElement2);
		
		progressSquareDiv.appendChild(svgElement);
		progressSquareDiv2.appendChild(svgElement2);
		
		document.body.appendChild(progressSquareDiv);
		document.body.appendChild(progressSquareDiv2);

		progressSquareDiv2.style.display = 'none';

		window.addEventListener('scroll', function () {
			const scrollTop = window.scrollY;
			const docHeight = document.documentElement.scrollHeight - window.innerHeight;
			const scrollPercent = scrollTop / docHeight;

			const square = document.querySelector('.progress-path');
			const maxOffset = 177;
			const offset = maxOffset - (maxOffset * scrollPercent);

			square.style.strokeDashoffset = offset;

			square.style.stroke = scrollTop > 0 ? '#582f0c' : 'black';

			if (scrollTop > 0) {
				progressSquareDiv2.style.display = 'block';
		} else {
				progressSquareDiv2.style.display = 'none';
		}
		});

		button.addEventListener('mouseenter', function () {
			document.querySelector('.progress-square').style.bottom = '3px';
			document.querySelector('.progress-square2').style.bottom = '3px';
		});

		button.addEventListener('mouseleave', function () {
			document.querySelector('.progress-square').style.bottom = '1px';
			document.querySelector('.progress-square2').style.bottom = '1px';
		});
	});

Have a look and let me know if you like the result

[Sina]

H @Max,
wow how fast you work.
But in the Widgetconfig dosn’t work.

[Max]

Yes, Custom JS doesn’t work in the configurator, but on the published page everything should be fine

[Sina]

ok. I’ll test it.

[Sina]

Hi @Max,
it works.
This cusom CSS/JS is only for this Button Style.

When I set another Button style, then the code would have to be adapted

[Max]

Yes, it’s impossible to come up with a universal solution, and this code works only with the style that was chosen in your widget.

If you’d like to use another style, please let me know and we’ll try to adjust the code.

[Sina]

Hi @Max,
that’s good to know. This is fine for my purposes. Thanks for that. However, the idea was to offer a progrss indicator in the widgetconfig for all possible button styles.

[Max]

Got you! I’ve added your idea back to the Wishlist - Progress indicator.

If more users support it, it might be considered