सीएसएस प्रगति सर्कल [बंद]

Question

मैंने प्रगति सलाखों को खोजने के लिए इस वेबसाइट को खोजा है, लेकिन जिन लोगों को मैंने पाया है वे एनिमेटेड सर्कल दिखा सकते हैं जो पूर्ण 100% तक जाते हैं।

मैं चाहूंगा कि नीचे दिए गए स्क्रीनशॉट की तरह कुछ प्रतिशत पर इसे रोक दिया जाए। क्या कोई ऐसा तरीका है जिससे मैं केवल CSS का उपयोग कर सकता हूं?

Comments

मैं एक स्क्रिप्ट की तलाश में नहीं हूं, मैं इस बारे में किसी भी CSS3 की जानकारी की तलाश कर रहा हूं।

— एडम गुनिशी ने 19

कभी भी शब्द को ध्यान में न रखें, "सीएसएस प्रोग्रेस सर्कल कैसे करें?" अभी भी वैध है। मुझे लगता है कि इसे नए शब्दों के साथ फिर से खोलना चाहिए, यह परिणाम पहले खोजों में है और इसमें पुराने उत्तर हैं।

— Ciantic

वह वेबसाइट किस स्क्रीनशॉट से है?

— मोरालकोड

यह 'परिपत्र प्रगति संकेतक सीएसएस' के लिए Google पर नंबर एक परिणाम है। शर्म की बात है कि सवाल बंद है।

— गोर्खान

यदि आप LESS का उपयोग कर रहे हैं तो आपको cssscript.com/pure-css-circular-percentage-bar

— jchook

Answer 1

मैंने CSS3 और LESS जावास्क्रिप्ट लाइब्रेरी के साथ ठीक वैसा ही करने के लिए एक ट्यूटोरियल बनाया। आप यहाँ ब्लॉगपोस्ट पा सकते हैं: https://medium.com/secoya-tech/a917b80c43f9

यहाँ अंतिम परिणाम का एक jsFiddle है। प्रतिशत data-progressविशेषता के माध्यम से सेट किया गया है। सीएसएस बदलाव का उपयोग करके परिवर्तन एनिमेटेड हैं।

Comments

मुझे नहीं पता था कि आप सीएसएस के साथ ऐसा कर सकते हैं। अच्छा लगा।

— हॉब्स

हालांकि बड़ा प्रदर्शन हिट हुआ .. यह मेरे ऐप के लिए अनुपयोगी बना रहा है = [

— हॉब्स

बहुत बढ़िया सामान। फ़ायरफ़ॉक्स में एक मामूली समस्या (डेवलपर संस्करण 41.0a2 का उपयोग करके) परिवर्तन के दौरान दृश्य तेज किनारों को बनाता है। यह देखने में आसान है कि क्या आपने 90 पर प्रगति की है और 10 के समय में परिवर्तन किया है। ठीक करने के लिए बस को जोड़ने outline: 1px solid transparent;के लिए .mask, .fill, .shadowसमूह।

— लुओपियो

@ होब्स, आप नहीं कर सकते, पोस्टर झूठ है। यह उत्तर LESS नामक पुस्तकालय के माध्यम से भारी मात्रा में जावास्क्रिप्ट का उपयोग करता है।

— GetFree

मैंने एक सास संस्करण बनाया है, बस अगर कोई इसे आज़माना चाहता है: gist.github.com/digitalbreed/84a19db69244b22519e03550ba010a25

— digitalbrej

Answer 2

मैंने केवल CSS का उपयोग करके एक फिडेल बनाया ।

.wrapper {
  width: 100px; /* Set the size of the progress bar */
  height: 100px;
  position: absolute; /* Enable clipping */
  clip: rect(0px, 100px, 100px, 50px); /* Hide half of the progress bar */
}
/* Set the sizes of the elements that make up the progress bar */
.circle {
  width: 80px;
  height: 80px;
  border: 10px solid green;
  border-radius: 50px;
  position: absolute;
  clip: rect(0px, 50px, 100px, 0px);
}
/* Using the data attributes for the animation selectors. */
/* Base settings for all animated elements */
div[data-anim~=base] {
  -webkit-animation-iteration-count: 1;  /* Only run once */
  -webkit-animation-fill-mode: forwards; /* Hold the last keyframe */
  -webkit-animation-timing-function:linear; /* Linear animation */
}

.wrapper[data-anim~=wrapper] {
  -webkit-animation-duration: 0.01s; /* Complete keyframes asap */
  -webkit-animation-delay: 3s; /* Wait half of the animation */
  -webkit-animation-name: close-wrapper; /* Keyframes name */
}

.circle[data-anim~=left] {
  -webkit-animation-duration: 6s; /* Full animation time */
  -webkit-animation-name: left-spin;
}

.circle[data-anim~=right] {
  -webkit-animation-duration: 3s; /* Half animation time */
  -webkit-animation-name: right-spin;
}
/* Rotate the right side of the progress bar from 0 to 180 degrees */
@-webkit-keyframes right-spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(180deg);
  }
}
/* Rotate the left side of the progress bar from 0 to 360 degrees */
@-webkit-keyframes left-spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
/* Set the wrapper clip to auto, effectively removing the clip */
@-webkit-keyframes close-wrapper {
  to {
    clip: rect(auto, auto, auto, auto);
  }
}

<div class="wrapper" data-anim="base wrapper">
  <div class="circle" data-anim="base left"></div>
  <div class="circle" data-anim="base right"></div>
</div>

इस फिडेल को भी यहाँ देखें (केवल CSS)

@import url(http://fonts.googleapis.com/css?family=Josefin+Sans:100,300,400);
    
.arc1 {
    width: 160px;
    height: 160px;
    background: #00a0db;
    -webkit-transform-origin: -31% 61%;
    margin-left: -30px;
    margin-top: 20px;
    -webkit-transform: translate(-54px,50px);
    -moz-transform: translate(-54px,50px);
    -o-transform: translate(-54px,50px);
}
.arc2 {
    width: 160px;
    height: 160px;
    background: #00a0db;
    -webkit-transform: skew(45deg,0deg);
    -moz-transform: skew(45deg,0deg);
    -o-transform: skew(45deg,0deg);
    margin-left: -180px;
    margin-top: -90px;
    position: absolute;
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -o-transition: all .5s linear;
}

.arc-container:hover .arc2 {
    margin-left: -50px;
    -webkit-transform: skew(-20deg,0deg);
    -moz-transform: skew(-20deg,0deg);
    -o-transform: skew(-20deg,0deg);
}

.arc-wrapper {
    width: 150px;
    height: 150px;
    border-radius:150px;
    background: #424242;
    overflow:hidden;
    left: 50px;
    top: 50px;
    position: absolute;
}
.arc-hider {
    width: 150px;
    height: 150px;
    border-radius: 150px;
    border: 50px solid #e9e9e9;
    position:absolute;
    z-index:5;
    box-shadow:inset 0px 0px 20px rgba(0,0,0,0.7);
}

.arc-inset  {
    font-family: "Josefin Sans";
    font-weight: 100;
    position: absolute;
    font-size: 413px;
    margin-top: -64px;
    z-index: 5;
    left: 30px;
    line-height: 327px;
    height: 280px;
    -webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,0.2));
}
.arc-lowerInset {
    font-family: "Josefin Sans";
    font-weight: 100;
    position: absolute;
    font-size: 413px;
    margin-top: -64px;
    z-index: 5;
    left: 30px;
    line-height: 327px;
    height: 280px;
    color: white;
    -webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,0.2), rgba(0,0,0,1));
}
.arc-overlay {
    width: 100px;
    height: 100px;
    background-image: linear-gradient(bottom, rgb(217,217,217) 10%, rgb(245,245,245) 90%, rgb(253,253,253) 100%);
    background-image: -o-linear-gradient(bottom, rgb(217,217,217) 10%, rgb(245,245,245) 90%, rgb(253,253,253) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(217,217,217) 10%, rgb(245,245,245) 90%, rgb(253,253,253) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(217,217,217) 10%, rgb(245,245,245) 90%, rgb(253,253,253) 100%);

    padding-left: 32px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    line-height: 100px;
    font-family: sans-serif;
    font-weight: 400;
    text-shadow: 0 1px 0 #fff;
    font-size: 22px;
    border-radius: 100px;
    position: absolute;
    z-index: 5;
    top: 75px;
    left: 75px;
    box-shadow:0px 0px 20px rgba(0,0,0,0.7);
}
.arc-container {
    position: relative;
    background: #e9e9e9;
    height: 250px;
    width: 250px;
}

<div class="arc-container">
    <div class="arc-hider"></div>
    <div class="arc-inset">
        o
    </div>
    <div class="arc-lowerInset">
        o
    </div>
    <div class="arc-overlay">
        35%
    </div>
    <div class="arc-wrapper">
        <div class="arc2"></div>
        <div class="arc1"></div>
    </div>
</div>

या HTML5, CSS3 और जावास्क्रिप्ट के साथ यह सुंदर गोल प्रगति बार ।

Comments

fromanegg.com/post/41302147556/100-pure-css-radial-progress-bar

— रोको सी Buljan

@ वानोस आई ने पहले समाधान का प्रयास किया। मैं .circle सीमा 10px के बजाय 6px होना चाहिए। मैंने वही हासिल किया लेकिन 50% तक पहुंचने पर। यह एक झटका देता है और फिर से एनीमेशन शुरू करता है। बस बाहर की कोशिश करो

— संतोष कुमार

@ संतोष-कुमार, आपको अन्य मूल्यों को भी बदलने की आवश्यकता है

— पैनोस काल।

@ पैनोस मैं पहले समाधान की प्रगति को कैसे बदलूंगा? यह एक डेटा तत्व के साथ किया जा सकता है? मैं एनीमेशन के लिए नया नहीं हूँ

— एंथोनीथेरोज़ोनसन

एमडीएन के अनुसार clipअब पदावनत कर दिया गया है।

— jstaab

Answer 3

उस बारे में क्या?

एचटीएमएल

<div class="chart" id="graph" data-percent="88"></div>

जावास्क्रिप्ट

var el = document.getElementById('graph'); // get canvas

var options = {
    percent:  el.getAttribute('data-percent') || 25,
    size: el.getAttribute('data-size') || 220,
    lineWidth: el.getAttribute('data-line') || 15,
    rotate: el.getAttribute('data-rotate') || 0
}

var canvas = document.createElement('canvas');
var span = document.createElement('span');
span.textContent = options.percent + '%';

if (typeof(G_vmlCanvasManager) !== 'undefined') {
    G_vmlCanvasManager.initElement(canvas);
}

var ctx = canvas.getContext('2d');
canvas.width = canvas.height = options.size;

el.appendChild(span);
el.appendChild(canvas);

ctx.translate(options.size / 2, options.size / 2); // change center
ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg

//imd = ctx.getImageData(0, 0, 240, 240);
var radius = (options.size - options.lineWidth) / 2;

var drawCircle = function(color, lineWidth, percent) {
        percent = Math.min(Math.max(0, percent || 1), 1);
        ctx.beginPath();
        ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
        ctx.strokeStyle = color;
        ctx.lineCap = 'round'; // butt, round or square
        ctx.lineWidth = lineWidth
        ctx.stroke();
};

drawCircle('#efefef', options.lineWidth, 100 / 100);
drawCircle('#555555', options.lineWidth, options.percent / 100);

और सीएसएस

div {
    position:relative;
    margin:80px;
    width:220px; height:220px;
}
canvas {
    display: block;
    position:absolute;
    top:0;
    left:0;
}
span {
    color:#555;
    display:block;
    line-height:220px;
    text-align:center;
    width:220px;
    font-family:sans-serif;
    font-size:40px;
    font-weight:100;
    margin-left:5px;
}

http://jsfiddle.net/Aapn8/3410/

मूल कोड सरल पाई चार्ट http://rendro.github.io/easy-pie-chart/ से लिया गया था

Comments

यह मेरे लिए सबसे अच्छा समाधान था (कोई भी jquery भी!)।

— एंडी बी

मेरे लिए भी। यहाँ यह कैसे चेतन है: drawCircle ('# efefef', options.lineWidth, 100/100); var i = 0; var int = setInterval (फ़ंक्शन () {i ++; drawCircle ('# 555555', options.lineWidth, i / 100); span.textContent = i + "%"; if (i = 100) {clearInterval (int);} }, 100);

— marlar

सर्कल में ढाल रंग कैसे सेट करें?

— यानि

jsFiddle क्रोम पर एक बार नहीं दिखाता है।

— एस्माओ

Answer 4

एक और शुद्ध सीएसएस आधारित समाधान जो दो क्लैप्ड गोल तत्वों पर आधारित है जिसे मैं सही कोण पर लाने के लिए घूमता हूं:

http://jsfiddle.net/maayan/byT76/

यह मूल सीएसएस है जो इसे सक्षम करता है:

.clip1 {
    position:absolute;
    top:0;left:0;
    width:200px;
    height:200px;
    clip:rect(0px,200px,200px,100px);
}
.slice1 {
    position:absolute;
    width:200px;
    height:200px;
    clip:rect(0px,100px,200px,0px);
    -moz-border-radius:100px;
    -webkit-border-radius:100px; 
    border-radius:100px;
    background-color:#f7e5e1;
    border-color:#f7e5e1;
    -moz-transform:rotate(0);
    -webkit-transform:rotate(0);
    -o-transform:rotate(0);
    transform:rotate(0);
}

.clip2 
{
    position:absolute;
    top:0;left:0;
    width:200px;
    height:200px;
    clip:rect(0,100px,200px,0px);
}

.slice2
{
    position:absolute;
    width:200px;
    height:200px;
    clip:rect(0px,200px,200px,100px);
    -moz-border-radius:100px;
    -webkit-border-radius:100px; 
    border-radius:100px;
    background-color:#f7e5e1;
    border-color:#f7e5e1;
    -moz-transform:rotate(0);
    -webkit-transform:rotate(0);
    -o-transform:rotate(0);
    transform:rotate(0);
}

और js इसे आवश्यकतानुसार घुमाते हैं।

समझने में काफी आसान है ..

आशा है कि यह मदद करता है, Maayan

Comments

अंदर jQuery, सभी -vendor-prefixesअंदर सेट करने की कोई जरूरत नहीं है.css()transform: 'rotate(' + degree + 'deg)'

— रोको सी। Buljan

यह आसान और साफ है, मैंने @Maayan उदाहरण से शुरू करने का काम किया और यह मिला: jsfiddle.net/g8z64Ler

— lukart