Circular Progress Bar using HTML and CSS

0





























Hello Developers, We provide you with a dynamic and eye-catching Circular Progress Bar that shows you how to create Circular Progress Bar in HTML CSS that displays your information in an easy to understand way. Circular progress bar card is a beautiful and interactive HTML & CSS component that brings a beautiful touch to your web applications. It can be used to track different tasks with its beautiful circular design. It has a smooth animation and an intuitive design that makes it easy for the user to track progress. The customizable and responsive map integrates seamlessly with your website and improves both functionality & aesthetics. Improve the user experience with this modern circular progress bar indicator. This Snippet is completely responsive and can be displayed on any device such as desktop, laptop, tablet, or smartphone. Your circular progress bar will always be displayed in an organized manner. This Circular Progress Bar has been carefully crafted using HTML and CSS so that you not only share information, but also demonstrate your commitment to professionalism and modern web design. Use this innovative and creative Circular Progress Bar to impress and engage with the world.

How to make Circular Progress Bar using HTML and CSS .[Source Code]

To make this website, you would like to make two files: an HTML file, a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html> <head> <title>Circular Progress Bar Card UI design - learningrobo</title> <meta name="description" content="Circular Progress Bar Card UI design - learningrobo"> <meta name="author" content="learningrobo.com"> <meta name="keywords" content="Circular Progress Bar Card,responsive,learningrobo.com,html & css projects"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" type=image/x-icon href="#"> <link rel="stylesheet" href="style.css"> <meta charset="UTF-8"> <script src="https://kit.fontawesome.com/5d72166fb5.js" crossorigin="anonymous"></script> </head> <body> <!--Hello Future Developer Thanks for Using learningrobo.com, Share & Support us--> <div class="container"> <div class="inner1"> <h4>Skills</h4> </div> <div class="inner2"> <div class="card"> <div class="percent"> <svg> <defs> <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:#fa709a" /> <stop offset="100%" style="stop-color:#fee140" /> </linearGradient> </defs> <circle cx="105" cy="105" r="100"></circle> <circle cx="105" cy="105" r="100" style="--percent: 90; stroke: url(#gradient);"></circle> </svg> <div class="number"> <h3>90<span>%</span></h3> </div> </div> <div class="title"> <h2>Development</h2> </div> </div> <div class="card"> <div class="percent"> <svg> <defs> <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:#fa709a" /> <stop offset="100%" style="stop-color:#fee140" /> </linearGradient> </defs> <circle cx="105" cy="105" r="100"></circle> <circle cx="105" cy="105" r="100" style="--percent: 65; stroke: url(#gradient);"></circle> </svg> <div class="number"> <h3>65<span>%</span></h3> </div> </div> <div class="title"> <h2>Designing</h2> </div> </div> <div class="card"> <div class="percent"> <svg> <defs> <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:#fa709a" /> <stop offset="100%" style="stop-color:#fee140" /> </linearGradient> </defs> <circle cx="105" cy="105" r="100"></circle> <circle cx="105" cy="105" r="100" style="--percent: 80; stroke: url(#gradient);"></circle> </svg> <div class="number"> <h3>80<span>%</span></h3> </div> </div> <div class="title"> <h2>Content Writing</h2> </div> </div> </div> <div class="credit">Made with <span>❤ </span>by <a href="https://www.learningrobo.com/">learningrobo</a></div> </div> <!--Check our website Regularly For New Snippets Post--> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension. 


/** 
Hello Future Developer Thanks for Using learningrobo.com, 
Check our website Regularly For New Snippets Post.

Share & Support us
**/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Montserrat', sans-sherif;
    background-color:#212121;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100vh;
    color: #555555;
    overflow: hidden;
    width:100%;
}
.inner1{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 40vh;
    overflow: hidden;
    width:100%;
}
.inner1 h4{
    font-size:150px;
    font-family:sans-serif;
    background: -webkit-linear-gradient(90deg, #212121, #555555a2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.inner2{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction:row;
    height: 60vh;
    color: #555555;
    overflow: hidden;
    width:100%;
}
.card{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color:#121212;
    margin: 0 10px;
    width: 390px;
    height: 390px;
    border-radius: 5px;
    box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.8);
}
.card .percent{
    position: relative;
}
.card svg{
    position: relative;
    width: 210px;
    height: 210px;
    transform: rotate(-90deg);
}
.card svg circle{
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #212121;
    stroke-width:10;
    stroke-linecap:round;
}
.card svg circle:last-of-type{
    stroke-dasharray: 625px;
    stroke-dashoffset: calc(625px - (625px * var(--percent)) / 100);
    stroke: #f39c12; 
    background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
}
.card .number{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.card .number h3{
    font-weight: 200;
    font-size: 3.5rem;
}
.card .number h3 span{
    font-size: 2rem;
}
.card .title h2{
    margin: 25px 0 0;
    color:#555555;
}
@media screen and (max-width:630px){
    .container{
        height:fit-content;
    }
    .card{
        width:90%;
        margin:10px 0px;
    }
    .inner2{
        flex-direction: column;
        height: fit-content;
    }
    .inner1 h4{
        font-size:100px;
    }
}
.credit a{
    text-decoration: none;
    color: #ddd;
    font-weight: 800;
}
.credit{
    color: #ddd;
    text-align: center;
    margin-top: 10px;
    font-family: Verdana,Geneva,Tahoma,sans-serif;
}
.credit span{
    color:tomato;
    font-size:20px;
}
We hope you would like this Circular Progress Bar using HTML and CSS .

Thank you for reading our blog. If you face any problem in Creating a Circular Progress Bar using HTML and CSS ., then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.

Explore

Color picker Word counter Box shadow generator HTML encoder & Decoder online live editor More..
Press The Key ' p ' and say ' read article ' our voice assistant read our article.
In Our older post it doesnot work we working on that.
Tags:

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome