Animated Infographics with HTML CSS & jQuery

Plugin Preview

Share this:

How to start using jQuery?
More jQuery Top, Best and New Plugins
Top 100 jQuery Plugins

Plugin Overview

Plugin:	circle-slider (Animated Infographics)
Author:	neyron163
Licence:	MIT Licence
Published:	January 17, 2024
Repository:	Fork on GitHub
Dependencies:	jQuery 1.3.1 or Latest version and jQuery Touch Swipe 1.6 or Latest
File Type:	zip archive (HTML, CSS & JavaScript)
Package Size:	2.15 MB

Demo Download

How to Use Animated Infographics :

1. To getting started with Animated Infographics Circle Slider, load the jQuery and Touch Swipe into your HTML page.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

<!-- jQuery Touch Swipe -->
<script src="http://delanosolutions.com/static/js/jquery.touchSwipe.js"></script>

2. Now, load the index‘s CSS and JavaScript file for circular animations and for basic styles.

<!-- Animated Infographics CSS -->
<link rel="stylesheet" href="./index.css">

<!-- Animated Infographics JS -->
<script src="./index.js"></script>

3. Create basic HTML structure like below for your infographic’s contents.

 <div id="businessCycle">
        <div class="grid no-padding">
          <svg viewBox="0 0 1380 60" class="svg-piece">
            <path id="arch" width="1380px" height="60px" fill="#f5f5f5" d="M0,0h1380c0,31.3,0,31.3,0,60C1139,24.1,914.4,0.2,690,0C464.7-0.2,239.5,23.4,0,60
                C0,45.3,0,45.3,0,0z"></path>
          </svg>
          <div class="flex__container">
            <div class="watch__block">
              <h2 class="title_h1" style="max-width: 300px;">Business Life Cycle</h2>
            </div>
            <div class="slider-circle">

                <div class="slide-item">
                  <div class="icon icon-rocket"></div>
                  <h3 class="rest__title_h4">1. Start-up</h3>
                  <p class="description_small">Starting a new business requires extensive planning and preparation. Many
                    new start-ups fail, simply because they don’t have the resources, infrastructure, or expertise to
                    ensure all the pillars to success are upheld.</p><a href="/startup-consulting/" class="link">Learn More</a>
                </div>
    
                <div class="slide-item">
                  <div class="icon icon-schedule"></div>
                  <h3 class="rest__title_h4">2. Growth</h3>
                  <p class="description_small">Growing your business involves managing the complexity of, not only sales
                    but, organizational structure, processes, and resources.</p><a href="/business-growth-strategies/"
                    class="link">Learn More</a>
                </div>
    
                <div class="slide-item">
                  <div class="icon icon-growth"></div>
                  <h3 class="rest__title_h4">3. Expansion</h3>
                  <p class="description_small">Your organization offers a valuable product or service in the marketplace,
                    and you have been able to reach a growth platform.</p><a href="/business-expansion/" class="link">Learn
                    More</a>
                </div>
    
                <div class="slide-item">
                  <div class="icon icon-portfolio"></div>
                  <h3 class="rest__title_h4">4. Maturity</h3>
                  <p class="description_small">Your business has expanded, and you are reaching the height of your success
                    in your market.</p><a href="/business-maturity/" class="link">Learn More</a>
                </div>
                
                <div class="slide-item">
                  <div class="icon icon-idea"></div>
                  <h3 class="rest__title_h4">5. Transition</h3>
                  <p class="description_small">Your business has expanded, and you are reaching the height of your success
                    in your market.</p><a href="/business-transition/" class="link">Learn More</a>
                </div>
                
                <div class="next"></div>

                </div>
              </div>
          </div>
        </div>

4. Finally, initialize the plugin in jQuery document ready function and done.

$(document).ready(function(){

   $('.slider-circle').wet({speed: 500});

});

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.