实现环状的进度条

编程语言 2019-06-22 13:22:03 阅读次数: 0

Created by Jerry Wang, last modified on Aug 06, 2014 Go to start of metadata

  1. 创建一个新的BSP application和一个新的view, 将wiki末尾的html source code copy 进view.
    clipboard1

  2. 创建两个mime object，类型为javascript:
    clipboard2

实现原理:

  1. index.js里以100毫秒为时间间隔定期执行一个匿名函数. 在这个函数里，动态设置当前progress circle的class。
    clipboard3

可以在chrome console里观察到该函数周期性的执行:
clipboard4

  1. 在html file里，每个1%的进度都有一组对应的class。每个class通过transform 实现动画效果。
    clipboard5

可以在chrome 里观察到degree的变化:
clipboard6

<!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;
  }
/* -------------------------------------
 * Bar container
 * ------------------------------------- */
.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;
}
/* -------------------------------------
 * Mixin for progress-% class
 * ------------------------------------- */
.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

猜你喜欢

转载自blog.csdn.net/i042416/article/details/93304121
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022