Use CSS3 animations to dynamically render multiple data entries.

Add-ons

2026-07-26 04:38 5 次浏览 • 0 次下载 1.3KB

Use CSS3 animations to dynamically render multiple data entries.

Plugin Description: A horizontally oriented bar chart dynamically rendered using CSS3. Custom-written with beautiful styling and highly customizable. Feel free to experiment!

Last Updated: 2020-04-19 21:36:29

Simply open it in a browser to see the results.

Following the principle that plugins should be ready to use, I always make them as easy to use as possible!

You can adjust the position of the bar chart text using the following styles.

.skill2 li em:first-child {
       position: absolute;
       top: -15px;
       left: 0;
   }
.skill2 li em:last-child {
       position: absolute;
       top: -15px;
       right: 0;
}

Step 1: Build dynamic HTML (you can add or remove HTML elements as needed).

_html += '<li>';
_html += '<em>'+listdata[i]['data1']+'</em>';
_html += '<div ><span ></span></div>';
_html += '<em>'+listdata[i]['data2']+'%</em>';
_html += '</li>';