Create an Account

It's free and you have access to premium codes!

Password must be a minimum length of 8, with at least one uppercase, one lowercase, one number, and one special character.

Login

Welcome back! Please login to your account.

Recover Account

Don't worry, we'll send you a message to help you to recover your acount.

Message Received!

We will get back to you as soon as possible.

All
Hello
Popular Sites
JavaScript Best Codes
Html Free Codes
Html5 Free Codes
Php Best Codes
Developer Codes
Free Frontend
Social Media
Twitter Page
Youtube Channel
Instagram Channel
Support
Contact Us
About Html Best Codes
Not a member? Sign Up

Circular Progress Bar

Written by @kerixa 30 March 2021

A progress bar can be a great option to show the progress or performance of any part of your website. They are even used to express the statistics of a poll. In the following code, there are 4 circular progress bars, each of which has a specific color, and there is an icon in the middle of the circle that you can change it based on your desire. In addition, the progress bar is loaded with an animation when the page is loaded to a selected degree, which increases the beauty of this progress bar.

Code Snippet:

                                                
                                                <!-- this script is provided by http://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<style>
body {
    background-color: #CCC;
    text-align: center;
}

.wrapper {
    margin-left: 15%;
    margin-right: 15%;
    margin-bottom: 50px;
    top: 50px;
    position: relative;
    background-color: white;
    border-radius: 250px;
    -webkit-backface-visibility: hidden;
    display: inline-block;
}

.wrapper--high, .wrapper--high * {
    box-sizing: border-box;
}

.wrapper--high {
    width: 150px;
    height: 150px;
}

.wrapper--high .pie {
    width: 50%;
    height: 100%;
    transform-origin: 100% 50%;
    position: absolute;
    background: transparent;
    border: 18px solid #2FC37A;
    border-radius: 150px;
}

.wrapper--high .spinner {
    border-radius: 100% 0 0 100%/50% 0 0 50%;
    z-index: 200;
    border-right: none;
    -webkit-animation: uzlxqvy--rota 1.3s ease-in 1;
    animation: uzlxqvy--rota 1.3s ease-in 1;
    transform: rotate(180deg);
}

.wrapper--high .spinner-left {
    border-radius: 100% 0 0 100%/50% 0 0 50%;
    z-index: 190;
    border-right: none;
    -webkit-animation: uzlxqvy--rota-left 1.3s ease-out 1;
    animation: uzlxqvy--rota-left 1.3s ease-out 1;
    transform: rotate(360deg);
}

.wrapper--high .mask {
    width: 50%;
    height: 100%;
    position: absolute;
    background: inherit;
    z-index: 300;
    border-top-left-radius: 150px;
    border-bottom-left-radius: 150px;
    opacity: 0;
    -webkit-animation: uzlxqvy--opa 1.3s steps(1, end) 1;
    animation: uzlxqvy--opa 1.3s steps(1, end) 1;
}

.wrapper--high .mask-right {
    width: 50%;
    height: 100%;
    position: absolute;
    background: inherit;
    opacity: 1;
    z-index: 195;
    right: 0;
    border-top-right-radius: 150px;
    border-bottom-right-radius: 150px;
}

@-webkit-keyframes uzlxqvy--rota {
0% {
    transform: rotate(0deg);
}

50% {
    transform: rotate(180deg);
}
}

@keyframes uzlxqvy--rota {
0% {
    transform: rotate(0deg);
}

50% {
    transform: rotate(180deg);
}
}

@-webkit-keyframes uzlxqvy--rota-left {
0% {
    transform: rotate(180deg);
}

50% {
    transform: rotate(180deg);
}

100% {
    transform: rotate(360deg);
}
}

@keyframes uzlxqvy--rota-left {
0% {
    transform: rotate(180deg);
}

50% {
    transform: rotate(180deg);
}

100% {
    transform: rotate(360deg);
}
}

@-webkit-keyframes uzlxqvy--opa {
0% {
    opacity: 1;
}

50%, 99% {
    opacity: 0;
}
}

@keyframes uzlxqvy--opa {
0% {
    opacity: 1;
}

50%, 99% {
    opacity: 0;
}
}

@-webkit-keyframes uzlxqvy--fill-opa {
0% {
    opacity: 1;
}

50% {
    opacity: 0;
}
}

@keyframes uzlxqvy--fill-opa {
0% {
    opacity: 1;
}

50% {
    opacity: 0;
}
}
/* MIDDLE CONTENT */
@-webkit-keyframes uzlxqvy--pop {
0% {
    opacity: 0;
    transform: scale3d(0, 0, 0);
}

70% {
    transform: scale3d(1.4, 1.4, 1.4);
}

100% {
    transform: scale3d(1, 1, 1);
}
}

@keyframes uzlxqvy--pop {
0% {
    opacity: 0;
    transform: scale3d(0, 0, 0);
}

70% {
    transform: scale3d(1.4, 1.4, 1.4);
}

100% {
    transform: scale3d(1, 1, 1);
}
}

.wrapper--high .content {
    background-color: #259a60;
    width: 116px;
    height: 116px;
    z-index: 1001;
    position: absolute;
    border-radius: 150px;
    font-size: 114px;
    text-align: center;
    line-height: 114px;
    color: #11482d;
    margin: 17px;
    -webkit-animation: uzlxqvy--pop 1.3s ease-in-out 1;
    animation: uzlxqvy--pop 1.3s ease-in-out 1;
}

/* ARROW */
.wrapper--high .spinner::after,
.wrapper--high .spinner-left::after {
    content: "";
    display: block;
    position: absolute;
    top: -18px;
    right: -8px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 0 9px 9px;
    border-color: transparent transparent transparent #2FC37A;
    margin-left: 9px;
    transform: scale(0.9999);
    z-index: 500;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
}

.wrapper--good, .wrapper--good * {
    box-sizing: border-box;
}

.wrapper--good {
    width: 150px;
    height: 150px;
}

.wrapper--good .pie {
    width: 50%;
    height: 100%;
    transform-origin: 100% 50%;
    position: absolute;
    background: transparent;
    border: 18px solid #37C6E1;
    border-radius: 150px;
}

.wrapper--good .spinner {
    border-radius: 100% 0 0 100%/50% 0 0 50%;
    z-index: 200;
    border-right: none;
    -webkit-animation: uzlxqwm--rota 1.3s ease-in 1;
    animation: uzlxqwm--rota 1.3s ease-in 1;
    transform: rotate(180deg);
}

.wrapper--good .spinner-left {
    border-radius: 100% 0 0 100%/50% 0 0 50%;
    z-index: 190;
    border-right: none;
    -webkit-animation: uzlxqwm--rota-left 1.3s ease-out 1;
    animation: uzlxqwm--rota-left 1.3s ease-out 1;
    transform: rotate(270deg);
}

.wrapper--good .mask {
    width: 50%;
    height: 100%;
    position: absolute;
    background: inherit;
    z-index: 300;
    border-top-left-radius: 150px;
    border-bottom-left-radius: 150px;
    opacity: 0;
    -webkit-animation: uzlxqwm--opa 1.3s steps(1, end) 1;
    animation: uzlxqwm--opa 1.3s steps(1, end) 1;
}

.wrapper--good .mask-right {
    width: 50%;
    height: 100%;
    position: absolute;
    background: inherit;
    opacity: 1;
    z-index: 195;
    right: 0;
    border-top-right-radius: 150px;
    border-bottom-right-radius: 150px;
}

@-webkit-keyframes uzlxqwm--rota {
0% {
    transform: rotate(0deg);
}

66.6666666667% {
    transform: rotate(180deg);
}
}

@keyframes uzlxqwm--rota {
0% {
    transform: rotate(0deg);
}

66.6666666667% {
    transform: rotate(180deg);
}
}

@-webkit-keyframes uzlxqwm--rota-left {
0% {
    transform: rotate(180deg);
}

66.6666666667% {
    transform: rotate(180deg);
}

100% {
    transform: rotate(270deg);
}
}

@keyframes uzlxqwm--rota-left {
0% {
    transform: rotate(180deg);
}

66.6666666667% {
    transform: rotate(180deg);
}

100% {
    transform: rotate(270deg);
}
}

@-webkit-keyframes uzlxqwm--opa {
0% {
    opacity: 1;
}

66.6666666667%, 99% {
    opacity: 0;
}
}

@keyframes uzlxqwm--opa {
0% {
    opacity: 1;
}

66.6666666667%, 99% {
    opacity: 0;
}
}

@-webkit-keyframes uzlxqwm--fill-opa {
0% {
    opacity: 1;
}

50% {
    opacity: 0;
}
}

@keyframes uzlxqwm--fill-opa {
0% {
    opacity: 1;
}

50% {
    opacity: 0;
}
}
/* MIDDLE CONTENT */
@-webkit-keyframes uzlxqwm--pop {
0% {
    opacity: 0;
    transform: scale3d(0, 0, 0);
}

70% {
    transform: scale3d(1.4, 1.4, 1.4);
}

100% {
    transform: scale3d(1, 1, 1);
}
}

@keyframes uzlxqwm--pop {
0% {
    opacity: 0;
    transform: scale3d(0, 0, 0);
}

70% {
    transform: scale3d(1.4, 1.4, 1.4);
}

100% {
    transform: scale3d(1, 1, 1);
}
}

.wrapper--good .content {
    background-color: #1eacc7;
    width: 116px;
    height: 116px;
    z-index: 1001;
    position: absolute;
    border-radius: 150px;
    font-size: 114px;
    text-align: center;
    line-height: 114px;
    color: #11606e;
    margin: 17px;
    -webkit-animation: uzlxqwm--pop 1.3s ease-in-out 1;
    animation: uzlxqwm--pop 1.3s ease-in-out 1;
}

/* ARROW */
.wrapper--good .spinner::after,
.wrapper--good .spinner-left::after {
    content: "";
    display: block;
    position: absolute;
    top: -18px;
    right: -8px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 0 9px 9px;
    border-color: transparent transparent transparent #37C6E1;
    margin-left: 9px;
    transform: scale(0.9999);
    z-index: 500;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
}

.wrapper--sat, .wrapper--sat * {
    box-sizing: border-box;
}

.wrapper--sat {
    width: 150px;
    height: 150px;
}

.wrapper--sat .pie {
    width: 50%;
    height: 100%;
    transform-origin: 100% 50%;
    position: absolute;
    background: transparent;
    border: 18px solid #BA79DA;
    border-radius: 150px;
}

.wrapper--sat .spinner {
    border-radius: 100% 0 0 100%/50% 0 0 50%;
    z-index: 200;
    border-right: none;
    -webkit-animation: uzlxqwq--rota 1.3s ease-in 1;
    animation: uzlxqwq--rota 1.3s ease-in 1;
    transform: rotate(180deg);
}

.wrapper--sat .spinner-left {
    border-radius: 100% 0 0 100%/50% 0 0 50%;
    z-index: 190;
    border-right: none;
    -webkit-animation: uzlxqwq--rota-left 1.3s ease-out 1;
    animation: uzlxqwq--rota-left 1.3s ease-out 1;
    transform: rotate(181deg);
}

.wrapper--sat .mask {
    width: 50%;
    height: 100%;
    position: absolute;
    background: inherit;
    z-index: 300;
    border-top-left-radius: 150px;
    border-bottom-left-radius: 150px;
    opacity: 0;
    -webkit-animation: uzlxqwq--opa 1.3s steps(1, end) 1;
    animation: uzlxqwq--opa 1.3s steps(1, end) 1;
}

.wrapper--sat .mask-right {
    width: 50%;
    height: 100%;
    position: absolute;
    background: inherit;
    opacity: 1;
    z-index: 195;
    right: 0;
    border-top-right-radius: 150px;
    border-bottom-right-radius: 150px;
}

@-webkit-keyframes uzlxqwq--rota {
0% {
    transform: rotate(0deg);
}

99.4475138122% {
    transform: rotate(180deg);
}
}

@keyframes uzlxqwq--rota {
0% {
    transform: rotate(0deg);
}

99.4475138122% {
    transform: rotate(180deg);
}
}

@-webkit-keyframes uzlxqwq--rota-left {
0% {
    transform: rotate(180deg);
}

99.4475138122% {
    transform: rotate(180deg);
}

100% {
    transform: rotate(181deg);
}
}

@keyframes uzlxqwq--rota-left {
0% {
    transform: rotate(180deg);
}

99.4475138122% {
    transform: rotate(180deg);
}

100% {
    transform: rotate(181deg);
}
}

@-webkit-keyframes uzlxqwq--opa {
0% {
    opacity: 1;
}

99.4475138122%, 99% {
    opacity: 0;
}
}

@keyframes uzlxqwq--opa {
0% {
    opacity: 1;
}

99.4475138122%, 99% {
    opacity: 0;
}
}

@-webkit-keyframes uzlxqwq--fill-opa {
0% {
    opacity: 1;
}

50% {
    opacity: 0;
}
}

@keyframes uzlxqwq--fill-opa {
0% {
    opacity: 1;
}

50% {
    opacity: 0;
}
}
/* MIDDLE CONTENT */
@-webkit-keyframes uzlxqwq--pop {
0% {
    opacity: 0;
    transform: scale3d(0, 0, 0);
}

70% {
    transform: scale3d(1.4, 1.4, 1.4);
}

100% {
    transform: scale3d(1, 1, 1);
}
}

@keyframes uzlxqwq--pop {
0% {
    opacity: 0;
    transform: scale3d(0, 0, 0);
}

70% {
    transform: scale3d(1.4, 1.4, 1.4);
}

100% {
    transform: scale3d(1, 1, 1);
}
}

.wrapper--sat .content {
    background-color: #a551cf;
    width: 116px;
    height: 116px;
    z-index: 1001;
    position: absolute;
    border-radius: 150px;
    font-size: 114px;
    text-align: center;
    line-height: 114px;
    color: #6f2892;
    margin: 17px;
    -webkit-animation: uzlxqwq--pop 1.3s ease-in-out 1;
    animation: uzlxqwq--pop 1.3s ease-in-out 1;
}

/* ARROW */
.wrapper--sat .spinner::after,
.wrapper--sat .spinner-left::after {
    content: "";
    display: block;
    position: absolute;
    top: -18px;
    right: -8px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 0 9px 9px;
    border-color: transparent transparent transparent #BA79DA;
    margin-left: 9px;
    transform: scale(0.9999);
    z-index: 500;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
}

.wrapper--low, .wrapper--low * {
    box-sizing: border-box;
}

.wrapper--low {
    width: 150px;
    height: 150px;
}

.wrapper--low .pie {
    width: 50%;
    height: 100%;
    transform-origin: 100% 50%;
    position: absolute;
    background: transparent;
    border: 18px solid #C73160;
    border-radius: 150px;
}

.wrapper--low .spinner {
    border-radius: 100% 0 0 100%/50% 0 0 50%;
    z-index: 200;
    border-right: none;
    -webkit-animation: uzlxqxq--rota 1.3s ease-out 1;
    animation: uzlxqxq--rota 1.3s ease-out 1;
    transform: rotate(90deg);
}

.wrapper--low .spinner-left {
    border-radius: 100% 0 0 100%/50% 0 0 50%;
    z-index: 190;
    border-right: none;
    -webkit-animation: uzlxqxq--rota-left 1.3s linear 1;
    animation: uzlxqxq--rota-left 1.3s linear 1;
    transform: rotate(180deg);
}

.wrapper--low .mask {
    width: 50%;
    height: 100%;
    position: absolute;
    background: inherit;
    z-index: 300;
    border-top-left-radius: 150px;
    border-bottom-left-radius: 150px;
    opacity: 1;
}

.wrapper--low .mask-right {
    width: 50%;
    height: 100%;
    position: absolute;
    background: inherit;
    opacity: 1;
    z-index: 195;
    right: 0;
    border-top-right-radius: 150px;
    border-bottom-right-radius: 150px;
}

@-webkit-keyframes uzlxqxq--rota {
0% {
    transform: rotate(0deg);
}

100% {
    transform: rotate(90deg);
}
}

@keyframes uzlxqxq--rota {
0% {
    transform: rotate(0deg);
}

100% {
    transform: rotate(90deg);
}
}

@-webkit-keyframes uzlxqxq--rota-left {
0% {
    transform: rotate(180deg);
}

100% {
    transform: rotate(180deg);
}

100% {
    transform: rotate(180deg);
}
}

@keyframes uzlxqxq--rota-left {
0% {
    transform: rotate(180deg);
}

100% {
    transform: rotate(180deg);
}

100% {
    transform: rotate(180deg);
}
}

@-webkit-keyframes uzlxqxq--opa {
0% {
    opacity: 1;
}

100%, 99% {
    opacity: 0;
}
}

@keyframes uzlxqxq--opa {
0% {
    opacity: 1;
}

100%, 99% {
    opacity: 0;
}
}

@-webkit-keyframes uzlxqxq--fill-opa {
0% {
    opacity: 1;
}

50% {
    opacity: 0;
}
}

@keyframes uzlxqxq--fill-opa {
0% {
    opacity: 1;
}

50% {
    opacity: 0;
}
}
/* MIDDLE CONTENT */
@-webkit-keyframes uzlxqxq--pop {
0% {
    opacity: 0;
    transform: scale3d(0, 0, 0);
}

70% {
    transform: scale3d(1.4, 1.4, 1.4);
}

100% {
    transform: scale3d(1, 1, 1);
}
}

@keyframes uzlxqxq--pop {
0% {
    opacity: 0;
    transform: scale3d(0, 0, 0);
}

70% {
    transform: scale3d(1.4, 1.4, 1.4);
}

100% {
    transform: scale3d(1, 1, 1);
}
}

.wrapper--low .content {
    background-color: #9e274c;
    width: 116px;
    height: 116px;
    z-index: 1001;
    position: absolute;
    border-radius: 150px;
    font-size: 114px;
    text-align: center;
    line-height: 114px;
    color: #4c1325;
    margin: 17px;
    -webkit-animation: uzlxqxq--pop 1.3s ease-in-out 1;
    animation: uzlxqxq--pop 1.3s ease-in-out 1;
}

/* ARROW */
.wrapper--low .spinner::after,
.wrapper--low .spinner-left::after {
    content: "";
    display: block;
    position: absolute;
    top: -18px;
    right: -8px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 0 9px 9px;
    border-color: transparent transparent transparent #C73160;
    margin-left: 9px;
    transform: scale(0.9999);
    z-index: 500;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
}
</style>
<div class="wrapper wrapper--high">
  <!-- Spinning discs -->
  <div class="pie spinner-left"></div>
  <div class="pie spinner"></div>
  
  <!-- Visibility masks -->
  <div class="mask"></div>
  <div class="mask-right"></div>
  
  <!-- The content -->
  <div class="content">!</div>
</div>

<div class="wrapper wrapper--good">
  <!-- Spinning discs -->
  <div class="pie spinner-left"></div>
  <div class="pie spinner"></div>
  
  <!-- Visibility masks -->
  <div class="mask"></div>
  <div class="mask-right"></div>
  
  <!-- The content -->
  <div class="content">!</div>
</div>

<div class="wrapper wrapper--sat">
  <!-- Spinning discs -->
  <div class="pie spinner-left"></div>
  <div class="pie spinner"></div>
  
  <!-- Visibility masks -->
  <div class="mask"></div>
  <div class="mask-right"></div>
  
  <!-- The content -->
  <div class="content">!</div>
</div>

<div class="wrapper wrapper--low">
  <!-- Spinning discs -->
  <div class="pie spinner-left"></div>
  <div class="pie spinner"></div>
  
  <!-- Visibility masks -->
  <div class="mask"></div>
  <div class="mask-right"></div>
  
  <!-- The content -->
  <div class="content">!</div>
</div><a target='_blank' href='http://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300
TRENDING POST
1
Neomorphism Button with Hover Effect
2
Vanishing Spinning Ball Loader
3
Yet Another Circle Spinning Loader
4
Oval Ticker Spinner Loader
5
Eclipse Spinner Loader
VISITORS
Online Users: 12
Recent Members: fk khan, Proper, Jenisha, Mr Joseph Charles, Nikhil 999+
advertisement 2