Breaking News: Grepper is joining You.com. Read the official announcement!

animated progress bar css

Add Answer

MD RAZZAK answered on January 23, 2022 Popularity 4/10 Helpfulness 3/10

answer animated progress bar css

related css animated progress bar

related html progress bars animated

animated progress bar css

Comment

/* animated progress bar css code */
svg.radial-progress circle{
	stroke-width: 5;
}

svg.radial-progress text {
	fill: #3c4761;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 300;
	font-size: 1.6rem;
}
svg.web-design circle{
	stroke: #30bae7;
}
svg.html-css circle{
	stroke: #d74680;
}
svg.graphic-design circle{
	stroke: #15c7a8;
}
svg.ui-ux circle{
	stroke: #eb7d4b;
}

Popularity 4/10 Helpfulness 3/10 Language css

Source: www.jqueryscript.net

Tags: animated css progress-bar

Link to this answer
Share Copy Link

Contributed on Jan 23 2022

MD RAZZAK

0 Answers Avg Quality 2/10

Closely Related Answers

css animated progress bar

Comment

.container__progressbars {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap
    min-width: 270px;
    width: 100%;
    min-height: 100%;
  }
.progressbar {
    position: relative;
    width: 170px;
    height: 170px;
    transform: rotate(-90deg);
}
.progressbar__svg {
    position: relative;
    width: 100%;
    height: 100%;
}
.progressbar__svg-circle {
    width: 100%;
    height: 100%;
    fill: none;
    stroke-width: 10;
    stroke-dasharray: 440;
    stroke-dashoffset: 440;
    stroke: white;
    stroke-linecap: round;
    transform: translate(5px, 5px);
}
.circle-html {
    stroke: #007bff;
    /*Set this for the duration of the animation*/
    animation: anim_circle-html 2s ease-in-out forwards; 
}
.progressbar__text {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0.25em 0.5em;
    color: #000; /*Change this to change progressbar text*/
    font-weight: bold;
    border-radius: 0.25em;
    transform: translate(-50%, -50%) rotate(90deg);
}
@keyframes anim_circle-html {
    to {stroke-dashoffset: 0;}
}

Popularity 10/10 Helpfulness 4/10 Language css

Source: eolnuha.com

Tags: animated animate

Link to this answer
Share Copy Link

Contributed on Apr 22 2022

Eol Nuha

0 Answers Avg Quality 2/10

css animated progress bar

Comment

<div class="container__progressbars">
    <div class="progressbar">
        <svg class="progressbar__svg">
            <circle cx="80" cy="80" r="70" class="progressbar__svg-circle circle-html"></circle>
        </svg> 
        <span class="progressbar__text">HTML</span>
    </div>
    <!--You can add other progress bars here-->
</div>

Popularity 10/10 Helpfulness 4/10 Language html

Source: eolnuha.com

Tags: animated animate

Link to this answer
Share Copy Link

Contributed on Apr 22 2022

Eol Nuha

0 Answers Avg Quality 2/10

html progress bars animated

Comment

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
 
        /* Styling the body of the page */
        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #010101;
        }
 
        /* Stylingthe last h2 tag by giving margin bottom */
        .progress-bar-container:not(:last-child) {
            margin-bottom: 50px;
        }
 
        /* Styling the h2 tag by giving color, 
        letter spacing, font-size etc.*/
        .progress-bar-container h2 {
            font-family: Arial, Helvetica, sans-serif;
            color: #eee;
            letter-spacing: 1px;
            font-size: 20px;
        }
 
        /* Styling the border and box
        effect of the progress bar*/
        .progress-bar {
            width: 800px;
            height: 5px;
            margin-top: 10px;
            border: 1px solid #565656;
            border-radius: 5px;
            box-shadow: 0 0 10px rgb(245, 159, 0);
        }
 
        /* Stylingthe background color of each 
        animation and border radius */
        .percentage {
            display: block;
            height: 100%;
            background-color: orange;
            border-radius: 5px;
            animation: progress 1500ms ease-in 1;
        }
 
        /* Assigning width of each languages*/
        .c {
            width: 85%;
        }
 
        .java {
            width: 70%;
        }
 
        .python {
            width: 55%;
        }
 
        .html {
            width: 75%;
        }
 
        .css {
            width: 65%;
        }
 
        .javascript {
            width: 55%;
        }
 
        /* Animating the progress bar by 
        initially starting from 0*/
        @keyframes progress {
            from {
                width: 0;
            }
        }
    </style>
</head>
 
<body>
    <div class="skills">
        <div class="progress-bar-container">
            <h2>C/C++</h2>
            <div class="progress-bar">
                <span class="percentage c"></span>
            </div>
        </div>
 
        <div class="progress-bar-container">
            <h2>Java</h2>
            <div class="progress-bar">
                <span class="percentage java"></span>
            </div>
        </div>
 
        <div class="progress-bar-container">
            <h2>Python</h2>
            <div class="progress-bar">
                <span class="percentage python"></span>
            </div>
        </div>
 
        <div class="progress-bar-container">
            <h2>HTML</h2>
            <div class="progress-bar">
                <span class="percentage html"></span>
            </div>
        </div>
 
        <div class="progress-bar-container">
            <h2>CSS</h2>
            <div class="progress-bar">
                <span class="percentage css"></span>
            </div>
        </div>
 
        <div class="progress-bar-container">
            <h2>JavaScript</h2>
            <div class="progress-bar">
                <span class="percentage javascript"></span>
            </div>
        </div>
    </div>
</body>
</html>

Popularity 1/10 Helpfulness 1/10 Language html

Source: www.geeksforgeeks.org

Tags: animated html

Link to this answer
Share Copy Link

Contributed on Apr 12 2024

László Kovács

0 Answers Avg Quality 2/10

animated progress bar css

Contents

More Related Answers

animated progress bar css

Closely Related Answers

css animated progress bar

css animated progress bar

html progress bars animated

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.