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>