I would like to use the Progress Icons shortcode in a slightly different way, reversing the effect.
Using this... [progress_icons icon="icon-heart-line" count="100" active="99" background=""]...I would get 99 highlighted hearts, and one dark one at the end. How would I modify the CSS for that page, so I get 99 dark ones and one highlighted heart at the end??
/* Progress icons */
.progress_icons { margin-bottom: 12px; overflow: hidden; }
.progress_icons .progress_icon { display: inline-block; margin: 0 7px 7px 0; width: 35px; height: 35px; line-height: 35px; font-size: 17px; color: #fff; text-align: center; -webkit-border-radius: 100%; border-radius: 100%; }
.progress_icons .progress_icon:last-child { margin-right: 0px; }
.progress_icons .progress_icon:not(.themebg) { background: rgba(0,0,0,.06); }
/* Animation */
.progress_icons .progress_icon { -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
Comments
unfortunately reversing effect is not possible because this needs to many changes in files.
Thanks for understanding!