How to Create a Cool Skill Bar Using CSS on Blogger

What are skill bars?

Skill Bar or Skills column is a column that contains statistics or ratings about a product or a person’s skills. Usually Skill Bar This is installed on an e-commerce website that is supposed to check a product for both the performance of the device and the rating of the item.

Usually Skill Bar It was developed using JavaScript to generate animations from. to display Skill Bar This. But in this article the author will provide a little tutorial How to Create a Cool Skill Bar Using CSS on Blogger which only uses CSS and HTML so it doesn’t load your blog.

How to Create a Cool Skill Bar Using CSS on Blogger

1. Sign in to the account Blogger Themes HTML Edit.

2. Copy and paste the following CSS code before the code ]]> or

Note: Here the author provides 3 different CSS styles.

CSS styles 1

.skillst2 {width:100%;color:#fff;}.skillst2 .skillbar{width:100%;height:40px;position:relative;margin-bottom:5px;}.skillst2 .count-bar{height:100%;width:0px;position:relative;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}.skillst2 .count-bar.color-1{background-color:#338ae7;}.skillst2 .count-bar.color-2{background-color:#fe871f;}.skillst2 .count-bar.color-3{background-color:#bd5cb9;}.skillst2 .count-bar.color-4{background-color:#2d7da5;}.skillst2 .count-bar.color-5{background-color:#f75d41;}.skillst2 .title{font-size:14px;font-weight:400;padding-left:12px;line-height:40px;text-transform:uppercase;}.skillst2 .count{position:absolute;top:0;right:12px;line-height:40px;font-size:14px;font-weight:400;}

CSS styles 2

.jarak{padding:0px 10px}.progress{display:-ms-flexbox;display:flex;height:1rem;overflow:hidden;font-size:.75rem;background-color:#e9ecef;border-radius:.25rem;}.progress-bar{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:#fff;background-color:#123456;}.bg-primary{background-color:#007bfd!important}.bg-primary:focus,.bg-primary:hover{background-color:#0062cc!important}.bg-secondary{background-color:#868e96!important}.bg-secondary:focus,.bg-secondary:hover{background-color:#6c757d!important}.bg-danger{background-color:#dc3545!important;}.bg-danger:focus,.bg-danger:hover{background-color:#bd2130!important;}.bg-warning{background-color:#ffc107!important;}.bg-warning:focus,.bg-warning:hover{background-color:#d39e00!important;}.bg-success{background-color:#28a745!important;}.bg-success:focus,.bg-success:hover{background-color:#1e7e34!important;}.bg-info{background-color:#17a2b8!important;}.bg-info:focus,.bg-info:hover{background-color:#117a8b!important;}.bg-dark{background-color:#343a40!important;}.bg-dark:focus,.bg-dark:hover{background-color:#1d2124!important;}.bg-gradasi{background:linear-gradient(to left,green,orange) !important;}.bg-gradasi:focus,.bg-gradasi:hover{background:linear-gradient(to right,green,orange) !important;}

CSS styles 3

progress:not(value){}progress[value]{appearance:none;border:none;width:100%;height:20px;background-color:whiteSmoke;border-radius:3px;box-shadow:0 2px 3px rgba(0,0,0,.5) inset;color:royalblue;position:relative;margin:0 0 1.5em}progress[value]::-webkit-progress-bar{background-color:whiteSmoke;border-radius:3px;box-shadow:0 2px 3px rgba(0,0,0,.5) inset}progress[value]::-webkit-progress-value{position:relative;background-size:35px 20px,100% 100%,100% 100%;border-radius:3px;animation:animate-stripes 5s linear infinite}@keyframes animate-stripes{100%{background-position:-100px 0}}progress[value]::-webkit-progress-value:after{content:'';position:absolute;width:5px;height:5px;top:7px;right:7px;background-color:white;border-radius:100%}progress[value]::-moz-progress-bar{background-image:-moz-linear-gradient( 135deg,transparent,transparent 33%,rgba(0,0,0,.1) 33%,rgba(0,0,0,.1) 66%,transparent 66%),-moz-linear-gradient( top,rgba(255,255,255,.25),rgba(0,0,0,.2)),-moz-linear-gradient( left,#09c,#f44);background-size:35px 20px,100% 100%,100% 100%;border-radius:3px}.progress-bar{background-color:whiteSmoke;border-radius:3px;box-shadow:0 2px 3px rgba(0,0,0,.5) inset;width:100%;height:20px}.progress-bar span{background-color:royalblue;border-radius:3px;display:block;text-indent:-9999px}p[data-value]{position:relative}p[data-value]:after{content:attr(data-value) '%';position:absolute;right:0}.html5::-webkit-progress-value,.python::-webkit-progress-value{background-image:-webkit-linear-gradient( 135deg,transparent,transparent 33%,rgba(0,0,0,.1) 33%,rgba(0,0,0,.1) 66%,transparent 66%),-webkit-linear-gradient( top,rgba(255,255,255,.25),rgba(0,0,0,.2)),-webkit-linear-gradient( left,#09c,#f44)}.css3::-webkit-progress-value,.php::-webkit-progress-value{background-image:-webkit-linear-gradient( 135deg,transparent,transparent 33%,rgba(0,0,0,.1) 33%,rgba(0,0,0,.1) 66%,transparent 66%),-webkit-linear-gradient( top,rgba(255,255,255,.25),rgba(0,0,0,.2)),-webkit-linear-gradient( left,#09c,#ff0)}.jquery::-webkit-progress-value,.node-js::-webkit-progress-value{background-image:-webkit-linear-gradient( 135deg,transparent,transparent 33%,rgba(0,0,0,.1) 33%,rgba(0,0,0,.1) 66%,transparent 66%),-webkit-linear-gradient( top,rgba(255,255,255,.25),rgba(0,0,0,.2)),-webkit-linear-gradient( left,#09c,#690)}.html5::-moz-progress-bar,.php::-moz-progress-bar{/* Gradient background with Stripes */background-image:-moz-linear-gradient( 135deg,transparent,transparent 33%,rgba(0,0,0,.1) 33%,rgba(0,0,0,.1) 66%,transparent 66%),-moz-linear-gradient( top,rgba(255,255,255,.25),rgba(0,0,0,.2)),-moz-linear-gradient( left,#09c,#f44)}.css3::-moz-progress-bar,.php::-moz-progress-bar{{background-image:-moz-linear-gradient( 135deg,transparent,transparent 33%,rgba(0,0,0,.1) 33%,rgba(0,0,0,.1) 66%,transparent 66%),-moz-linear-gradient( top,rgba(255,255,255,.25),rgba(0,0,0,.2)),-moz-linear-gradient( left,#09c,#ff0)}.jquery::-moz-progress-bar,.node-js::-moz-progress-bar{background-image:-moz-linear-gradient( 135deg,transparent,transparent 33%,rgba(0,0,0,.1) 33%,rgba(0,0,0,.1) 66%,transparent 66%),-moz-linear-gradient( top,rgba(255,255,255,.25),rgba(0,0,0,.2)),-moz-linear-gradient( left,#09c,#690)}

3. Create an article or post and choose HTML mode no Compose Then enter the following area code.

HTML code 1

HTML 5
65%
CSS 3
79%
jQuery
95%
PHP
70%
SEO
70%

HTML code 2

Default
20
Primary
54
Secondary
75
Danger
25
Warning
40
Success
85
Info
80
Dark
67
Gradasi
87

HTML code 3

  • Coding

    HTML5

    80%

    CSS3

    60%

    jQuery

    50%
  • Olahraga

    Lari

    75%

    Sepak Bola

    65%

    Bulutangkis

    35%

4th complete Article ready for publication.

Here are 3 views Skill Bar with different CSS styles.

Skill Bar Style 1

Skill Bar Style 2

Skill Bar Style 3

So many tutorials Easy Ways to Create Cool Skill Bars Using CSS on Blogger. If you have any questions about this item, please feel free to leave a comment below. Hope it’s useful.






Leave a Reply

Your email address will not be published.