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


112

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

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

परिपत्र प्रगति सलाखों


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

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

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

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

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

जवाबों:


119

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

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

रेडियल प्रगति सूचक का gif


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

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

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

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

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

78

मैंने केवल 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 और जावास्क्रिप्ट के साथ यह सुंदर गोल प्रगति बार



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

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

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

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

36

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

एचटीएमएल

<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/ से लिया गया था


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

2
मेरे लिए भी। यहाँ यह कैसे चेतन है: 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

1
सर्कल में ढाल रंग कैसे सेट करें?
यानि

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

10

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

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


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

1
यह आसान और साफ है, मैंने @Maayan उदाहरण से शुरू करने का काम किया और यह मिला: jsfiddle.net/g8z64Ler
lukart
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.