Internetstiftelsen Styleguide

Progress: Meter 

<label class="a-progress-label"> <span>40% </span><meter class="a-progress" data-width-progress max="100" value="40" data-value="40">40</meter></label>
 
{{#if has_label}}<label class="a-progress-label{{#if additional_classes}} a-progress-label--large{{/if}}{{#if hidden_label}} a-progress-label--hidden{{/if}}"> <span>{{value}}% {{/if}}</span><{{#if meter}}meter{{else}}progress{{/if}} class="a-progress{{#if heat}} a-progress--heat a-progress--large{{/if}}{{#if additional_classes}} {{additional_classes}}{{/if}}" data-width-progress max="{{max}}" value="{{value}}" {{#if max_width}}style="max-width:{{max_width}}"{{/if}} data-value="{{value}}">{{value}}</{{#if meter}}meter{{else}}progress{{/if}}>{{#if has_label}}</label>{{/if}}
 
{
  "has_label": true,
  "value": "40",
  "max": "100",
  "max_width": false,
  "additional_classes": false,
  "meter": true
}
  • Content: 
    @charset "UTF-8";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;
@use '../../vendor/grid/breakpoints' as breakpoint;

@include mixin.atom(progress) {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 0;
	pointer-events: none;
	cursor: none;
	border-radius: var.$border-radius;
	overflow: hidden;

	&[value] {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		display: block;
		color: colors.$color-ocean;
		background: colors.$color-concrete;
		border: none;
		width: 100%;
		border-radius: var.$border-radius;
		height: func.rhythm(1);
		position: relative;

		@include breakpoint.bp-up(md) {
			height: func.rhythm(2);
		}
	}

	&[value]::-moz-progress-value,
	&[value]::-moz-meter-optimum {
		border-radius: 0;
		background: colors.$color-ocean;
		transition: padding-bottom 5s ease;
		padding-left: 60px;
		padding-bottom: var(--value);
		height: 0;
		transform-origin: 0 0;
		transform: rotate(-90deg) translateX(-60px) ;
	}

	&[value]::-webkit-progress-bar,
	&[value]::-webkit-meter-bar,
	&[value]::-webkit-meter-optimum-value
	{
		border-radius: 0;
		background: colors.$color-concrete;
		transition: width 5s ease;
		block-size: func.rhythm(1);

		@include breakpoint.bp-up(md) {
			block-size: func.rhythm(2);
		}
	}

	&[value]::-webkit-progress-value,
	&[value]::-webkit-meter-optimum-value {
		background: colors.$color-ocean;
	}

	&::-moz-progress-bar {
		background: colors.$color-ocean;
	}

	&::-moz-meter-bar {
		background: colors.$color-ocean;
	}

	&:-moz-meter-optimum::slider-fill {
		background: colors.$color-ocean;
	}

	@include bem.m(large) {
		&[value],
		&[value]::-webkit-progress-bar,
		&[value]::-webkit-meter-bar,
		&[value]::-webkit-meter-optimum-value {
			height: func.rhythm(4);
			block-size: func.rhythm(4);
		}
	}

	@include bem.m(heat) {
		position: relative;

		&[value]::-webkit-progress-value,
		&[value]::-webkit-meter-optimum-value {
			border-radius: 0;
			transition: width .25s ease-out;
			background: linear-gradient(90deg, rgba(217, 0, 47, 1) 0%, rgba(217, 0, 47, 1) 19.99%, rgba(255, 64, 105, 1) 20%, rgba(255, 64, 105, 1) 39.99%, rgba(249, 153, 99, 1) 40%, rgba(249, 153, 99, 1) 59.99%, rgba(255, 206, 46, 1) 60%, rgba(255, 206, 46, 1) 79.99%, rgba(37, 194, 121, 1) 80%, rgba(37, 194, 121, 1) 89.99%, rgba(25, 135, 84, 1) 90%, rgba(25, 135, 84, 1) 100%);
			background-size: var(--progressbar-width) 100%; /* The value is calculated by JS and set in the DOM */
			background-repeat: no-repeat;
		}

		&::-moz-progress-bar {
			transition: width .25s ease-out;
			background: linear-gradient(90deg, rgba(217, 0, 47, 1) 0%, rgba(217, 0, 47, 1) 19.99%, rgba(255, 64, 105, 1) 20%, rgba(255, 64, 105, 1) 39.99%, rgba(249, 153, 99, 1) 40%, rgba(249, 153, 99, 1) 59.99%, rgba(255, 206, 46, 1) 60%, rgba(255, 206, 46, 1) 79.99%, rgba(37, 194, 121, 1) 80%, rgba(37, 194, 121, 1) 89.99%, rgba(25, 135, 84, 1) 90%, rgba(25, 135, 84, 1) 100%);
			background-size: var(--progressbar-width) 100%; /* The value is calculated by JS and set in the DOM */
			background-repeat: no-repeat;
		}

		&::after {
			position: absolute;
			top: 50%;
			left: var(--progressbar-width-percent);
			content: attr(data-value) '%';
			display: block;
			color: colors.$color-cyberspace;
			transform: translateX(-100%) translateY(-50%);
			padding-right: func.rhythm(1);
			color: colors.$color-snow;
			text-shadow: 0 0 5px colors.$color-cyberspace;
			font-size: var.$size-base * 1.2;
			line-height: 1;
			font-family: var.$font-family-headings;
		}
	}
}

@include mixin.atom(progress-label) {
	display: flex;
	align-items: center;

	> progress,
	> meter {
		margin-left: func.rhythm(1);
	}

	@include bem.m(large) {
		font-size: var.$size-base * 1.5;
	}

	@include bem.m(hidden) {
		span {
			@include mixin.visuallyhidden;
		}

		> progress,
		> meter {
			margin-left: 0;
		}
	}
}
  • URL: /components/raw/progress/_progress.scss
  • Filesystem Path: src/atoms/progress/_progress.scss
  • Size: 4.1 KB
  • Content: 
    const progressbars = document.querySelectorAll('[data-width-progress]');

if (progressbars.length) {
	function progressBarWidths() {
		progressbars.forEach((container) => {
			const width = container.offsetWidth;
			const value = +container.getAttribute('value') || 0;
			const max = +container.getAttribute('max') || 100;
			const percent = Math.round((value / max * 100) / 2) * 2;

			document.documentElement.style.setProperty('--progressbar-width', width + 'px');
			document.documentElement.style.setProperty('--progressbar-width-percent', percent + '%');
		});
	}

	window.addEventListener('DOMContentLoaded', progressBarWidths);
	window.addEventListener('resize', progressBarWidths);
}
  • URL: /components/raw/progress/progress.js
  • Filesystem Path: src/atoms/progress/progress.js
  • Size: 693 Bytes

No notes defined.