onsenui
Version:
HTML5 Mobile Framework & UI Components
138 lines (115 loc) • 4.04 kB
CSS
/*~
name: Progress Circle
category: Progress Circle
elements: ons-progress-circular
markup: |
<svg class="progress-circular progress-circular--indeterminate">
<circle class="progress-circular__background"/>
<circle class="progress-circular__primary progress-circular--indeterminate__primary"/>
<circle class="progress-circular__secondary progress-circular--indeterminate__secondary"/>
</svg>
<svg class="progress-circular">
<circle class="progress-circular__background"/>
<circle class="progress-circular__secondary" style="stroke-dasharray: 140%, 251.32%"/>
<circle class="progress-circular__primary" style="stroke-dasharray: 100%, 251.32%"/>
</svg>
<svg class="progress-circular">
<circle class="progress-circular__background"/>
<circle class="progress-circular__primary" style="stroke-dasharray: 80%, 251.32%"/>
</svg>
*/
.progress-circular {
height: 32px;
position: relative;
width: 32px;
transform: rotate(270deg);
animation: none;
}
.progress-circular__background,
.progress-circular__primary,
.progress-circular__secondary {
/* clean-css ignore:start */
cx: 50%;
cy: 50%;
r: 40%;
/* clean-css ignore:end */
animation: none;
fill: none;
stroke-width: 5%;
stroke-miterlimit: 10;
}
.progress-circular__background {
stroke: var(--progress-circle-background-color);
}
.progress-circular__primary {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
stroke: var(--progress-circle-primary-color);
transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.progress-circular__secondary {
stroke: var(--progress-circle-secondary-color);
}
.progress-circular--indeterminate {
animation: progress__rotate 2s linear infinite;
transform: none;
}
.progress-circular--indeterminate__primary {
animation: progress__dash 1.5s ease-in-out infinite;
}
.progress-circular--indeterminate__secondary {
display: none;
}
@keyframes progress__rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes progress__dash {
0% {
stroke-dasharray: 10%, 241.32%;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 201%, 50.322%;
stroke-dashoffset: -100%;
}
100% {
stroke-dasharray: 10%, 241.32%;
stroke-dashoffset: -251.32%;
}
}
/*~
name: Material Progress Circle
category: Progress Circle
elements: ons-progress-circular
markup: |
<svg class="progress-circular progress-circular--material progress-circular--indeterminate">
<circle class="progress-circular__background progress-circular--material__background"/>
<circle class="progress-circular__primary progress-circular--material__primary progress-circular--indeterminate__primary"/>
<circle class="progress-circular__secondary progress-circular--material__secondary progress-circular--indeterminate__secondary"/>
</svg>
<svg class="progress-circular progress-circular--material">
<circle class="progress-circular__background progress-circular--material__background"/>
<circle class="progress-circular__secondary progress-circular--material__secondary" style="stroke-dasharray: 140%, 251.32%"/>
<circle class="progress-circular__primary progress-circular--material__primary" style="stroke-dasharray: 100%, 251.32%"/>
</svg>
<svg class="progress-circular progress-circular--material">
<circle class="progress-circular__background progress-circular--material__background"/>
<circle class="progress-circular__primary progress-circular--material__primary" style="stroke-dasharray: 80%, 251.32%"/>
</svg>
*/
.progress-circular--material__background,
.progress-circular--material__primary,
.progress-circular--material__secondary {
stroke-width: 9%;
}
.progress-circular--material__background {
stroke: var(--material-progress-circle-background-color);
}
.progress-circular--material__primary {
stroke: var(--material-progress-circle-primary-color);
}
.progress-circular--material__secondary {
stroke: var(--material-progress-circle-secondary-color);
}