Search code examples
javascripthtmlcsschartsdonut-chart

How to Make A Donut Chart With Text Inside Including the Animation

I have a project to submit and I was stuck in creating a donut chart that contains animation on CSS and text inside its slices.

I want a similar chart same as the one that is specified below, you can see the animation of the chart just enter to www.al-ashram.com . I came across a lot of js libraries but all where a bit different than this one as i think its an easy chart that is only done via CSS and html.

would appreciate you to help me get the exact same structure so I can add it in my project for submission

this is the chart i want

Solution

  • maybe this can help

        $(document).ready(function () {
        $('div#cn-wrapper ').addClass('opened-nav')
    });
             .parallax-container {
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 80px 40px;
}
.parallax-container .parallax {
    background-color: #66a8d8;
}



.parallax-container {
    min-height: 300px;
    height: auto;
}
.parallax-container {
    position: relative;
    overflow: hidden;
    height: 600px;
}

.parallax, .parallax img {
    position: absolute;
    bottom: 0;
}
.component {
    position: relative;
    margin: 1rem 0;
    height: auto;
    background: none;
}

.csstransforms .cn-wrapper.opened-nav {
    opacity: 1;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    pointer-events: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.csstransforms .cn-wrapper {
    position: relative;
    z-index: 10;
    width: 40em;
    height: 40em;
    border-radius: 50%;
    background: transparent;
    opacity: 0;
    -webkit-transition: all .3s ease .3s;
    transition: all .3s ease .3s;
    -webkit-transform: scale(.1);
    -ms-transform: scale(.1);
    transform: scale(.1);
    pointer-events: none;
    overflow: hidden;
    margin: 0 auto;
}

.csstransforms .corp-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.csstransforms .cn-wrapper ul {
    position: relative;
    margin: 0;
    margin-left: -10px;
}

ul:not(.browser-default) {
    padding-left: 0;
    list-style-type: none;
}

.csstransforms .cn-wrapper.opened-nav li:first-child {
    -webkit-transform: rotate(
-90deg) skew(
45deg);
    -ms-transform: rotate(-90deg) skew(45deg);
    transform: rotate(
-90deg) skew(
45deg);
}

.csstransforms .cn-wrapper.opened-nav li {
    -webkit-transition: all .7s ease .4s;
    transition: all .7s ease .4s;
}
.csstransforms .cn-wrapper li {
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    margin-top: -1.2em;
    margin-left: -10em;
    width: 10em;
    height: 10em;
    font-size: 2.2em;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-transform: rotate(
76deg) skew(
60deg);
    -ms-transform: rotate(76deg) skew(60deg);
    transform: rotate(
76deg) skew(
60deg);
    -webkit-transform-origin: 102% 102%;
    -ms-transform-origin: 102% 102%;
    transform-origin: 102% 102%;
    pointer-events: auto;
}
ul:not(.browser-default) li {
    list-style-type: none;
}


.csstransforms .cn-wrapper li .slice {
    position: fixed;
    position: absolute;
    right: -7.25em;
    bottom: -7.25em;
    display: block;
    width: 14.5em;
    height: 14.5em;
    border-radius: 50%;
    background: #66a8d8;
    background: -webkit-radial-gradient(transparent 30%,rgba(195,223,244,.5) 0);
    background: radial-gradient(transparent 30%,rgba(195,223,244,.5) 0);
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-size: 1.2em;
    line-height: 2;
    -webkit-transform: skew(
-45deg) rotate(
-60deg) scale(1);
    -ms-transform: skew(-45deg) rotate(-60deg) scale(1);
    transform: skew(
-45deg) rotate(
-60deg) scale(1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    pointer-events: none;
}

.csstransforms .cn-wrapper.opened-nav li:first-child .slice>span {
    -webkit-transform: rotate(
150deg);
    -ms-transform: rotate(150deg);
    transform: rotate(
150deg);
}

.csstransforms .cn-wrapper li .slice>span {
    position: relative;
    top: 1.8em;
    left: -2em;
    max-width: 8rem;
    min-height: 8rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-top: 5px;
    font-size: .35em;
    line-height: 1.5em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    margin: 0 auto;
}

.csstransforms .cn-wrapper li .slice>span h6, .csstransforms .cn-wrapper li .slice>span p {
    margin-top: 0;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

p:last-child {
    margin-bottom: 0;
}

.csstransforms .cn-wrapper.opened-nav li:nth-child(2) {
    -webkit-transform: rotate(
-45deg) skew(
45deg);
    -ms-transform: rotate(-45deg) skew(45deg);
    transform: rotate(
-45deg) skew(
45deg);
}

.csstransforms .cn-wrapper.opened-nav li:nth-child(3) {
    -webkit-transform: rotate(
0deg) skew(
45deg);
    -ms-transform: rotate(0deg) skew(45deg);
    transform: rotate(
0deg) skew(
45deg);
}


.csstransforms .cn-wrapper.opened-nav li:nth-child(4) {
    -webkit-transform: rotate(
45deg) skew(
45deg);
    -ms-transform: rotate(45deg) skew(45deg);
    transform: rotate(
45deg) skew(
45deg);
}

.csstransforms .cn-wrapper.opened-nav li:nth-child(5) {
    -webkit-transform: rotate(
90deg) skew(
45deg);
    -ms-transform: rotate(90deg) skew(45deg);
    transform: rotate(
90deg) skew(
45deg);
}

.csstransforms .cn-wrapper.opened-nav li:nth-child(6) {
    -webkit-transform: rotate(
135deg) skew(
45deg);
    -ms-transform: rotate(135deg) skew(45deg);
    transform: rotate(
135deg) skew(
45deg);
}

.csstransforms .cn-wrapper.opened-nav li:nth-child(7) {
    -webkit-transform: rotate(
180deg) skew(
45deg);
    -ms-transform: rotate(180deg) skew(45deg);
    transform: rotate(
180deg) skew(
45deg);
}

.csstransforms .cn-wrapper.opened-nav li:nth-child(8) {
    -webkit-transform: rotate(
225deg) skew(
45deg);
    -ms-transform: rotate(225deg) skew(45deg);
    transform: rotate(
225deg) skew(
45deg);
}

.csstransforms .cn-wrapper:after {
    content: ".";
    display: block;
    font-size: 2em;
    width: 6.2em;
    height: 6.2em;
    position: absolute;
    left: 50%;
    margin-left: -3.1em;
    top: 50%;
    margin-top: -3.1em;
    border-radius: 50%;
    z-index: 10;
    color: transparent;
}

.csstransforms .cn-wrapper.opened-nav {
    opacity: 1;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    pointer-events: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.csstransforms .cn-wrapper {
    position: relative;
    z-index: 10;
    width: 40em;
    height: 40em;
    border-radius: 50%;
    background: transparent;
    opacity: 0;
    -webkit-transition: all .3s ease .3s;
    transition: all .3s ease .3s;
    -webkit-transform: scale(.1);
    -ms-transform: scale(.1);
    transform: scale(.1);
    pointer-events: none;
    overflow: hidden;
    margin: 0 auto;
}

body.csstransforms {
    margin: 0;
    background-color: lightblue;
}
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


</head>
<body class="csstransforms">

    <div class="col s12 l7 aboutbg_div">
        <div class="parallax-container">

    
<div class="component">
        <div class="cn-wrapper" id="cn-wrapper">
            <div class="corp-logo">
                <img src="https://al-ashram.com/wp-content/themes/alashram/framework/dist/img/logo-min-white-200.png" width="200" height="200" class="responsive-img" alt="logo">
            </div>
            <ul>

                <li id="slice-1">
                    <div class="slice">
                        <span>
                            <p>ISO 14001 &amp; 9001<br> OHSAS 18001<br> certified</p> 
                        </span>
                    </div>
                </li>

                <li id="slice-2">
                    <div class="slice">
                        <span>
                            <p>Executed single<br> project worth<br> AED</p>
                            <h4>350mn</h4> 
                        </span>
                    </div>
                </li>

                <li id="slice-3">
                    <div class="slice">
                        <span>
                            <p>A workforce of</p><h4>1,500</h4> 
                        </span>
                    </div>
                </li>

                <li id="slice-4">
                    <div class="slice">
                        <span>
                            <p>A capitalized<br> company of<br> AED</p>
                            <h4>100mn</h4> 
                        </span>
                    </div>
                </li>

                <li id="slice-5">
                    <div class="slice">
                        <span>
                            <h6>Over</h6><h4>45</h4>
                            <h6>years of experience</h6> 
                        </span>
                    </div>
                </li>

                <li id="slice-6">
                    <div class="slice">
                        <span>
                            <p>Gross executed<br> projects worth<br> AED</p>
                            <h4>3.1bn</h4>
                        </span>
                    </div>
                </li>

                <li id="slice-7">
                    <div class="slice">
                        <span>
                            <p>Vertical construction<br> up to</p>
                            <h4>250m</h4> 
                        </span>
                    </div>
                </li>

                <li id="slice-8">
                    <div class="slice">
                        <span>
                            <p>Over</p>
                            <h4>67</h4>
                            <p>projects executed</p> 
                        </span>
                    </div>
                </li>
            </ul>
        </div>
        </div>
    </div>
    </div>

</body>


</html>