animated percent div circle without javascript

Share your HTML & CSS experiences and Source Code. Help other Members.
Forum rules
If you share codes or scripts, that you havent developed by yourself.
Then you have to mention and give some credits in your post, to the original authors of the code/script.
inc
Site Admin
Posts: 91
Joined: 18 Apr 2016 19:38
Logged in via: Android
Has thanked: 44 times
Been thanked: 51 times
Status: Online

animated percent div circle without javascript

Postby inc » 18 Jan 2017 01:10

hi
i just finshed a nice and smoove css code. A animated percent div circle without javascript. feel free to use or modify.


see example on jsfiddle.net (click on the picture)

Image



plain code:

Code: Select all

<!doctype html>
<html>
<head>
<meta charset="utf-8">

</head>
<style type="text/css">
*, html
   {
   margin: 0;
   padding: 0;
   }

body
   {
   background-color:rgba(66,66,66,1.00);
   }

/* ==================================================== */
/*  This Container hold our Childs the Percent Circles  */
/* ==================================================== */
#CircleContainer
   {
   margin: 50px auto;
   position: relative;
   width: 150px;
   height: 150px;
   }
/* ===================================================== */
/* White overlay circle that rotates on the blue Circle  */
/* ===================================================== */
#StatusOverlay
   {
   width: 25px;
   height: 25px;
   border-width: 18px;
/* Line Color   */  /* TRANSPARENT LINE *//*       WHITE      */ /*      WHITE        */
   border-color: transparent transparent rgba(255,255,255,1.00) rgba(255,255,255,1.00);
   border-style: solid;
   border-radius: 100px;
   padding: 50px;
   color: rgba(2,152,186,0.00)!important;
   font-weight: bold !important;
   font-size: 20px !important;
   -ms-transform: rotate(-10deg);
   -webkit-transform: rotate(-134deg);
   transform: rotate(-10deg);
   z-index: 10;
   display: inline-block;
   position: absolute;
   }
@-webkit-keyframes rotating {
    from{
        -webkit-transform: rotate(-134deg);
    }
    to{
/*=================================================================*/
/* Set the desired rotating width here                             */
/*=================================================================*/      
        -webkit-transform: rotate(-10deg); /* -10deg = 40%         */
/*=================================================================*/
    }
}
/* Rotating Speed */
#StatusOverlay {
    -webkit-animation: rotating 2s linear ;
}

/* ===================================================== */
/* Blue Status Circle                                    */
/* ===================================================== */   
#PercentCircle
   {
   display: inline-block;
   width: 25px;
   height: 25px;
   border-width: 18px;
/* Line Color   *//*   BrightBlue   */ /*   BrightBlue   */ /*       WHITE      */ /*      WHITE        */
   border-color: rgba(2, 152, 186, 1) rgba(2,152,186,1.00) rgba(255,255,255,1.00) rgba(255,255,255,1.00);
   border-style: solid;
   border-radius: 100px;
   padding: 50px;
   color: rgba(2,152,186,1.00) !important;
   font-weight: bold !important;
   font-size: 20px !important;
   -ms-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
   z-index: 1;
   -webkit-box-shadow: inset 3px 0px 41px 1px rgba(0,0,0,1.00);
   box-shadow: inset 3px 0px 41px 1px rgba(0,0,0,1.00);
   }

/* ======================================================== */
/* FONT STYLE PERCENT TEXT, turn back because it is a child */
/* ======================================================== */
#PercentValue
   {
   -ms-transform: rotate(-45deg) !important;
    -webkit-transform: rotate(-45deg) !important;
    transform: rotate(-45deg) !important;   
   }      
</style>
<body>
   <div id="CircleContainer">
      <!-- ADD YOUR DESIRED PERCENT HERE ( IT IS SET HIDDEN )-->
        <div id="StatusOverlay">40%</div>
           <div id="PercentCircle">
             <!-- ADD YOUR DESIRED PERCENT HERE -->
                <div id="PercentValue">40%</div>
         </div>
   </div>
</body>
</html>


have fun

alveo

Return to “HTML & CSS”

Who is online

Users browsing this forum: No registered users and 1 guest

Created by Matti from StylesFactory.pl and Warlords of Draenor


315,510 Page visits

Powered by phpBB® Forum Software © phpBB Limited