TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

কিভাবে Weebly এ অ্যানিমেটেড প্রগ্রেস বা স্কিল বার যোগ করবেন?

3

অগ্রগতি বা দক্ষতা বারগুলি সাধারণ বা অ্যানিমেটেড বারগুলির সেট যা সাধারণত অনুভূমিক বারগুলির সাথে ডেটা প্রদর্শনের জন্য ব্যবহৃত হয়। অগ্রগতি বার অনেক পরিস্থিতিতে দরকারী যেমন:

  • আমার সম্পর্কে একটি পৃষ্ঠায় আপনার দক্ষতা দেখাচ্ছে
  • আপনার দলের সদস্যের দক্ষতা প্রদর্শন
  • বৈশিষ্ট্যের সেটের তুলনা করা, উদাহরণস্বরূপ 100% স্কেলে সমস্ত বিনামূল্যে সাইট নির্মাতা সরঞ্জামগুলির তুলনা করা

এই নিবন্ধে আমরা ব্যাখ্যা করব কিভাবে লোড করার সময় jQuery অ্যানিমেশন সহ Weebly সাইটে অগ্রগতি বা দক্ষতা বার যোগ করা যায়। এই articl পরীক্ষা করে দেখুন ই, আপনি WEebly মধ্যে বৃত্তাকার পাই উন্নতি চার্ট যোগ করতে চান তবে।

JQuery অ্যানিমেটেড প্রগ্রেস বার যোগ করা

প্রগ্রেস বার নিচের মত দেখাবে। এটি CSS এবং jQuery দিয়ে তৈরি করা হয়েছে যা পৃষ্ঠা লোড হলে স্বয়ংক্রিয়ভাবে নির্দিষ্ট শতাংশে অ্যানিমেটেড হয়ে যাবে।

কিভাবে Weebly এ অ্যানিমেটেড প্রগ্রেস বা স্কিল বার যোগ করবেন?

এর তিনটি প্রধান উপাদান রয়েছে:

  • সিএসএস -এ নিয়ন্ত্রিত স্থির পটভূমির রঙ সহ একটি শিরোনাম
  • এইচটিএমএল -এ সংজ্ঞায়িত প্রস্থ সহ jQuery- এ নিয়ন্ত্রিত প্রগ্রেস বার অ্যানিমেশন
  • শতকরা টেক্সট HTML এ নিয়ন্ত্রিত

দ্রষ্টব্য: পৃষ্ঠার উপরে উইজেট রাখার সুপারিশ করা হয় যাতে অ্যানিমেশন ব্যবহারকারীদের কাছে দৃশ্যমান হয়।

JQuery অ্যানিমেটেড প্রগ্রেস বারের জন্য CSS

পৃষ্ঠার "হেডার কোড" বিভাগের অধীনে অথবা সাইট লেভেলে নীচের CSS যোগ করুন। আপনি ট্যাগ ছাড়া "main.less" ফাইলে কোড যোগ করতে পারেন।

<style> .progressbar { position:relative; display:block; margin-bottom:15px; width:100%; background:#eee; height:35px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -webkit-transition:0.4s linear; -moz-transition:0.4s linear; -ms-transition:0.4s linear; -o-transition:0.4s linear; transition:0.4s linear; -webkit-transition-property:width, background-color; -moz-transition-property:width, background-color; -ms-transition-property:width, background-color; -o-transition-property:width, background-color; transition-property:width, background-color; } .progressbar-title { position:absolute; top:0; left:0; width:170px; font-weight:600; font-size:16px; color:#ffffff; background:#93ab3a; -webkit-border-top-left-radius:3px; -webkit-border-bottom-left-radius:4px; -moz-border-radius-topleft:3px; -moz-border-radius-bottomleft:3px; border-top-left-radius:3px; border-bottom-left-radius:3px; } .progressbar-title span { display:block; background:rgba(0, 0, 0, 0.1); padding:0 20px; height:35px; line-height:35px; -webkit-border-top-left-radius:3px; -webkit-border-bottom-left-radius:3px; -moz-border-radius-topleft:3px; -moz-border-radius-bottomleft:3px; border-top-left-radius:3px; border-bottom-left-radius:3px; } .progressbar-bar { height:35px; width:0px; background:#6adcfa; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; } .progress-bar-percent { position:absolute; right:10px; top:0; font-size:15px; height:35px; line-height:35px; color:#ffffff; color:rgba(0, 0, 0, 0.4); } </style>

উপরে উল্লিখিত হিসাবে, শিরোনামের পটভূমি "পটভূমি:#93ab3a;" শ্রেণী ".progressbar-title" এর অধীনে সংজ্ঞায়িত বৈশিষ্ট্য।

JQuery অ্যানিমেটেড প্রগ্রেস বারের স্ক্রিপ্ট

যে পৃষ্ঠায় আপনি অগ্রগতি বার যোগ করতে চান সেই পৃষ্ঠার "ফুটার কোড" বিভাগের অধীনে নীচের স্ক্রিপ্টটি যোগ করুন।

<script type="text/javascript"> jQuery(document).ready(function(){ jQuery('.progressbar').each(function(){ jQuery(this).find('.progressbar-bar').animate({ width:jQuery(this).attr('data-percent') },6000); }); }); </script>

অ্যানিমেশন গতি 6000ms হিসাবে সংজ্ঞায়িত করা হয় যা গতি বাড়াতে বা হ্রাস করার জন্য পরিবর্তন করা যেতে পারে (যত কম মান তত বেশি গতি)।

অটো লোডিং প্রগ্রেস বারের জন্য HTML

চূড়ান্ত অংশ হল এইচটিএমএল কোড, নীচের এইচটিএমএলটি আপনার উইবেলি পৃষ্ঠায় একটি "এম্বেড কোড" উপাদানটির মধ্যে যুক্ত করুন:

<!-- Start of 1 progress Bar --> <div class="progressbar clearfix " data-percent="60%"> <div class="progressbar-title"><span>SEO</span></div> <div class="progressbar-bar" style="background: #e67e22;"></div> <div class="progress-bar-percent">60%</div> </div> <!-- End of 1 progress Bar --> <!-- Start of 2 progress Bar --> <div class="progressbar clearfix " data-percent="75%"> <div class="progressbar-title"><span>Web Design</span></div> <div class="progressbar-bar" style="background: #3498db;"></div> <div class="progress-bar-percent">75%</div> </div>  <!-- End of 2 progress Bar --> <!-- Start of 3 progress Bar --> <div class="progressbar clearfix " data-percent="70%"> <div class="progressbar-title"><span>Weebly Design</span></div> <div class="progressbar-bar" style="background: #2c3e50;"></div> <div class="progress-bar-percent">70%</div> </div> <!-- End of 3 progress Bar --> <!-- Start of 4 progress Bar --> <div class="progressbar clearfix " data-percent="60%"> <div class="progressbar-title"><span>WordPress Design</span></div> <div class="progressbar-bar" style="background: #5a68a5;"></div> <div class="progress-bar-percent">60%</div> </div>  <!-- End of 4 progress Bar --> <!-- Start of 5 progress Bar --> <div class="progressbar clearfix " data-percent="65%"> <div class="progressbar-title"><span>Content Writing</span></div> <div class="progressbar-bar" style="background: #525252;"></div> <div class="progress-bar-percent">65%</div> </div>  <!-- End of 5 progress Bar --> <!-- Start of 6 progress Bar --> <div class="progressbar clearfix " data-percent="100%"> <div class="progressbar-title"><span>Blog Consulting</span></div> <div class="progressbar-bar" style="background: #2ecc71;"></div> <div class="progress-bar-percent">100%</div> </div>  <!-- End of 6 progress Bar --> <!-- Start of 7 progress Bar --> <div class="progressbar clearfix " data-percent="70%"> <div class="progressbar-title"><span>Plugin Development</span></div> <div class="progressbar-bar" style="background: #4288d0;"></div> <div class="progress-bar-percent">70%</div> </div> <!-- End of 7 progress Bar -->

প্রতিটি একক অগ্রগতি বার কোড শুরু এবং শেষ ব্লকের মধ্যে মন্তব্য করা হয়, আপনি অতিরিক্ত বার যোগ করতে ব্লকটি অনুলিপি / পেস্ট করতে পারেন।

প্রোগ্রেস বারের জন্য HTML কোড কাস্টমাইজ করা

নীচের ছবিটি নির্দেশ করে যে এইচটিএমএল কোডের প্রতিটি লাইন কীভাবে অগ্রগতি বারের উপাদানগুলিকে প্রভাবিত করে:

কিভাবে Weebly এ অ্যানিমেটেড প্রগ্রেস বা স্কিল বার যোগ করবেন?

প্রগতি বার HTML কোড ব্যাখ্যা

রেকর্ডিং উত্স: webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত