生活随笔
收集整理的這篇文章主要介紹了
实现环状的进度条
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
Created by Jerry Wang, last modified on Aug 06, 2014 Go to start of metadata
創(chuàng)建一個新的BSP application和一個新的view, 將wiki末尾的html source code copy 進(jìn)view.
創(chuàng)建兩個mime object，類型為javascript:
實現(xiàn)原理:
index.js里以100毫秒為時間間隔定期執(zhí)行一個匿名函數(shù). 在這個函數(shù)里，動態(tài)設(shè)置當(dāng)前progress circle的class。
可以在chrome console里觀察到該函數(shù)周期性的執(zhí)行:
在html file里，每個1%的進(jìn)度都有一組對應(yīng)的class。每個class通過transform 實現(xiàn)動畫效果。
可以在chrome 里觀察到degree的變化:
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>CSS3 progress-circle Demo
</title>
<style>html {font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body { margin:0 }article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {display:block}audio,canvas,progress,video {display:inline-block;vertical-align:baseline}audio:not([controls]) {display:none;height:0}[hidden],template {display:none}a {background:transparent}a:active,a:hover {outline:0}abbr[title] {border-bottom:1px dotted}b,strong {font-weight:bold}dfn {font-style:italic}h1 {font-size:2em;margin:0.67em 0}mark {background:#ff0;color:#000}small{font-size:80%}sub,sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup {top:-0.5em}sub {bottom:-0.25em}img {border:0}svg:not(:root) {overflow:hidden}figure {margin:1em 40px}hr {-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre {overflow:auto}code,kbd,pre,samp {font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea {color:inherit;font:inherit;margin:0}button {overflow:visible}button,select {text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"] {-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled] {cursor:default}button::-moz-focus-inner,input::-moz-focus-inner {border:0;padding:0}input {line-height:normal}input[type="checkbox"],input[type="radio"] {-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {height:auto}input[type="search"] {-webkit-appearance:textfield;-moz-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {-webkit-appearance:none}fieldset {border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend {border:0;padding:0}textarea {overflow:auto}optgroup {font-weight:bold}table {border-collapse:collapse;border-spacing:0}td,th{padding:0}
</style>
<style>body {background-color: #2f3439;font-family: 'Roboto', sans-serif;text-align: center;}
.progress-radial {display: inline-block;margin: 15px;position: relative;width: 180px;height: 180px;border-radius: 50%;border: 10px solid #5d6771;background-color: #fffde8;box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
}
.progress-radial:after, .progress-radial:before {content: '';width: 35px;height: 35px;top: 50%;left: 50%;border-radius: 50%;margin-left: -17.5px;margin-top: -17.5px;background: #fffde8;position: absolute;z-index: 999;box-shadow: 10px 0 10px rgba(0, 0, 0, 0.2);
}
.progress-radial:after {z-index: 998;box-shadow: none;transform: translate(0, -72.5px);
}
.progress-radial b:after {color: #fffde8;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);position: absolute;font-weight: 900;left: 50%;top: 50%;width: 50%;height: 50%;background-color: #2f3439;border-radius: 50%;margin-left: -25%;margin-top: -25%;text-align: center;line-height: 90px;font-size: 30px;box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3) inset, 0 0 0 10px #5d6771;
}
.progress-0 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(90deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-0:before {transform: rotate(0deg) translate(0, -72.5px);
}
.progress-0 b:after {content: "0%";
}
.progress-1 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(93.6deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-1:before {transform: rotate(3.6deg) translate(0, -72.5px);
}
.progress-1 b:after {content: "1%";
}
.progress-2 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(97.2deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-2:before {transform: rotate(7.2deg) translate(0, -72.5px);
}
.progress-2 b:after {content: "2%";
}
.progress-3 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(100.8deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-3:before {transform: rotate(10.8deg) translate(0, -72.5px);
}
.progress-3 b:after {content: "3%";
}
.progress-4 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(104.4deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-4:before {transform: rotate(14.4deg) translate(0, -72.5px);
}
.progress-4 b:after {content: "4%";
}
.progress-5 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(108deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-5:before {transform: rotate(18deg) translate(0, -72.5px);
}
.progress-5 b:after {content: "5%";
}
.progress-6 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(111.6deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-6:before {transform: rotate(21.6deg) translate(0, -72.5px);
}
.progress-6 b:after {content: "6%";
}
.progress-7 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(115.2deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-7:before {transform: rotate(25.2deg) translate(0, -72.5px);
}
.progress-7 b:after {content: "7%";
}
.progress-8 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(118.8deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-8:before {transform: rotate(28.8deg) translate(0, -72.5px);
}
.progress-8 b:after {content: "8%";
}
.progress-9 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(122.4deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-9:before {transform: rotate(32.4deg) translate(0, -72.5px);
}
.progress-9 b:after {content: "9%";
}
.progress-10 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(126deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-10:before {transform: rotate(36deg) translate(0, -72.5px);
}
.progress-10 b:after {content: "10%";
}
.progress-11 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(129.6deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-11:before {transform: rotate(39.6deg) translate(0, -72.5px);
}
.progress-11 b:after {content: "11%";
}
.progress-12 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(133.2deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-12:before {transform: rotate(43.2deg) translate(0, -72.5px);
}
.progress-12 b:after {content: "12%";
}
.progress-13 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(136.8deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-13:before {transform: rotate(46.8deg) translate(0, -72.5px);
}
.progress-13 b:after {content: "13%";
}
.progress-14 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(140.4deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-14:before {transform: rotate(50.4deg) translate(0, -72.5px);
}
.progress-14 b:after {content: "14%";
}
.progress-15 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(144deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-15:before {transform: rotate(54deg) translate(0, -72.5px);
}
.progress-15 b:after {content: "15%";
}
.progress-16 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(147.6deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-16:before {transform: rotate(57.6deg) translate(0, -72.5px);
}
.progress-16 b:after {content: "16%";
}
.progress-17 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(151.2deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-17:before {transform: rotate(61.2deg) translate(0, -72.5px);
}
.progress-17 b:after {content: "17%";
}
.progress-18 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(154.8deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-18:before {transform: rotate(64.8deg) translate(0, -72.5px);
}
.progress-18 b:after {content: "18%";
}
.progress-19 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(158.4deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-19:before {transform: rotate(68.4deg) translate(0, -72.5px);
}
.progress-19 b:after {content: "19%";
}
.progress-20 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(162deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-20:before {transform: rotate(72deg) translate(0, -72.5px);
}
.progress-20 b:after {content: "20%";
}
.progress-21 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(165.6deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-21:before {transform: rotate(75.6deg) translate(0, -72.5px);
}
.progress-21 b:after {content: "21%";
}
.progress-22 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(169.2deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-22:before {transform: rotate(79.2deg) translate(0, -72.5px);
}
.progress-22 b:after {content: "22%";
}
.progress-23 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(172.8deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-23:before {transform: rotate(82.8deg) translate(0, -72.5px);
}
.progress-23 b:after {content: "23%";
}
.progress-24 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(176.4deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-24:before {transform: rotate(86.4deg) translate(0, -72.5px);
}
.progress-24 b:after {content: "24%";
}
.progress-25 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(180deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-25:before {transform: rotate(90deg) translate(0, -72.5px);
}
.progress-25 b:after {content: "25%";
}
.progress-26 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(183.6deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-26:before {transform: rotate(93.6deg) translate(0, -72.5px);
}
.progress-26 b:after {content: "26%";
}
.progress-27 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(187.2deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-27:before {transform: rotate(97.2deg) translate(0, -72.5px);
}
.progress-27 b:after {content: "27%";
}
.progress-28 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(190.8deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-28:before {transform: rotate(100.8deg) translate(0, -72.5px);
}
.progress-28 b:after {content: "28%";
}
.progress-29 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(194.4deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-29:before {transform: rotate(104.4deg) translate(0, -72.5px);
}
.progress-29 b:after {content: "29%";
}
.progress-30 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(198deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-30:before {transform: rotate(108deg) translate(0, -72.5px);
}
.progress-30 b:after {content: "30%";
}
.progress-31 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(201.6deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-31:before {transform: rotate(111.6deg) translate(0, -72.5px);
}
.progress-31 b:after {content: "31%";
}
.progress-32 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(205.2deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-32:before {transform: rotate(115.2deg) translate(0, -72.5px);
}
.progress-32 b:after {content: "32%";
}
.progress-33 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(208.8deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-33:before {transform: rotate(118.8deg) translate(0, -72.5px);
}
.progress-33 b:after {content: "33%";
}
.progress-34 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(212.4deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-34:before {transform: rotate(122.4deg) translate(0, -72.5px);
}
.progress-34 b:after {content: "34%";
}
.progress-35 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(216deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-35:before {transform: rotate(126deg) translate(0, -72.5px);
}
.progress-35 b:after {content: "35%";
}
.progress-36 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(219.6deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-36:before {transform: rotate(129.6deg) translate(0, -72.5px);
}
.progress-36 b:after {content: "36%";
}
.progress-37 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(223.2deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-37:before {transform: rotate(133.2deg) translate(0, -72.5px);
}
.progress-37 b:after {content: "37%";
}
.progress-38 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(226.8deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-38:before {transform: rotate(136.8deg) translate(0, -72.5px);
}
.progress-38 b:after {content: "38%";
}
.progress-39 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(230.4deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-39:before {transform: rotate(140.4deg) translate(0, -72.5px);
}
.progress-39 b:after {content: "39%";
}
.progress-40 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(234deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-40:before {transform: rotate(144deg) translate(0, -72.5px);
}
.progress-40 b:after {content: "40%";
}
.progress-41 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(237.6deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-41:before {transform: rotate(147.6deg) translate(0, -72.5px);
}
.progress-41 b:after {content: "41%";
}
.progress-42 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(241.2deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-42:before {transform: rotate(151.2deg) translate(0, -72.5px);
}
.progress-42 b:after {content: "42%";
}
.progress-43 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(244.8deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-43:before {transform: rotate(154.8deg) translate(0, -72.5px);
}
.progress-43 b:after {content: "43%";
}
.progress-44 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(248.4deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-44:before {transform: rotate(158.4deg) translate(0, -72.5px);
}
.progress-44 b:after {content: "44%";
}
.progress-45 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(252deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-45:before {transform: rotate(162deg) translate(0, -72.5px);
}
.progress-45 b:after {content: "45%";
}
.progress-46 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(255.6deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-46:before {transform: rotate(165.6deg) translate(0, -72.5px);
}
.progress-46 b:after {content: "46%";
}
.progress-47 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(259.2deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-47:before {transform: rotate(169.2deg) translate(0, -72.5px);
}
.progress-47 b:after {content: "47%";
}
.progress-48 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(262.8deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-48:before {transform: rotate(172.8deg) translate(0, -72.5px);
}
.progress-48 b:after {content: "48%";
}
.progress-49 {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(266.4deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-49:before {transform: rotate(176.4deg) translate(0, -72.5px);
}
.progress-49 b:after {content: "49%";
}
.progress-50 {background-image: linear-gradient(-90deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-50:before {transform: rotate(180deg) translate(0, -72.5px);
}
.progress-50 b:after {content: "50%";
}
.progress-51 {background-image: linear-gradient(-86.4deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-51:before {transform: rotate(183.6deg) translate(0, -72.5px);
}
.progress-51 b:after {content: "51%";
}
.progress-52 {background-image: linear-gradient(-82.8deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-52:before {transform: rotate(187.2deg) translate(0, -72.5px);
}
.progress-52 b:after {content: "52%";
}
.progress-53 {background-image: linear-gradient(-79.2deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-53:before {transform: rotate(190.8deg) translate(0, -72.5px);
}
.progress-53 b:after {content: "53%";
}
.progress-54 {background-image: linear-gradient(-75.6deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-54:before {transform: rotate(194.4deg) translate(0, -72.5px);
}
.progress-54 b:after {content: "54%";
}
.progress-55 {background-image: linear-gradient(-72deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-55:before {transform: rotate(198deg) translate(0, -72.5px);
}
.progress-55 b:after {content: "55%";
}
.progress-56 {background-image: linear-gradient(-68.4deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-56:before {transform: rotate(201.6deg) translate(0, -72.5px);
}
.progress-56 b:after {content: "56%";
}
.progress-57 {background-image: linear-gradient(-64.8deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-57:before {transform: rotate(205.2deg) translate(0, -72.5px);
}
.progress-57 b:after {content: "57%";
}
.progress-58 {background-image: linear-gradient(-61.2deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-58:before {transform: rotate(208.8deg) translate(0, -72.5px);
}
.progress-58 b:after {content: "58%";
}
.progress-59 {background-image: linear-gradient(-57.6deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-59:before {transform: rotate(212.4deg) translate(0, -72.5px);
}
.progress-59 b:after {content: "59%";
}
.progress-60 {background-image: linear-gradient(-54deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-60:before {transform: rotate(216deg) translate(0, -72.5px);
}
.progress-60 b:after {content: "60%";
}
.progress-61 {background-image: linear-gradient(-50.4deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-61:before {transform: rotate(219.6deg) translate(0, -72.5px);
}
.progress-61 b:after {content: "61%";
}
.progress-62 {background-image: linear-gradient(-46.8deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-62:before {transform: rotate(223.2deg) translate(0, -72.5px);
}
.progress-62 b:after {content: "62%";
}
.progress-63 {background-image: linear-gradient(-43.2deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-63:before {transform: rotate(226.8deg) translate(0, -72.5px);
}
.progress-63 b:after {content: "63%";
}
.progress-64 {background-image: linear-gradient(-39.6deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-64:before {transform: rotate(230.4deg) translate(0, -72.5px);
}
.progress-64 b:after {content: "64%";
}
.progress-65 {background-image: linear-gradient(-36deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-65:before {transform: rotate(234deg) translate(0, -72.5px);
}
.progress-65 b:after {content: "65%";
}
.progress-66 {background-image: linear-gradient(-32.4deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-66:before {transform: rotate(237.6deg) translate(0, -72.5px);
}
.progress-66 b:after {content: "66%";
}
.progress-67 {background-image: linear-gradient(-28.8deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-67:before {transform: rotate(241.2deg) translate(0, -72.5px);
}
.progress-67 b:after {content: "67%";
}
.progress-68 {background-image: linear-gradient(-25.2deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-68:before {transform: rotate(244.8deg) translate(0, -72.5px);
}
.progress-68 b:after {content: "68%";
}
.progress-69 {background-image: linear-gradient(-21.6deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-69:before {transform: rotate(248.4deg) translate(0, -72.5px);
}
.progress-69 b:after {content: "69%";
}
.progress-70 {background-image: linear-gradient(-18deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-70:before {transform: rotate(252deg) translate(0, -72.5px);
}
.progress-70 b:after {content: "70%";
}
.progress-71 {background-image: linear-gradient(-14.4deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-71:before {transform: rotate(255.6deg) translate(0, -72.5px);
}
.progress-71 b:after {content: "71%";
}
.progress-72 {background-image: linear-gradient(-10.8deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-72:before {transform: rotate(259.2deg) translate(0, -72.5px);
}
.progress-72 b:after {content: "72%";
}
.progress-73 {background-image: linear-gradient(-7.2deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-73:before {transform: rotate(262.8deg) translate(0, -72.5px);
}
.progress-73 b:after {content: "73%";
}
.progress-74 {background-image: linear-gradient(-3.6deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-74:before {transform: rotate(266.4deg) translate(0, -72.5px);
}
.progress-74 b:after {content: "74%";
}
.progress-75 {background-image: linear-gradient(0deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-75:before {transform: rotate(270deg) translate(0, -72.5px);
}
.progress-75 b:after {content: "75%";
}
.progress-76 {background-image: linear-gradient(3.6deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-76:before {transform: rotate(273.6deg) translate(0, -72.5px);
}
.progress-76 b:after {content: "76%";
}
.progress-77 {background-image: linear-gradient(7.2deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-77:before {transform: rotate(277.2deg) translate(0, -72.5px);
}
.progress-77 b:after {content: "77%";
}
.progress-78 {background-image: linear-gradient(10.8deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-78:before {transform: rotate(280.8deg) translate(0, -72.5px);
}
.progress-78 b:after {content: "78%";
}
.progress-79 {background-image: linear-gradient(14.4deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-79:before {transform: rotate(284.4deg) translate(0, -72.5px);
}
.progress-79 b:after {content: "79%";
}
.progress-80 {background-image: linear-gradient(18deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-80:before {transform: rotate(288deg) translate(0, -72.5px);
}
.progress-80 b:after {content: "80%";
}
.progress-81 {background-image: linear-gradient(21.6deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-81:before {transform: rotate(291.6deg) translate(0, -72.5px);
}
.progress-81 b:after {content: "81%";
}
.progress-82 {background-image: linear-gradient(25.2deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-82:before {transform: rotate(295.2deg) translate(0, -72.5px);
}
.progress-82 b:after {content: "82%";
}
.progress-83 {background-image: linear-gradient(28.8deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-83:before {transform: rotate(298.8deg) translate(0, -72.5px);
}
.progress-83 b:after {content: "83%";
}
.progress-84 {background-image: linear-gradient(32.4deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-84:before {transform: rotate(302.4deg) translate(0, -72.5px);
}
.progress-84 b:after {content: "84%";
}
.progress-85 {background-image: linear-gradient(36deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-85:before {transform: rotate(306deg) translate(0, -72.5px);
}
.progress-85 b:after {content: "85%";
}
.progress-86 {background-image: linear-gradient(39.6deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-86:before {transform: rotate(309.6deg) translate(0, -72.5px);
}
.progress-86 b:after {content: "86%";
}
.progress-87 {background-image: linear-gradient(43.2deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-87:before {transform: rotate(313.2deg) translate(0, -72.5px);
}
.progress-87 b:after {content: "87%";
}
.progress-88 {background-image: linear-gradient(46.8deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-88:before {transform: rotate(316.8deg) translate(0, -72.5px);
}
.progress-88 b:after {content: "88%";
}
.progress-89 {background-image: linear-gradient(50.4deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-89:before {transform: rotate(320.4deg) translate(0, -72.5px);
}
.progress-89 b:after {content: "89%";
}
.progress-90 {background-image: linear-gradient(54deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-90:before {transform: rotate(324deg) translate(0, -72.5px);
}
.progress-90 b:after {content: "90%";
}
.progress-91 {background-image: linear-gradient(57.6deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-91:before {transform: rotate(327.6deg) translate(0, -72.5px);
}
.progress-91 b:after {content: "91%";
}
.progress-92 {background-image: linear-gradient(61.2deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-92:before {transform: rotate(331.2deg) translate(0, -72.5px);
}
.progress-92 b:after {content: "92%";
}
.progress-93 {background-image: linear-gradient(64.8deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-93:before {transform: rotate(334.8deg) translate(0, -72.5px);
}
.progress-93 b:after {content: "93%";
}
.progress-94 {background-image: linear-gradient(68.4deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-94:before {transform: rotate(338.4deg) translate(0, -72.5px);
}
.progress-94 b:after {content: "94%";
}
.progress-95 {background-image: linear-gradient(72deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-95:before {transform: rotate(342deg) translate(0, -72.5px);
}
.progress-95 b:after {content: "95%";
}
.progress-96 {background-image: linear-gradient(75.6deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-96:before {transform: rotate(345.6deg) translate(0, -72.5px);
}
.progress-96 b:after {content: "96%";
}
.progress-97 {background-image: linear-gradient(79.2deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-97:before {transform: rotate(349.2deg) translate(0, -72.5px);
}
.progress-97 b:after {content: "97%";
}
.progress-98 {background-image: linear-gradient(82.8deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-98:before {transform: rotate(352.8deg) translate(0, -72.5px);
}
.progress-98 b:after {content: "98%";
}
.progress-99 {background-image: linear-gradient(86.4deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-99:before {transform: rotate(356.4deg) translate(0, -72.5px);
}
.progress-99 b:after {content: "99%";
}
.progress-100 {background-image: linear-gradient(90deg, #fffde8 50%, transparent 50%, transparent), linear-gradient(270deg, #fffde8 50%, #5d6771 50%, #5d6771);
}
.progress-100:before {transform: rotate(360deg) translate(0, -72.5px);
}
.progress-100 b:after {content: "100%";
}
</style><script src="js/prefixfree.min.js"></script><script src="js/modernizr.js"></script>
</head>
<body><div class="progress-radial progress-29"><b></b></div>
<div class="progress-radial progress-65"><b></b></div>
<div class="progress-radial progress-90"><b></b></div><script src='jquery.js'></script><script src="index.js"></script>
<div style="text-align:center;clear:both;">
</div>
</body>
</html>
index.js:
var $last = $(’.progress-radial’).last();
setInterval(function(){
var currentClass = $last.attr(‘class’).split(’ ')[1];
var currentPercentage = currentClass.substring(9,12);
var newPercentage = (parseInt(currentPercentage) + 1);
if (newPercentage > 100) {
newPercentage = 1;
}
var newClass = ‘progress-’ + newPercentage;
console.log("remove current class: " + currentClass);
console.log("add new class: " + newClass);
$last.removeClass(currentClass).addClass(newClass);
},100);
該例子來自: http://www.html5tricks.com/css3-3d-circle-progress.html要獲取更多Jerry的原創(chuàng)文章，請關(guān)注公眾號"汪子熙":
總結(jié)
以上是生活随笔為你收集整理的实现环状的进度条的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
