Border_um_kreiss_mit_prozent.php
Quell Code
<style> .wrap.full output:before, .wrap:not(.full) output { position: absolute; width: 2.5em; height: 2.5em; opacity: 0; color: #fff; pointer-events: none; transition: opacity 0.5s ease-in-out; } * { margin: 0; } body { background: #3d3d4a; } .wrap { margin: 2em auto; width: 25em; font: 2vmin trebuchet ms, arial, sans-serif; } @media (max-width: 500px), (max-height: 500px) { .wrap { font-size: 10px; } } @media (min-width: 1600px), (min-height: 1600px) { .wrap { font-size: 32px; } } .wrap:not(.full) { position: relative; } .wrap:not(.full) output { top: 0; transform: translate(calc(var(--val)/100*22.5em)); } .wrap.full { position: relative; height: 25em; } .wrap.full [type=range] { display: block; transform-origin: 100% 0; transform: rotate(-90deg) translatey(-100%); } .wrap.full output { width: 80%; height: 80%; border-radius: 50%; color: #7a7a7a; font-size: 4em; font-weight: 700; } .wrap.full output:before { right: 0; bottom: 0; transform: translatey(calc(var(--val)/-100*22.5em)); line-height: 2.5em; text-align: center; font-size: 0.25em; font-weight: 200; counter-reset: val var(--val); content: counter(val) "%"; } [type=range] { padding: 0; width: 25em; height: 2.5em; background: transparent; font: inherit; cursor: pointer; } [type=range], [type=range]::-webkit-slider-thumb { -webkit-appearance: none; } [type=range]::-webkit-slider-runnable-track { border: none; width: 25em; height: 0.5em; border-radius: 0.25em; background: #343440; } [type=range]::-moz-range-track { border: none; width: 25em; height: 0.5em; border-radius: 0.25em; background: #343440; } [type=range]::-ms-track { border: none; width: 25em; height: 0.5em; border-radius: 0.25em; background: #343440; } [type=range]::-webkit-slider-thumb { margin-top: -1em; border: none; width: 2.5em; height: 2.5em; border-radius: 50%; transform: scale(0.7); background: #e6323e; filter: saturate(0.7); transition: transform 0.5s linear, filter 0.5s; } [type=range]::-moz-range-thumb { border: none; width: 2.5em; height: 2.5em; border-radius: 50%; transform: scale(0.7); background: #e6323e; filter: saturate(0.7); transition: transform 0.5s linear, filter 0.5s; } [type=range]::-ms-thumb { margin-top: 0; border: none; width: 2.5em; height: 2.5em; border-radius: 50%; transform: scale(0.7); background: #e6323e; filter: saturate(0.7); transition: transform 0.5s linear, filter 0.5s; } [type=range]::-ms-tooltip { display: none; } [type=range] + output { display: flex; align-items: center; justify-content: center; background: radial-gradient(#3d3d4a 39%, transparent 39.5%), conic-gradient(#e64c65 calc(var(--val)*1%), #41a8ab 0%); } [type=range] + output:after { content: "%"; } [type=range]:focus { outline: none; } [type=range]:focus::-webkit-slider-thumb { transform: none; filter: none; } [type=range]:focus::-moz-range-thumb { transform: none; filter: none; } [type=range]:focus::-ms-thumb { transform: none; filter: none; } .wrap:not(.full) [type=range]:focus + output, .wrap.full [type=range]:focus + output:before { opacity: 1; } </style> <div class='wrap'> <input id='r' type='range'/> </div> <script> const _R = document.getElementById('r'), _W = _R.parentNode, _O = document.createElement('output'); let val = null,conic = false; function update() { let newval = +_R.value; if (val !== newval) { _W.style.setProperty('--val', _O.value = val = newval); if (conic) _O.setAttribute('aria-label', `${val}%`); } }; update(); _O.setAttribute('for', _R.id); _W.appendChild(_O); if (getComputedStyle(_O).backgroundImage !== 'none') { conic = true; _W.classList.add('full'); _O.setAttribute('role', 'img'); _O.setAttribute('aria-label', `${val}%`); } addEventListener('input', update, false); addEventListener('change', update, false); </script>
Comments