使用CSS3变量实现的进度条界面组件

Progress with CSS variables

css3, var, bar

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 5005
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

:root {
    --displayError: none;
    --displayDemo: block;
    --bgColor: #F8BBD0;
    --color: #C2185B;
}
/* setting a basic font size */

@media screen and (min-width: 981px) {
    html {
        font-size: 62.5%;
    }
}
@media screen and (min-width: 641px) and (max-width: 980px) {
    html {
        font-size: 9px;
    }
}
@media screen and (max-width: 640px) {
    html {
        font-size: 8px;
    }
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Open Sans", "Helvetica Neue", "Segoe UI", sans-serif;
    font-size: 1.6rem;
    margin: 0;
    background-color: #f0f0f0;
}
.melnik909 {
    color: #000;
    text-decoration: none;
}
.melnik909:hover,
.melnik909:focus {
    text-decoration: underline;
}
.title {
    margin: 0 0 8rem;
    font-size: 3rem;
    font-weight: 300;
}
.error {
    font-size: 3rem;
    font-weight: 700;
    display: block;
    display: var(--displayError);
}
.error__hint {
    display: block;
    font-size: 1.8rem;
    margin-top: .5rem;
}
/* styles for layout */

.content {
    min-height: 100vh;
    padding-bottom: 8rem;
    box-sizing: border-box;
    position: relative;
}
.main-container {
    min-width: 100px;
    max-width: 800px;
    padding-top: 6rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-left: 1rem;
    padding-right: 1rem;
}
.footer {
    text-align: center;
    width: 100%;
    padding-top: 2rem;
    padding-bottom: 2rem;
    position: absolute;
    left: 0;
    bottom: 0;
}
.demo {
    display: none;
    display: var(--displayDemo);
}
/* control-panel */

.control-panel {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 8rem;
}
@media screen and (max-width: 640px) {
    .control-panel {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
}
.control-panel__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-right: 2%;
}
@media screen and (max-width: 640px) {
    .control-panel__item {
        margin-top: 5rem;
    }
    .control-panel__item:first-child {
        margin-top: 0;
    }
}
.control-panel__hint {
    font-weight: 700;
    margin-right: .5rem;
}
/* select select-color */

.select-color {
    width: 3rem;
    height: 3rem;
    display: inline-block;
    margin-left: .5rem;
    margin-right: .5rem;
    cursor: pointer;
    overflow: hidden;
    border-radius: 50%;
    text-indent: -999px;
}
.select-color_pink {
    background-color: #C2185B;
}
.select-color_purpure {
    background-color: #512DA8;
}
.select-color_red {
    background-color: #D32F2F;
}
.select-color_orange {
    background-color: #F57C00;
}
.select-color_green {
    background-color: #388E3C;
}
#pink:checked ~ .demo {
    --bgColor: #F8BBD0;
    --color: #C2185B;
}
#purpure:checked ~ .demo {
    --bgColor: #D1C4E9;
    --color: #512DA8;
}
#red:checked ~ .demo {
    --bgColor: #FFCDD2;
    --color: #D32F2F;
}
#orange:checked ~ .demo {
    --bgColor: #FFE0B2;
    --color: #F57C00;
}
#green:checked ~ .demo {
    --bgColor: #C8E6C9;
    --color: #388E3C;
}
/* switch */

.switch {
    position: absolute;
    top: 0;
    left: -9999px;
}
/* range */

.range {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.range:focus {
    outline: none;
}
.range::-webkit-slider-runnable-track {
    height: 3px;
    cursor: pointer;
    background-color: var(--bgColor);
    border: none;
}
.range::-webkit-slider-thumb {
    width: 2rem;
    height: 2rem;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: var(--color);
    border-radius: 50%;
    -webkit-appearance: none;
    appearance: none;
}
.range::-moz-range-track {
    height: 3px;
    cursor: pointer;
    background-color: var(--bgColor);
    border: none;
}
.range::-moz-range-thumb {
    width: 2rem;
    height: 2rem;
    transform: translateY(-5%);
    background-color: var(--color);
    border-radius: 50%;
    -moz-appearance: none;
    appearance: none;
    border: none;
}
/*
 * progress styles
 */
/* core styles */

:root {
    --cssuiProgressHeight: 2rem;
}
.cssui-progress__bar {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    display: block;
    height: var(--cssuiProgressHeight);
    background-color: var(--cssuiProgressBgColor);
    color: var(--cssuiProgressColor);
}
.cssui-progress__bar[value]::-webkit-progress-bar {
    background-color: var(--cssuiProgressBgColor);
}
.cssui-progress__bar[value]::-webkit-progress-value {
    background-color: var(--cssuiProgressColor);
    -webkit-transition: width .4s ease-out;
    transition: width .4s ease-out;
}
.cssui-progress__bar[value]::-moz-progress-bar {
    background-color: var(--cssuiProgressColor);
}
/* styles for demo */

.cssui-progress__bar {
    width: 85%;
    margin-right: auto;
    margin-left: auto;
    --cssuiProgressBgColor: var(--bgColor);
    --cssuiProgressColor: var(--color);
    --cssuiProgressHeight: 5px;
}
.cssui-progress__value {
    font-weight: 700;
    font-size: 2rem;
    margin-top: 1rem;
    display: inline-block;
}

HTML

<div class="content">
    <div class="main-container">
        <input type="radio" id="pink" name="colors" class="switch" checked>
        <input type="radio" id="purpure" name="colors" class="switch">
        <input type="radio" id="red" name="colors" class="switch">
        <input type="radio" id="orange" name="colors" class="switch">
        <input type="radio" id="green" name="colors" class="switch">
        <div class="error">
            <span>Your browser doesn't support a CSS Variables</span>
            <span class="error__hint">Use other browser. For example: Chrome or Firefox</span>
        </div>
        <div class="demo">
            <h1 class="title">Progress with CSS variables</h1>
            <div class="control-panel">
                <div class="control-panel__item">
                    <span class="control-panel__hint">Select color:</span>
                    <label for="pink" class="select-color select-color_pink">Pink</label>
                    <label for="purpure" class="select-color select-color_purpure">Purpure</label>
                    <label for="red" class="select-color select-color_red">Red</label>
                    <label for="orange" class="select-color select-color_orange">Orange</label>
                    <label for="green" class="select-color select-color_green">Green</label>
                </div>
                <div class="control-panel__item">
                    <span class="control-panel__hint">Select value:</span>
                    <input class="range js-value-progress" type="range" min="0" max="100" step="5" value="55">
                </div>
            </div>
            <div class="cssui-progress js-progress">
                <progress class="cssui-progress__bar js-progress__bar" max="100" value="55"></progress>
                <span class="js-progress__value cssui-progress__value">55%</span>
            </div>
        </div>
    </div>
</div>

Progress with CSS variables

css3, var, bar

编辑器支持Emmet

快捷键

Progress with CSS variables

css3, var, bar

使用CSS3矩阵变换（transform:matrix）实现的圆周运动

使用CSS3旋转变换和混合模式实现的动画图标

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：