-1

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

hussain ismail
  • 3
  • 1
  • Please show us the code that you have so far so that we can help - SO isn't an ab initio coding service but we'll do our best when you've tried something and show us where it is that you have got stuck. You could for example use your browser dev tools to see how that site does it as a starter. Please read: https://stackoverflow.com/help/minimal-reproducible-example to see how to put code into your question, thanks. – A Haworth Sep 30 '21 at 08:51

1 Answers1

0

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>
Satish Modha
  • 759
  • 1
  • 4
  • 8