Как я могу сделать процент заполнения круга?

Я хочу сделать это psd, но я пробовал делать с радиусом границы форму, но не понимаю, как это сделать. как мне это сделать ? или если кто-то может помочь мне сделать круги это может быть большая помощь ... мне нужно сначала настроить все круги на 100%, а после изменения его в процентах таможенные Как я могу сделать процент заполнения круга?

HTML

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Document</title> 
     <link rel="stylesheet" href="css/wrfrm.css"> 
    </head> 
    <body> 
     <section class="header"> 
     <header> 
      <nav> 
       <h1>wrfrm<span>wireframe kit</span></h1> 
       <ul> 
        <li><a href="#">work</a></li> 
        <li><a href="#">service</a></li> 
        <li><a href="#">about</a></li> 
        <li><a href="#">blog</a></li> 
        <li><a href="#">contact</a></li> 
       </ul> 
      </nav> 
     </header> 
     </section> 
     <section class="banner"> 
     <div class="banner_text"> 
      <h1>Lorem ipsum dolor sit amet, <span>consectetur adipiscing elit</span></h1> 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.<span> Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus Donec quam felis, ultricies nec</span></p> 
      <a href="#">button</a> 
      <img src="img/16251331_10210478393849069_2072529108_o.png" alt=""> 
     </div> 
     </section> 
     <section class="feactures"> 
     <div class="nav-header"> 
      <h1>feacture</h1> 
      <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula eget dolor Aenean massa Aenean commodo <span>ligula eget dolor Aenean commodo ligula eget dolor ligula eget dolor Aenean commodo ligula eget dolor</span></p> 
      <div class="container"> 
       <div class="square"> 
        <img src="img/check.png" alt=""> 
        <div class="container_text"> 
        <h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2> 
        <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula <span>eget dolor Aenean massas</span></p> 
        </div> 
       </div> 
       <div class="square"> 
        <img src="img/check.png" alt=""> 
        <div class="container_text"> 
        <h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2> 
        <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula <span>eget dolor Aenean massas</span></p> 
        </div> 
       </div> 
       <div class="square"> 
        <img src="img/check.png" alt=""> 
        <div class="container_text"> 
        <h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2> 
        <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula <span>eget dolor Aenean massas</span></p> 
        </div> 
       </div> 
       <div class="square"> 
        <img src="img/check.png" alt=""> 
        <div class="container_text"> 
        <h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2> 
        <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula <span>eget dolor Aenean massas</span></p> 
        </div> 
       </div> 
      </div> 
     </div> 
     </section> 
     <section class="read_more"> 
     <div class="container_read_more"> 
      <div class="structure"> 
       <img src="img/icon.png" class="icon"> 
       <h1>title</h1> 
       <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula 
        Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula 
       </p> 
       <a href="#">read more</a> 
      </div> 
     </div> 
     <div class="container_read_more custom"> 
      <div class="structure"> 
       <img src="img/icon.png" class="icon"> 
       <h1>title</h1> 
       <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula 
        Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula 
       </p> 
       <a href="#" >read more</a> 
      </div> 
     </div> 
     <div class="container_read_more"> 
      <div class="structure"> 
       <img src="img/icon.png" class="icon"> 
       <h1>title</h1> 
       <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula 
        Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula 
       </p> 
       <a href="#">read more</a> 
      </div> 
     </div> 
     </section> 
     <section class="work"> 
     <div class="work_container"> 
      <div class="work-header"> 
       <h1>our work</h1> 
       <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula <span>eget dolor Aenean massadipiscing elit. Aenean commodo ligulaas</span></p> 
      </div> 
     </div> 
     <p class="filter-buttons"> 
      <a href="#" id="all" class="active">All</a> 
      <a href="#" id="web"> Web</a> 
      <a href="#" id="apps">Apps</a> 
      <a href="#" id="icons">Icons</a> 
     </p> 
     <div class="work-cast"> 
      <table> 
       <tr> 
        <th> 
        <div class="member"> 
         <img src="img/icon.png" alt=""> 
         <div class="name"> 
          <span>Lorem ipsum dolor</span> 
          <p>Loremipsumdolor</p> 
         </div> 
        </div> 
        </th> 
        <th> 
        <div class="member"> 
         <img src="img/icon.png" alt=""> 
         <div class="name"> 
          <span>Lorem ipsum dolor</span> 
          <p>Loremipsumdolor</p> 
         </div> 
        </div> 
        </th> 
        <th> 
        <div class="member"> 
         <img src="img/icon.png" alt=""> 
         <div class="name"> 
          <span>Lorem ipsum dolor</span> 
          <p>Loremipsumdolor</p> 
         </div> 
        </div> 
        </th> 
        <th> 
        <div class="member"> 
         <img src="img/icon.png" alt=""> 
         <div class="name"> 
          <span>Lorem ipsum dolor</span> 
          <p>Loremipsumdolor</p> 
         </div> 
        </div> 
        </th> 
       </tr> 
       <tr> 
        <td> 
        <div class="member"> 
         <img src="img/icon.png" alt=""> 
         <div class="name"> 
          <span>Lorem ipsum dolor</span> 
          <p>Loremipsumdolor</p> 
         </div> 
        </div> 
        </td> 
        <td> 
        <div class="member"> 
         <img src="img/icon.png" alt=""> 
         <div class="name"> 
          <span>Lorem ipsum dolor</span> 
          <p>Loremipsumdolor</p> 
         </div> 
        </div> 
        </td> 
        <td> 
        <div class="member"> 
         <img src="img/icon.png" alt=""> 
         <div class="name"> 
          <span>Lorem ipsum dolor</span> 
          <p>Loremipsumdolor</p> 
         </div> 
        </div> 
        </td> 
        <td> 
        <div class="member"> 
         <img src="img/icon.png" alt=""> 
         <div class="name"> 
          <span>Lorem ipsum dolor</span> 
          <p>Loremipsumdolor</p> 
         </div> 
        </div> 
        </td> 
       </tr> 
      </table> 
      <br> 
      <br> 
      <br> 
     </div> 
     </section> 
     <section class="bar"> 
      <div class="bar_container"> 
       <div class="content"> 
        <h3>Lorem ipsum dolor</h3> 
        <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula eget dolor Aenean massas</p><span>Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula eget dolor Aenean massas</span> 
        <div class="container_buttons"> 
         <a href="#" class="button_same">button</a> 
         <a href="#" class="button_green">button</a> 
        </div> 
       </div> 
      </div> 
     </section> 
     <section class="blog"> 
      <div class="blog_container"> 
       <div class="content_blog"> 
        <h1>our blog</h1> 
        <p>ipsum ipsum ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula eget dolor Aenean massas<span>Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula eget dolor Aenean </span></p> 
        <div class="blog_square"> 
         <div class="_blog"> 
         <img src="img/icon.png" alt=""> 
         <h3>ipsum ipsum ipsum</h3> 
         <span>by admin | 19 APRIL</span> 
         <p>ipsum ipsum ipsum dolor sit amet consectetuer<br> 
         ipsum ipsum ipsum dolor sit amet consectetueaaar<br> 
         ipsum ipsum ipsum dolor sit amet consectetueaaaaa</p> 
        </div> 
        </div> 
        <div class="blog_square"> 
         <div class="_blog"> 
         <img src="img/icon.png" alt=""> 
         <h3>ipsum ipsum ipsum</h3> 
         <span>by admin | 19 APRIL</span> 
         <p>ipsum ipsum ipsum dolor sit amet consectetuer<br> 
         ipsum ipsum ipsum dolor sit amet consectetueaaar<br> 
         ipsum ipsum ipsum dolor sit amet consectetueaaaaa</p> 
        </div> 
        </div> 
        <div class="blog_square"> 
         <div class="_blog"> 
         <img src="img/icon.png" alt=""> 
         <h3>ipsum ipsum ipsum</h3> 
         <span>by admin | 19 APRIL</span> 
         <p>ipsum ipsum ipsum dolor sit amet consectetuer<br> 
         ipsum ipsum ipsum dolor sit amet consectetueaaar<br> 
         ipsum ipsum ipsum dolor sit amet consectetueaaaaa</p> 
        </div> 
        </div> 
        <div class="blog_square"> 
         <div class="_blog"> 
         <img src="img/icon.png" alt=""> 
         <h3>ipsum ipsum ipsum</h3> 
         <span>by admin | 19 APRIL</span> 
         <p>ipsum ipsum ipsum dolor sit amet consectetuer<br> 
         ipsum ipsum ipsum dolor sit amet consectetueaaar<br> 
         ipsum ipsum ipsum dolor sit amet consectetueaaaaa</p> 
        </div> 
        </div> 
       </div> 
      </div> 
     </section> 
     <section class="subscribe"> 
     <div class="subscribe_container"> 
      <h2>ipsum ipsum ipsum</h2> 
      <div class="subscribe_buttons"> 
       <input type="text" name="email" placeholder="Your Email" class="email"> 
       <button class="subscribe_green">subscribe</button> 
      </div> 
     </div> 
     </section> 
     <section class="porcentage"> 
     <div class="porcentage_container"> 
      <h1>ipsum ipsum ipsum</h1> 
      <p>ipsum ipsum ipsum dolor sit amet consectetuer sit amet consectetuer<br> 
      ipsum ipsum ipsum sit amet consectetuer dolor sit amet aar<br> 
      ipsum ipsum ipsum dolor sit amet consectetueaaaaa</p> 
      <div class="circles"> 
       <div class="circles_container"> 
        <div class="_porcentage"> 
         <div class="chart" id="graph" data-percent="100"></div> 
        </div> 
       </div> 
      </div> 
     </div> 
     </section> 
    </body> 
</html>

CSS

*{ 
    padding: 0; 
    margin: 0; 
    border: 0; 
} 

header{ 
    margin-right: 100px; 
    margin-left: 100px; 
} 

header nav > h1{ 
    text-transform: uppercase; 
    color : #505a78; 
    margin-top: 20px; 
    font-size: 20px; 
} 

h1 span { 
    display: block; 
    font-size: 0.4em; 
    text-transform: uppercase; 
} 

header nav > ul { 
    list-style: none; 
    margin-top: -30px; 
} 

header nav > ul li a{ 
    display: inline-block; 
    float: right; 
    margin: 8px; 
    color: #505a78; 
    font-size: 15px; 
    font-weight: bold; 
} 

a{ 
    text-decoration: inherit; 
} 

.header{ 
    width: 100%; 
    height: 100px; 
} 

.banner{ 
    width: 100%; 
    height: 500px; 
    background-color: #505a78; 
} 

.banner p{ 
    display: block; 
} 

.banner_text{ 
    color: #fff; 
    padding: 150px; 
} 

.banner_text h1, 
.banner_text h1 span{ 
    font-size: 35px; 
} 

.banner_text p{ 
    color: #a5abbb; 
} 

.banner_text p > span{ 
    display: block; 
} 

.banner_text a { 
    margin-top: 25px; 
    display: block; 
    color: white; 
    text-align: center; 
    width: 62px; 
    padding: 4px 25px; 
    text-align: center; 
    background-color: #7cdf95; 
    font-weight: bold; 
} 

.banner_text img { 
    width: 100%; 
    margin-top: -238px; 
    margin-left: 110px; 
} 

.feactures{ 
    width: 100%; 
    height: 500px; 
} 

.nav-header{ 
    text-align: center; 
    margin-top: 65px; 
} 

.nav-header h1{ 
    font-size: 35px; 
    color: #505a78; 
    text-transform: uppercase; 
} 

.nav-header p{ 
    font-size: 0.8em; 
    color: #a5abbb; 
} 

.nav-header p > span{ 
    display: block; 
} 

.container { 
    width: 100%; 
    height: 280px; 
    margin-top: 70px; 
    margin-left: -200px; 
} 


.square { 
    width: 600px; 
    height: 100px; 
    display: inline-block; 
} 

img{ 
    width: 10%; 
} 

.container_text { 
    position: absolute; 
    font-size: 10px; 
    margin-top: -50px; 
    margin-left: 350px; 
} 

.container_text p{ 
    font-size: 1em; 
} 

.read_more{ 
    width: 100%; 
    height: 300px; 
    background-color: #505a78; 
} 

.container_read_more{ 
    display: inline-block; 
    width: 33%; 
    height: 300px; 
    background-color: #505a78; 
} 

.custom{ 
    background-color: #485270; 
} 

.container_read_more .structure{ 
    text-align: center; 
    color: #fff; 
    margin-top: 100px; 
    margin-bottom: 100px; 
} 

.icon{ 
    width: 7%; 
} 


.container_read_more .structure h1{ 
    margin-top: 10px; 
    color: #fff; 
} 

.container_read_more .structure p{ 
    color: #a5abbb; 
} 

.container_read_more .structure > a{ 
    color: #fff; 
    font-weight: bold; 
} 

.work { 
    width: 100%; 
} 

.work_container{ 
    margin-left: 100px; 
    margin-right: 100px; 
} 

.work-header{ 
    margin-top: 60px; 
} 

.work-header h1, 
.work-header p{ 
    text-align: center; 
    margin-bottom: 10px; 
} 

.work-header{ 
    color: #b7bcc9; 
} 

.work-header h1{ 
    color: #505a78; 
} 

.work-header p > span{ 
    display: block; 
} 

.filter-buttons{ 
    text-align: center; 
} 

.filter-buttons a { 
    font-size: 1.125em; 
    font-weight: 400; 
    color: #a5abbb; 
    text-transform: uppercase; 
    border: none; 
    padding: .25em 1.5em; 
    margin: 0.5em; 
    font-weight: bold; 
} 

.filter-buttons .active{ 
    color: #505a78; 
} 


.member { 
    background-color: red; 
    width: 200px; 
    height: 200px; 
    background-color: #505a78; 
    text-align:center; 
    display: inline-block; 
    margin: 5px; 
} 

.name { 
    margin-top: 140px; 
    margin-right: 20px; 
} 

.name span{ 
    margin-top: 100px; 
    font-weight: bold; 
    color: #505a78; 
    font-size: 20px; 
} 

.name p{ 
    color: #b7bcc9; 
    font-size: 15px; 
} 



.member img { 
    margin: 0 auto 0; 
    margin-top: 60px; 
    display: block; 
    width: 15%; 
} 

.work-cast{ 
    margin-top: 20px; 
    margin-left: 250px; 
} 


.bar { 
    width: 100%; 
    height: 120px; 
    background-color: #505a78; 
} 

.content { 
    margin-left: 90px; 
    position: absolute; 
    margin-top: 30px; 
} 

.content h3{ 
    color: #fff; 
    font-weight: bold; 
} 

.content p{ 
    margin-top: 10px; 
    color: #b7bcc9; 
} 

.content span{ 
    color: #b7bcc9; 
} 

.content .container_buttons { 
    float: right; 
    margin-top: -20px; 
    margin-left: 150px; 
} 

.container_buttons a{ 
    margin: 10px; 
} 

.button_same { 
    background-color: #505a78; 
    padding: 15px 50px; 
    text-decoration: none; 
    text-transform: uppercase; 
    font-size: 18px; 
    color: #fff; 
    border: 3px solid #424d6c; 
    font-weight: bold; 
} 

.button_green { 
    background-color: #7cdf95; 
    padding: 15px 50px; 
    text-decoration: none; 
    text-transform: uppercase; 
    font-size: 18px; 
    color: #fff; 
    border: 3px solid #424d6c; 
    font-weight: bold; 
} 

.blog_container{ 
    width: 100%; 

    margin-top: 50px; 
} 

.content_blog h1, 
.content_blog p{ 
    text-align: center; 
} 

.content_blog h1{ 
    text-transform: uppercase; 
    font-weight: bold; 
    color: #505a78; 
} 

.content_blog p{ 
    color: #b7bcc9; 
} 

.content_blog span{ 
    display: block; 
} 

._blog{ 
    width: 120px; 
    height: 120px; 
    background-color: #505a78; 
    text-align:center; 
    display: inline-block; 
    margin: 5px; 
} 

._blog img { 
    margin: 0 auto 0; 
    margin-top: 60px; 
    display: block; 
    width: 15%; 
} 

.blog_square{ 
    margin-left: 250px; 
    margin-top: 30px; 
    text-align: center; 
    display: inline-block; 
    margin-right: 250px; 
} 


._blog h3{ 
    overflow: hidden; 
    position: absolute; 
    margin-left: 130px; 
    margin-top: -50px; 
} 

._blog span { 
    overflow: hidden; 
    position: absolute; 
    margin-left: 130px; 
    margin-top: -25px; 
} 

._blog p { 
    overflow: hidden; 
    position: absolute; 
    margin-left: 121px; 
    margin-top: -5px; 
    font-size: 12px; 
} 

.subscribe_container { 
    margin-top: 50px; 
    width: 100%; 
    height: 100px; 
    background-color: #505a78; 
} 


.subscribe_container h2 { 
    color: #fff; 
    margin-left: 110px; 
    position: absolute; 
    margin-top: 40px; 
} 


.subscribe_buttons { 
    float: right; 
    margin-right: 350px; 
    margin-top: 50px; 
} 

.subscribe_buttons .subscribe_green{ 
    background-color: #7cdf95; 
    padding: 2px 12px; 
    text-decoration: none; 
    color: #fff; 
    border: 3px; 
    font-weight: bold; 
} 


.subscribe_buttons .email{ 
    background-color: #fff; 
    padding: 2px 12px; 
    text-decoration: none; 
    color: #505a78; 
    border: 3px; 
    font-weight: bold; 
} 


.porcentage_container{ 
    margin-top: 60px; 
} 

.porcentage_container h1, 
.porcentage_container p{ 
    text-align: center; 
} 

.porcentage_container h1{ 
    color: #505a78; 
} 

.porcentage_container p{ 
    color: #abb1c0; 
} 


.circles_container ._porcentage{ 
    margin-top: 110px; 
}

источник

2017-01-27 Jazmin Estes

Что вы имеете в виду "он не"? Измените свой вопрос, чтобы включить код, который у вас есть. –

Я рекомендую вам делать это с помощью SVG. Проверьте эту статью https://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/ –

Возможно, вам это нужно, http://www.jquerybyexample.net/2014/02/jquery -html5-library-circle-piechart-graph.html все это Js-плагины. Просто u не может создать такой круговой пончик с процентом. Он должен загружаться в соответствии с имеющимися данными. – Samir

Вы можете использовать JQuery плагин под названием Circles (https://github.com/lugolabs/circles)

Он работает prett y easy, вы просто создаете элемент и привязываете к нему класс jQuery.

<div class="circle" id="circles-1"></div>

код JS будет выглядеть следующим образом

$(document).ready(function() { 
    var myCircle = Circles.create({ 
    id:     'circles-1', 
    radius:    60, 
    value:    43, 
    maxValue:   100, 
    width:    10, 
    text:    function(value){return value + '%';}, 
    colors:    ['#D3B6C6', '#4B253A'], 
    duration:   400, 
    wrpClass:   'circles-wrp', 
    textClass:   'circles-text', 
    valueStrokeClass: 'circles-valueStroke', 
    maxValueStrokeClass: 'circles-maxValueStroke', 
    styleWrapper:  true, 
    styleText:   true 
    }); 
});

Вы можете добавить стили с помощью CSS на классы (вы можете определить их в следующие атрибуты wrpClass, textClass, valueStrokeClass, maxValueStrokeClass) в соответствии с Вашими дизайн.

пример: https://jsfiddle.net/amdohhhb/

источник

2017-01-27 08:52:33

Как я могу сделать процент заполнения круга?

ответ

Смежные вопросы