<div class="progress blue">
<span class="progress-left">
<span class="progress-bar" style="transform:rotate({{rotate-180 > 0 ?rotate-180:0 }}deg)"></span>
</span>
<span class="progress-right">
<span class="progress-bar" style="transform:rotate({{rotate >= 180 ? 180 : rotate}}deg)"></span>
</span>
<div class="progress-value">{{persent}}S</div>
</div>
/*************************/
ul, li, a, p, span, div, dl, dt, dd, strong, big, em, view, img, image, article,
footer, body, html, page, textarea, input, radio, center {
?box-sizing: border-box;
?display:block;
?-moz-box-sizing: border-box; /* Firefox */
?-webkit-box-sizing: border-box; /* Safari */
?margin: 0;
?padding: 0;
?-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
?-webkit-focus-ring-color: rgba(0, 0, 0, 0);
?-moz-tap-highlight-color: rgba(0, 0, 0, 0);
?-moz-focus-ring-color: rgba(0, 0, 0, 0);
}
.progress {
?width: 150px;
?height: 150px;
?line-height: 150px;
?background: none;
?margin: 0 auto;
?position: relative;
}
.progress:after {
?content: "";
?width: 100%;
?height: 100%;
?border-radius: 50%;
?position: absolute;
?top: 0;
?left: 0;
}
.progress > span {
?width: 50%;
?height: 100%;
?overflow: hidden;
?position: absolute;
?top: 0;
?z-index: 1;
}
.progress .progress-left {
?left: 0;
}
.progress .progress-bar {
?width: 100%;
?height: 100%;
?background: none;
?border-width: 2px;
?border-style: solid;
?position: absolute;
?top: 0;
}
.progress .progress-left .progress-bar {
?left: 100%;
?border-top-right-radius: 75px;
?border-bottom-right-radius: 75px;
?border-left: 0;
?-webkit-transform-origin: center left;
?transform-origin: center left;
}
.progress .progress-right {
?right: 0;
}
.progress .progress-right .progress-bar {
?left: -100%;
?border-top-left-radius: 80px;
?border-bottom-left-radius: 80px;
?border-right: 0;
?-webkit-transform-origin: center right;
?transform-origin: center right;
}
.progress .progress-value {
?width: 85%;
?height: 85%;
?border-radius: 50%;
?border: 2px solid #ebebeb;
?font-size: 32px;
?line-height: 125px;
?text-align: center;
?position: absolute;
?top: 7.5%;
?left: 7.5%;
}
.progress.blue .progress-bar {
?border-color: #049dff;
}
.progress.blue .progress-value {
?color: #049dff;
}
倒计时CSS3
原文地址：https://www.cnblogs.com/mrt-yyy/p/8451222.html