Circle Progress Bar Using Bootstrap

Is there any way to create circle with multiple different values:

  • Starting from 0 to 50 - blue color
  • From 50 to 60 - Red color
  • From 60 to 100 color yellow like image below
  • Thanks in Advance


    Something like below:

    Dependency: jQuery

    function sliceSize(dataNum, dataTotal) {
      return (dataNum / dataTotal) * 360;
    }
    function addSlice(sliceSize, pieElement, offset, sliceID, color) {
      $(pieElement).append("<div class='slice "+sliceID+"'><span></span></div>");
      var offset = offset - 1;
      var sizeRotation = -179 + sliceSize;
      $("."+sliceID).css({
        "transform": "rotate("+offset+"deg) translate3d(0,0,0)"
      });
      $("."+sliceID+" span").css({
        "transform"       : "rotate("+sizeRotation+"deg) translate3d(0,0,0)",
        "background-color": color
      });
    }
    function iterateSlices(sliceSize, pieElement, offset, dataCount, sliceCount, color) {
      var sliceID = "s"+dataCount+"-"+sliceCount;
      var maxSize = 179;
      if(sliceSize<=maxSize) {
        addSlice(sliceSize, pieElement, offset, sliceID, color);
      } else {
        addSlice(maxSize, pieElement, offset, sliceID, color);
        iterateSlices(sliceSize-maxSize, pieElement, offset+maxSize, dataCount, sliceCount+1, color);
      }
    }
    function createPie(dataElement, pieElement) {
      var listData = [];
      $(dataElement+" span").each(function() {
        listData.push(Number($(this).html()));
      });
      var listTotal = 0;
      for(var i=0; i<listData.length; i++) {
        listTotal += listData[i];
      }
      var offset = 0;
      var color = [
        "cornflowerblue", 
        "olivedrab", 
        "orange", 
        "tomato", 
        "crimson", 
        "purple", 
        "turquoise", 
        "forestgreen", 
        "navy", 
        "gray"
      ];
      for(var i=0; i<listData.length; i++) {
        var size = sliceSize(listData[i], listTotal);
        iterateSlices(size, pieElement, offset, i, 0, color[i]);
        $(dataElement+" li:nth-child("+(i+1)+")").css("border-color", color[i]);
        offset += size;
      }
    }
    createPie(".pieID.legend", ".pieID.pie");
    @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
    
    @keyframes bake-pie {
      from {
        transform: rotate(0deg) translate3d(0,0,0);
      }
    }
    
    body {
      font-family: "Open Sans", Arial;
      background: #EEE;
    }
    main {
      width: 400px;
      margin: 30px auto;
    }
    section {
      margin-top: 30px;
    }
    .pieID {
      display: inline-block;
      vertical-align: top;
    }
    .pie {
      height: 200px;
      width: 200px;
      position: relative;
      margin: 0 30px 30px 0;
    }
    .pie::before {
      content: "";
      display: block;
      position: absolute;
      z-index: 1;
      width: 100px;
      height: 100px;
      background: #EEE;
      border-radius: 50%;
      top: 50px;
      left: 50px;
    }
    .pie::after {
      content: "";
      display: block;
      width: 120px;
      height: 2px;
      background: rgba(0,0,0,0.1);
      border-radius: 50%;
      box-shadow: 0 0 3px 4px rgba(0,0,0,0.1);
      margin: 220px auto;
      
    }
    .slice {
      position: absolute;
      width: 200px;
      height: 200px;
      clip: rect(0px, 200px, 200px, 100px);
      animation: bake-pie 1s;
    }
    .slice span {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      background-color: black;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      clip: rect(0px, 200px, 200px, 100px);
    }
    .legend {
      list-style-type: none;
      padding: 0;
      margin: 0;
      background: #FFF;
      padding: 15px;
      font-size: 13px;
      box-shadow: 1px 1px 0 #DDD,
                  2px 2px 0 #BBB;
    }
    .legend li {
      width: 110px;
      height: 1.25em;
      margin-bottom: 0.7em;
      padding-left: 0.5em;
      border-left: 1.25em solid black;
    }
    .legend em {
      font-style: normal;
    }
    .legend span {
      float: right;
    }
    footer {
      position: fixed;
      bottom: 0;
      right: 0;
      font-size: 13px;
      background: #DDD;
      padding: 5px 10px;
      margin: 5px;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <main>
      
      <section>
        <div class="pieID pie">
          
        </div>
        <ul class="pieID legend">
          <li>
            <em>Cats</em>
            <span>868</span>
          </li>
          <li>
            <em>Slugs</em>
            <span>344</span>
          </li>
          <li>
            <em>Aliens</em>
            <span>1145</span>
          </li>
        </ul>
      </section>
      
    </main>

    以下是一个CSS解决方案:

        body { background: #545b7a;}
        
        div {
          width: 300px;
          height: 300px;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          margin: auto;
          position: absolute;
          background: #fa0 -webkit-linear-gradient(left, #fa0 50%, #0af 50%);
          background: #fa0 linear-gradient(to right, #fa0 50%, #0af 50%);
          color: #0af;
          border-radius: 50%;
        }
        @-webkit-keyframes spin {
          to {
            -webkit-transform: rotate(180deg);
                    transform: rotate(180deg);
          }
        }
        @keyframes spin {
          to {
            -webkit-transform: rotate(180deg);
                    transform: rotate(180deg);
          }
        }
        @-webkit-keyframes background {
          50% {
            background-color: currentColor;
          }
        }
        @keyframes background {
          50% {
            background-color: currentColor;
          }
        }
        div::after {
          content: '';
          position: absolute;
          width: 80%;
          height: 80%;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          margin: auto;
          background: #545b7a;
          border-radius: 50%;
        }
        div::before {
          content: '';
          position: absolute;
          display: block;
          background-color: inherit;
          height: 100%;
          width: 50%;
          bottom: 0;
          right: 0;
          border-radius: 0 100% 100% 0 / 50%;
          -webkit-transform: rotate(0);
                  transform: rotate(0);
          -webkit-transform-origin: 0 50%;
                  transform-origin: 0 50%;
          -webkit-animation: 50s spin infinite linear, 100s background infinite step-end;
                  animation: 50s spin infinite linear, 100s background infinite step-end;
          -webkit-animation-play-state: paused;
                  animation-play-state: paused;
          -webkit-animation-delay: inherit;
                  animation-delay: inherit;
        }
        
    <div style="animation-delay: -35s"></div>
    链接地址: http://www.djcxy.com/p/95258.html

    上一篇: 使用Webpack 2和React Router进行CSS代码分割

    下一篇: 使用Bootstrap循环进度条