A Pen by Siful Islam
How do I make an a pen by siful islam?
What is a a pen by siful islam? How do you make a a pen by siful islam? This script and codes were developed by Siful Islam on 30 January 2023, Monday.
A Pen by Siful Islam Previews
A Pen by Siful Islam - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Siful Islam</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://apps.flashedge.net/circular/css/styles.css'>
<link rel='stylesheet prefetch' href='http://apps.flashedge.net/circular/css/cp-styles.css'>
</head>
<body> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Circular HTML5 Preloader - Flexible, Smooth & Lightweight</title> <link rel="icon" type="image/png" href="favicon.png?v=0.1" />
</head>
<body> <!-- Stage Start --> <div class="stage"> <!-- Mobile Navigation Start --> <aside class="offcanvas-menu show-for-small"> <ul> <li> <a href="#about">About</a> </li> <li> <a href="#demos">Demos</a> </li> <li> <a href="#features">Features</a> </li> <li> <a href="http://codecanyon.net/item/circular-html5-preloader/13022474?ref=flashedge" target="_blank" class="button radius">Buy Now</a> </li> </ul> </aside> <!-- Mobile Navigation End --> <!-- Wrap Start --> <div class="wrap"> <header> <!-- Desktop Navigation Start --> <nav class="top-bar row"> <div class="logo"><span class="hide-for-small">Circular HTML5 Preloader</span> <span class="show-for-small">Circular Preloader</span> </div> <section class="right top-bar-section"> <ul class="hide-for-small"> <li> <a href="#about">About</a> </li> <li> <a href="#demos">Demos</a> </li> <li> <a href="#features">Features</a> </li> <li> <a href="http://codecanyon.net/item/circular-html5-preloader/13022474?ref=flashedge" target="_blank" class="button radius">Buy Now</a> </li> </ul> <span class="show-for-small offcanvas-toggle"><i class="fi-list"></i></span> </section> <hr> </nav> <!-- Desktop Navigation End --> </header> <!-- Content Start --> <div class="content"> <div class="wrapper"> <section class="row intro" id="intro"> <div class="large-12 columns"> <h1>Circular Preloader</h1> <h2 class="subheader">Flexible, Smooth & Lightweight</h2> </div> </section> <section id="about"> <div class="row"> <div class="columns"> <h3>About</h3> <hr> </div> </div> <div class="row"> <div class="large-6 medium-6 columns"> <p>Circular HTML5 Preloader is a jQuery Plugin designed for loading images and assets dynamically through javascript. It displays a flexible, animated circular progress bar drawn completely in SVG. This means it will look smooth on any device at any size.</p> <p>Built with the most popular libraries available, it's rendered with <a href="http://snapsvg.io/" target="_blank">Snap.svg</a> animated with <a href="https://greensock.com/" target="_blank">GreenSock</a> and uses <a href="https://www.createjs.com/preloadjs" target="_blank">PreloadJS</a> as its core.</p> </div> <div class="large-6 medium-6 columns"> <p>It adds a minimal load to your pages with a footprint of only 3kbytes!¹ You'll get over 30 options to customize your own Circular Preloader. It has been tested on all major browsers and works neatly also on mobile devices.</p> <ul class="icons"> <li><img src="svg/ie.svg"></li> <li><img src="svg/ff.svg"></li> <li><img src="svg/chrome.svg"></li> <li><img src="svg/safari.svg" class="safari"></li> <li><img src="svg/opera.svg"></li> <li class="divider"></li> <li><img src="svg/html5.svg"> </li> <li class="jquery"><img src="svg/jquery.svg"> </li> </ul> <p><small>¹Size achieved with Gzip compression and excluding dependencies of other libraries.</small></p> </div> </div> </section> <section id="demos"> <div class="row"> <div class="columns"> <h3>Demos</h3> <hr> </div> </div> <div class="row"> <div class="large-6 columns cp"> <div class="circle" data-url="img/01.jpg"></div> <button class="button small expand"> <i class="fi-refresh"></i> Reload Circle w/ Percentage Example</button> </div> <div class="large-6 columns cp"> <div class="pie" data-url="img/02.jpg"></div> <button class="button small expand"> <i class="fi-refresh"></i> Reload Pie Preloader Example</button> </div> </div> <div class="row"> <div class="large-6 columns cp"> <div class="donut" data-url="img/03.jpg"></div> <button class="button small expand"> <i class="fi-refresh"></i> Reload Donut Preloader Example</button> </div> <div class="large-6 columns cp"> <div class="arc" data-url="img/04.jpg"></div> <button class="button small expand"> <i class="fi-refresh"></i> Reload Arc Preloader Example</button> </div> </div> </section> <section id="features"> <div class="row"> <div class="columns"> <h3>Features</h3> <hr> <p>Preloading files can be a tough task. Circular HTML5 Preloader will take care of any kind of files you need to store in the browser cache no matter if you need to load only single images or whole websites, it will fit the job with its flexibility.</p> </div> </div> <div class="row"> <div class="large4 medium-4 columns"> <h5>Supported Files</h5> <hr> <p>Circular HTML5 Preloader was built mainly for preloading images. Though, you can use the queue function and load any kind of files including images, svg, js, css, json and xml files.</p> <p>The parameter works as proxy to the queue used in <a href="https://www.createjs.com/preloadjs" target="_blank">PreloadJS</a> and it allows you to push any kind of argument supported by the library.</p> </div> <div class="large4 medium-4 columns"> <h5>Initialization</h5> <hr> <p>Built as jQuery Plugin you can handle it with ease. Just hook it to your DOM element and it will run on it's own.</p> <p><pre><code class="language-javascript">$(".class").circularPreloader();</code></pre></p> <p>You can also avoid any call and just let the plugin do all the work, by adding an autoload attribute to your element.</p> </div> <div class="large-4 medium-4 columns"> <h5>Callbacks</h5> <hr> <p>Want full control of the progress during the preloading? Circular HTML5 Preloader offers you several callbacks that allow you to keep track of the progress of the loading and create your own functions triggered directly through javascript.</p> <p>You can push your own scripts during the loading and even on complete.</p> </div> </div> <br><br> <div class="row"> <div class="large4 medium-4 columns"> <h5>Small Footprint</h5> <hr> <p>The animations are smooth and use a very low amount of processing power. There is also a built-in garbage collection routine for keeping memory usage low.</p> <p>Circular HTML5 Preloader weights only 3kbytes when compressed and 8kbytes in the minified version.</p> </div> <div class="large4 medium-4 columns"> <h5>Mobile Friendly</h5> <hr> <p>Small screens will display the preloader smoothly and without any issues. Since it's rendered in SVG you won't ever again spot blurred edges on retina screens as it's completely vectorial and easy to resize for any device.</p> <p>Circular HTML5 Preloader works neatly with any responsive layout.</p> </div> <div class="large-4 medium-4 columns"> <h5>Customizable</h5> <hr> <p>Circular HTML5 Preloader can be customized in several ways. It comes with optimized default values, but you're free to play with over 30 parameters. Personalize it by overwriting the existing setup with a custom one.</p> <p>Integrating it inside your own projects will be a piece of cake.</p> </div> </div> </section> <footer> <div class="row"> <div class="large-12 medium-12 small-12 columns"> <p>© 2015 All Rights Reserved. <br class="show-for-small"> Made with <i class="fi-heart"></i> in Italy.</p> </div> </div> </footer> </div> </div> </div> <!-- Content End --> </div> <!-- Stage Wrapper End --> <!-- Needed libraries for Circular HTML5 Preloader --> <script src="//code.jquery.com/jquery-2.1.4.min.js"></script> <script src="//code.createjs.com/preloadjs-0.6.2.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> <script src="js/snap.svg-min.js"></script> <!-- Circular HTML5 Preloader --> <script src="js/jquery.circularpreloader.min.js"></script> <!-- Used only for this showcase --> <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineMax.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script> <!-- Example App for your project --> <script src="js/app.min.js"></script>
</body> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js'></script>
<script src='https://code.createjs.com/preloadjs-0.6.2.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js'></script>
<script src='http://apps.flashedge.net/circular/js/app.min.js'></script>
</body>
</html>
| Developer | Siful Islam |
| Username | sifulislam |
| Uploaded | January 30, 2023 |
| Rating | 3 |
| Size | 4,168 Kb |
| Views | 2,024 |
Do you need developer help for A Pen by Siful Islam?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Siful Islam (sifulislam) Script Codes
| Name | Size |
| Animate a Border Below a Horizontal Nav Item from Left to Right | 1,561 Kb |
| Fullpage.js Overflow scrolling | 3,809 Kb |
| Add a css border on hover without moving the element | 1,713 Kb |
| Vertical nav | 2,022 Kb |
| Progress bar css | 2,898 Kb |
| Search bar width increase on click | 2,610 Kb |
| Reading Progress bar | 3,435 Kb |
| Google map search only | 1,889 Kb |
| Percentage preloader | 3,571 Kb |
| Material Contact Form | 3,657 Kb |
Create amazing SEO content with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Two joint circles - One element | Berdejitendra | 1,704 Kb |
| Ball Physics | Getsetbro | 3,149 Kb |
| Multi-step GSAP animation | Acacheung | 2,668 Kb |
| Use the Twitchtv JSON API | Roksanaop | 3,561 Kb |
| Confirm Close Of Foundation Reveal Modal | Winghouchan | 1,818 Kb |
| Search field | Jamesbarnett | 2,100 Kb |
| Vue Transition | Chenming142 | 4,561 Kb |
| Two tables and header with jspdf-autotable | Someatoms | 2,245 Kb |
| 3d css cube | Semenchenko | 4,578 Kb |
| HTM5 picture dropzone | Jaysalvat | 2,576 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!