CodePen Embed - Progress Bars and Spinners




    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="assets/css/style.css">
    <script src="https://kit.fontawesome.com/c6af0a9cda.js" crossorigin="anonymous"></script>

    <div id="skills" class="container">
        <h2>Skills</h2>
        <h3>Progress Bars</h3>
        <!--==PHP==-->
        <div class="row">
            <div class="col-1">
                <div id="php-logo" ><i class="fab fa-php"></i></div>
            </div><!--col-->
            <div class="col-11">
                <div id="progress-wrapper" class="w-50">
                    <div class="progress">                   
                        <div id="php" class="progress-bar progress-bar-striped progress-bar-animated" style="width: 1%">
                            
                        </div>
                    </div>
                </div><!--wrapper-->
            </div><!--col-->
        </div><!--row-->
        <!--==HTML==-->
        <div class="row">
            <div class="col-1">
                <div id="html-logo"> <i class="fab fa-html5"></i></div>
            </div><!--col-->
            <div class="col-11">
                <div id="progress-wrapper" class="w-50">
                    <div class="progress">                   
                        <div id="html5" class="progress-bar progress-bar-striped progress-bar-animated" style="width: 1%">
                        </div>
                    </div>
                </div><!--wrapper-->
            </div><!--col-->
        </div><!--row-->
        <!--==JAVASCRIPT==-->
        <div class="row">
            <div class="col-1">
                <div id="javascript-logo" ><i class="fab fa-js-square"></i></div>
            </div><!--col-->
            <div class="col-11">
                <div id="progress-wrapper" class="w-50">
                    <div class="progress">                   
                        <div id="javascript" class="progress-bar progress-bar-striped progress-bar-animated" style="width: 1%">
                        </div>
                    </div>
                </div><!--wrapper-->
            </div><!--col-->
        </div><!--row-->
        <!--==CSS==-->
        <div class="row">
            <div class="col-1">
                <div id="css-logo" ><i class="fab fa-css3"></i></div>
            </div><!--col-->
            <div class="col-11">
                <div id="progress-wrapper" class="w-50">
                    <div class="progress">                   
                        <div id="css3" class="progress-bar progress-bar-striped progress-bar-animated" style="width: 1%">
                        </div>
                    </div>
                </div><!--wrapper-->
            </div><!--col-->
        </div><!--row-->
        <h3>Spinners</h3>

    </div><!--== Container ==-->
<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <div class="wrapper mx-auto">
                <div id="php-skill" class="spinner">
                    <span id="php-counter"></span>
                </div>
                <div class="content">
                    <div id="logo-php">
                        <span class="d-block mx-auto" style="width: 62.5px;">
                           <i class="fab fa-php "></i>
                        </span>
                    </div>
                    <div id="percent-php" class="text-center">
                        
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="wrapper mx-auto">
                <div id="html-skill" class="spinner">
                    <span id="html-counter"></span>
                </div>
                <div class="content">
                    <div id="logo-html">
                        <i class="fab fa-html5"></i>
                    </div>
                    <div id="percent-html" class="text-center">
                        
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="wrapper mx-auto">
                <div id="js-skill" class="spinner">
                    <span id="js-counter"></span>
                </div>
                <div class="content">
                    <div id="logo-js">
                        <i class="fab fa-js-square"></i>
                    </div>
                    <div id="percent-js" class="text-center">
                        
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="wrapper mx-auto">
                <div id="css-skill" class="spinner">
                    <span id="html-counter"></span>
                </div>
                <div class="content">
                    <div id="logo-css">
                        <i class="fab fa-css3"></i>
                    </div>
                    <div id="percent-css" class="text-center">
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
      
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    <script src="assets/js/main.js"></script>
    <script type="text/javascript" src="assets/js/animate.js"></script>

/*progress bar*/

.fab.fa-html5{
    color: #f06529;
}

.fab.fa-js-square{
    color: #F0DB4F;
}

.fab.fa-css3{
    color: #3C99DC;
}


.fab.fa-html5,
.fab.fa-js-square,
.fab.fa-css3{
    font-size: 50px;
    width: 37.5px;
    display: block;
    margin: auto;
}

.fab.fa-php{
    color: #8993be;
    font-size: 50px;
}

div.progress{
    height: 25px;
    margin-top: 12.5px;
}

#html5{
    background-color: #f06529;
}

#php{
    background-color: #8993be;
}

#javascript{
    background: #F0DB4F;
}

/*Spinners*/

#html-skill{
    border: 10px solid #fff;
    border-top: 10px solid #f06529;

}

#php-skill{
    border: 10px solid #fff;
    border-top: 10px solid #8993be;

}

#js-skill{
    border: 10px solid #fff;
    border-top: 10px solid #F0DB4F;

}

#css-skill{
    border: 10px solid #fff;
    border-top: 10px solid #3C99DC;

}

.spinner{
    border-radius: 50%;
    height: 150px;
    width: 150px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;

}

.content{
  margin-top: -112px;
  height: 150px;
  width: 150px;
}

.wrapper{
    width: 150px;
}

.percent-html span{
    font-weight: bold;
}



@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

$(window).ready(function(){
 
    $("#php").animate({
        width: "98%",
    },100)

    $("#html5").animate({
        width: "100%",
    },100)

    $("#javascript").animate({
        width: "90%",
    },100)

    $("#css3").animate({
        width: "93%",
    },100)

    let php = 0;
    let percentPhP = document.getElementById("php");
    let percentChangePhp = setInterval(function(){
        php++;
        
        percentPhP.innerText = php + "%";
        if(php >= 98){
            clearInterval(percentChangePhp);
        };
    },8);

    let html = 0;
    let percentHtml = document.getElementById("html5");
    let percentChangeHtml = setInterval(function(){
        html++;
       
        percentHtml.innerText = html + "%";
        if(html >= 100){
            clearInterval(percentChangeHtml);
        };
    },8);

    let js = 0;
    let percentJs = document.getElementById("javascript");
    let percentChangeJs = setInterval(function(){
        js++;
        percentJs.innerText = js + "%";
        if(js >= 90){
            clearInterval(percentChangeJs);
        };
    },8);

    let css = 0;
    let percentCss = document.getElementById("css3");
    let percentChangeCss = setInterval(function(){
        css++;
        percentCss.innerText = css + "%";
        if(css >= 93){
            clearInterval(percentChangeCss);
        };
    },8);

    let pphp = 0;
    let phpPercent = document.getElementById("percent-php");
    let phpPercentChange = setInterval(function(){
        pphp++;
        phpPercent.innerText =  pphp + "%";
        if(pphp >= 98){
            clearInterval(phpPercentChange);
        };
    },10);

    let phtml = 0;
    let htmlPercent = document.getElementById("percent-html");
    let htmlPercentChange = setInterval(function(){
        phtml++;
        htmlPercent.innerText =  phtml + "%";
        if(phtml >= 100){
            clearInterval(htmlPercentChange);
        };
    },10);

    let pjs = 0;
    let jsPercent = document.getElementById("percent-js");
    let jsPercentChange = setInterval(function(){
        pjs++;
        jsPercent.innerText =  pjs + "%";
        if(pjs >= 90){
            clearInterval(jsPercentChange);
        };
    },10);

    let pcss = 0;
    let cssPercent = document.getElementById("percent-css");
    let cssPercentChange = setInterval(function(){
        pcss++;
        cssPercent.innerText =  pcss + "%";
        if(pcss >= 93){
            clearInterval(cssPercentChange);
        };
    },10);

});

This Pen is owned by Joel Hempel on CodePen.

See more by @ilove-code-84 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.