সিএসএস অগ্রগতি বৃত্ত [বন্ধ]

Question

অগ্রগতি বারগুলি খুঁজতে আমি এই ওয়েবসাইটটি অনুসন্ধান করেছি, তবে আমি যেগুলি অ্যানিমেটেড চেনাশোনাগুলি দেখতে পেয়েছি যা পুরো 100% এ যায়।

আমি এটি নীচের স্ক্রিনশটের মতো নির্দিষ্ট শতাংশে থামতে চাই। আমি কি সিএসএস ব্যবহার করে এমন কোনও উপায় করতে পারি?

Comments

আমি কোনও স্ক্রিপ্ট খুঁজছি না, আমি এ সম্পর্কিত কোনও CSS3 তথ্য সন্ধান করছি।

— অ্যাডাম গুনশি

শব্দটি মনে করবেন না, "সিএসএস অগ্রগতি বৃত্ত কীভাবে করবেন?" এখনও বৈধ। আমি মনে করি এটি নতুন শব্দের সাথে আবার খোলা উচিত, ফলাফলটি অনুসন্ধানে প্রথম হয় এবং এতে পুরানো উত্তর থাকে।

— সিয়েন্টিক

স্ক্রিনশটটি কোন ওয়েবসাইট থেকে এসেছে?

— মোরালকোড

এটি 'বিজ্ঞপ্তি অগ্রগতি সূচক সিএসএস' এর জন্য গুগলে এক নম্বর ফলাফল। প্রশ্ন লজ্জাজনক একটি প্রশ্ন।

— গোফেরখান

আপনি যদি কম ব্যবহার করছেন তবে আপনি সিএসএসক্রিপ্ট

— পিউর

Answer 1

আমি CSS3 এবং কম জাভাস্ক্রিপ্ট লাইব্রেরি দিয়ে ঠিক কীভাবে এটি করতে পারি তার একটি টিউটোরিয়াল তৈরি করেছি। আপনি এখানে ব্লগপোস্টটি পেতে পারেন: https://medium.com/secoya-tech/a917b80c43f9

এখানে চূড়ান্ত ফলাফলের jsFood রয়েছে। শতাংশটি data-progressবৈশিষ্ট্যের মাধ্যমে সেট করা হয় । পরিবর্তনগুলি সিএসএস রূপান্তরগুলি ব্যবহার করে অ্যানিমেটেড হয়।

Comments

আপনি সিএসএস দিয়ে এটি করতে পারবেন আমার ধারণা ছিল না। খুশী হলাম।

— হবিস

যদিও বড় পারফরম্যান্স হিট হয়েছে .. এটি আমার অ্যাপ্লিকেশনটির জন্য অকেজো করে তোলে = [

— হবস

দুর্দান্ত স্টাফ ফায়ারফক্সে একটি ছোটখাটো সমস্যা (বিকাশকারী সংস্করণ 41.0a2 ব্যবহার করে) রূপান্তরকালে দৃশ্যমান তীক্ষ্ণ প্রান্ত তৈরি করে। আপনি 90 এ অগ্রগতি সেট করে 10 সেকেন্ডারে রূপান্তর করার সময়টি নির্ধারণ করা সহজ। ঠিক outline: 1px solid transparent;করতে .mask, .fill, .shadowগ্রুপে যুক্ত করুন।

— luopio

@ হবিস, আপনি পারবেন না, পোস্টারটি পড়ে আছে। এই উত্তরটি LESS নামক একটি লাইব্রেরির মাধ্যমে জাভাস্ক্রিপ্টের প্রচুর পরিমাণে ব্যবহার করে।

— getFree

আমি একটি স্যাস ভার্সন তৈরি করেছি, কেবল যদি কেউ চেষ্টা করে দেখতে চান: gist.github.com/digitalbreed/84a19db69244b22519e03550ba010a25

— ডিজিটাল ব্রিড

Answer 2

আমি কেবল সিএসএস ব্যবহার করে একটি ফিডাল তৈরি করেছি ।

.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>

এই ঝাঁকুনিটি এখানেও পরীক্ষা করুন (কেবলমাত্র সিএসএস)

@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>

বা এইচটিএমএল 5, সিএসএস 3 এবং জাভাস্ক্রিপ্ট সহ এই সুন্দর বৃত্তাকার অগ্রগতি বার ।

Comments

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

— রোকো সি

@panos আমি আপনার প্রথম সমাধানটি চেষ্টা করেছি। আমার 10px এর পরিবর্তে বৃত্তের সীমানা 6px হওয়া দরকার। আমি একই অর্জন কিন্তু 50% পৌঁছেছে। এটি একটি ঝাঁকুনি দেয় এবং আবার অ্যানিমেশন শুরু করে। শুধু চেষ্টা করে দেখুন

— সন্তোষ কুমার

@ সন্তোষ-কুমার, আপনার অন্যান্য মানও বদলাতে হবে

— প্যানোস কাল।

@panos আমি কীভাবে প্রথম সমাধানের অগ্রগতি পরিবর্তন করব? এটি একটি ডেটা উপাদান দিয়ে করা যেতে পারে? আমি বরং অ্যানিমেশনটিতে নতুন

— অ্যান্থনিথেরকজহানসন

এমডিএন অনুসারে 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

এটি আমার জন্য সেরা সমাধান ছিল (কোনও জেকোয়ারিও নেই!)।

— অ্যান্ডি বি

আমার জন্যও. এটি কীভাবে সচল করা যায় তা এখানে: ড্রক সার্কেল ('# ইফেফ', অপশনস.লাইনউইথ, 100/100); var i = 0; var int = setInterval (ফাংশন () {i ++; ড্রক সার্কেল ('# 555555', অপশনস.লাইন উইথ, আই / 100); স্প্যান.টেক্সট কনটেন্ট = i + "%"; যদি (i> = 100) {ক্লিয়ার ইনটারভাল (ইন্ট);} }, 100);

— মারলার

বৃত্তে গ্রেডিয়েন্ট রঙগুলি কীভাবে সেট করবেন?

— yaniv14

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);
}

এবং জেএসগুলি এটি প্রয়োজনীয় হিসাবে আবর্তিত করে।

বুঝতে খুব সহজ ..

আশা করি এটি সাহায্য করবে, মায়ান

Comments

JQuery এর -vendor-prefixesভিতরে, সমস্ত অভ্যন্তর সেট করার দরকার নেই .css()only কেবলমাত্র ব্যবহার করুনtransform: 'rotate(' + degree + 'deg)'

— রোকো সি বুলজান

এটিই সহজ এবং পরিষ্কার, আমি @ মায়ান উদাহরণ থেকে শুরু করে কাজ করেছি এবং এটি পেয়েছি: jsfiddle.net/g8z64Ler

— lukart