マテリアルデザインのチェックボックス/ラジオボタンとローディングインジケーターをCSSで作った

Googleのマテリアルデザイン風のチェックボックス・ラジオボタン・ローディングインジケーターを作りました。

#チェックボックス・ラジオボタン
Codepenにも置いておきましたので併せてどうぞ。Codepenで見る

共通CSSは以下のようになります。

共通CSS

input[type=radio], input[type=checkbox] {
    display: none;
}
input[type=radio] + label, input[type=checkbox] + label {
    position: relative;
    padding-left: 20px;
}

##チェックボックス
HTMLは以下のように書いてください。id属性とfor属性、labelのテキストは適宜変更してください。

チェックボックスのHTML

<input id="check1" type="checkbox" checked><label for="check1">check1</label>

CSSは以下のようになります。#009688のところは適宜変更してください。

チェックボックスのCSS

input[type=checkbox] + label::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    top: 4px;
    left: 2px;
    width: 16px;
    height: 16px;
    border: 2px solid #9E9E9E;
    border-radius: 2px;
    transition: .2s;
}
input[type=checkbox]:checked + label::before {
    border: 8px solid #009688;
}
input[type=checkbox] + label::after {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    top: 11px;
    left: 3px;
    width: 0;
    height: 0;
    transform: rotate(-45deg);
    transform-origin: left top;
    border-left: 2px solid #FFF;
    border-bottom: 2px solid #FFF;
    visibility: hidden;
}
input[type=checkbox]:checked + label::after {
    animation: check .175s ease .2s 1 normal forwards;
}
@keyframes check {
    0% {
        visibility: visible;
        width: 0;
        height: 0;
    }
    40% {
        width: 0;
        height: 8px;
    }
    100% {
        visibility: visible;
        width: 12px;
        height: 8px;
    }
}

##ラジオボタン
HTMLは以下のように書いてください。id属性とfor属性、labelのテキストは適宜変更してください。

ラジオボタンのHTML

<input id="radio1-1" type="radio" name="radio1"><label for="radio1-1">radio1</label>

CSSは以下のようになります。#009688のところは適宜変更してください。

ラジオボタンのCSS

input[type=radio] + label::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    top: 4px;
    left: 2px;
    width: 16px;
    height: 16px;
    border: 2px solid #9E9E9E;
    border-radius: 50%;
    transition: .2s;
}
input[type=radio]:checked + label::before {
    border: 2px solid #009688;
}
input[type=radio] + label::after {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    top: 8px;
    left: 6px;
    width: 8px;
    height: 8px;
    background-color: #009688;
    border-radius: 50%;
    transform: scale(0);    
    transition: .175s;
}
input[type=radio]:checked + label::after {
    transform: scale(1);
}

#ローディングインジケーター
あのくるくる回ってるやつです。こちらはSVGで書きました。style要素を使っているのでインラインで書いてください。また、色もアニメーションしていますので一色で固定する場合は@keyframes colorAnim{}とcolorAnim 7s infinite linearを消して変わりにstroke: 色と書いてください。

こちらもCodepenにおいておきましたCodepenで見る

<svg version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
    <style type="text/css">
        .spinner-circle {
            stroke-dasharray: 146;
            transform-origin: center center;
            animation:
                spinner1 1.5s infinite linear,
                rotation 2s infinite linear,
                colorAnim 7s infinite linear;
        }
        @keyframes spinner1 {
            0% {
                stroke-dashoffset: 146;
            }
            30% {
                stroke-dashoffset: 116;
            }
            50% {
                stroke-dashoffset: 0;
            }
            80% {
                stroke-dashoffset: -30;
            }
            100% {
                stroke-dashoffset: -146;
            }
        }
        @keyframes rotation {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
        @keyframes colorAnim {
            0% { stroke: #FF5722; }
            6.25% { stroke: #FF9800; }
            12.5% { stroke: #FFC107; }
            18.75% { stroke: #FFEB3B; }
            25% { stroke: #CDDC39; }
            31.25% { stroke: #8BC34A; }
            37.5% { stroke: #4CAF50; }
            43.75% { stroke: #009688; }
            50% { stroke: #00BCD4; }
            56.25% { stroke: #03A9F4; }
            62.5% { stroke: #2196F3; }
            68.75% { stroke: #3F51B5; }
            75% { stroke: #673AB7; }
            81.25% { stroke: #9C27B0; }
            87.5% { stroke: #E91E63; }
            93.75% { stroke: #f44336; }
            100% { stroke: #FF5722; }
        }
    </style>
    <circle class="spinner-circle" cx="32" cy="32" r="28" fill="none" stroke-width="8"/>
</svg>