• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
seegatesite header

Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

  • TOOLS
    • Bootstrap Navbar Online Generator
    • Customize Sidebar Menu Bootstrap 3
    • Bootstrap Demo
  • ADVERTISE
  • CATEGORIES
    • Android
    • Blogging Tips
    • Database
    • CSS
    • Info Gadget
    • Javascript
    • Linux
    • PHP
    • Various
    • WordPress
  • Q&A
  • PHP
  • JAVASCRIPT
  • JQUERY
  • ANGULAR
  • WORDPRESS
  • SEO
  • REACT
🏠 » Javascript » Create Simple Progress Bar for Fake Online Generator with Jquery

Create Simple Progress Bar for Fake Online Generator with Jquery

By Sigit Prasetya Nugroho ∙ January 10, 2015 ∙ Javascript ∙ Leave a Comment

Share : TwitterFacebookTelegramWhatsapp

Progress bar generator is usually used to create fake online generator. Many of the CPA players using a fake generator to increase their income. In fake generator, cool progress bar is used to trick the user into the process seemed to be really real. Yet it was all beautiful game from a progress bar of jquery and javascript.

how to create free online generator

Here I will give an example of making a simple progress bar, such as the online website fake generator. My article was not to drop them who play CPA using a fake generator, but only as learning how to make fake generator progress bar to make it look authentic.

Watch my simple demo

Related Articles :

  • Adept Using Datatables Plugin In 10 Minutes For Beginners (Tutorial)
  • How To Use JQuery Input File / Upload File Change Event
  • An Easy Way To Remove Attribute In HTML Element Using JQuery

Table of Contents

  • 1  Okay we started making fake progress bar generator 
    • 1.1 You can try my simple progress bar for fake online generator here DEMO

 Okay we started making fake progress bar generator 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Sample fake generator progress bar</title>
</head>
<style>
    @import url(https://fonts.googleapis.com/css?family=Josefin+Sans);
    .body {} .loader {
        font-weight: bold;
        width: 500px;
        margin: 0 auto;
        height: 20px;
        font-family: 'Josefin Sans', sans-serif;
    }
    .title {
        color: #CC0066;
        font-size: 100%;
        margin-bottom: 5px
    }
    .procesfoot {
        width: 100%;
        color: #F90;
        font-size: 60%;
        margin-bottom: 5px;
        float: right;
    }
    .load {
        width: 80%;
        height: 5px;
        background-color: #F0F0F0;
        position: relative;
        overflow: hidden;
    }
    .bar {
        width: 15%;
        height: 5px;
        background-color: #CC0066;
        position: absolute;
    }
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<body>
    <table>
        <tr>
            <td>Username</td>
            <td> :
                <input type="text" id="username" value="COLONEL MESSI" />
            </td>
        </tr>
        <tr>
            <td>Free Gold</td>
            <td> :
                <input type="text" id="t_gold" value="9,999" />
            </td>
        </tr>
        <tr>
            <td>Free Elixir</td>
            <td> :
                <input type="text" id="t_elixir" value="8,888" />
            </td>
        </tr>
        <tr>
            <td>Free Gems</td>
            <td> :
                <input type="text" id="t_gem" value="7,777" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <button id="butonku">Generate</button>
            </td>
        </tr>
    </table>
    <div class="loader">
        <div class="title">Loading<span class="titik">...</span>
        </div>
        <div class="load">
            <div class="bar"></div>
        </div>
        <div class="procesfoot"></div>
        <div class="nilai"></div>
    </div>
    <script>
        $(document).ready(function() {
            $('.loader').hide();
        });
        $('#butonku').click(function() {
            function rotate(selector) {
                $(selector).animate({
                    left: $('.load').width()
                }, 1000, function() {
                    $(selector).css("left", -($(selector).width()) + "px");
                    rotate(selector);
                });
            }
            $(".loader").toggle("slow", function() {
                rotate('.bar');
            });
            var vusername = $('#username').val();
            var vgold = $('#t_gold').val();
            var velixir = $('#t_elixir').val();
            var vgem = $('#t_gem').val();
            var id = 1;
            var numray = 0;
            var rand_angka = 5000;
            var array1 = ["Connecting server", "Waiting respons...", "Connection stablished"];
            var array2 = [
                "Importing Packets!",
                "COC_SERVER -Imported.",
                "COC_SERVER_2015 -Imported.",
                "COC_SERVER_v1.088 -Imported.",
                "@REQUIRE, @COC_SERVER*!",
                "@COC_SERVER.authenticate<span style='color:green;'> " + vusername + " </span>",
                "Server Response: <span style='color:green;'> " + vusername + " </span> Authenticated.",
                "@NEXT, WAIT SERVER",
                "COC_SERVER@COMUNICATE!",
                "USER IS CONNECTED!",
                "SERVER RESPONSE IS OK.",
                "ACCESS POINT: #FFx0451",
                "MEMORY LOADED CORRECTLY",
                "PREARING PACKETS <span style='color:green;'>#COC_SERVER_v1.088</span>",
                "PACKETS_START_FLOAT_x05f",
                "ACCESS POINT: #FFx0451",
                "MEMORY LOADED CORRECTLY",
                "#COC_SERVER_v1.088.use(AVOID) as C_",
                "LAUNCH_PROCESS: C_",
                "C_ CALCULATE FLOAT 0x5x",
                "C_ LAUNCH SERVER SIDE SCRIPT",
                "C_ LISTENING ON PORT ****",
                "C_ IS COLLECTING TOKENS",
                "C_ IS BACK WITH 80 TOKENS",
                "C_ PACKING",
                "<span style='color:green;'>C_ IS calculating  " + vgold + "  FOR GOLD</span>",
                "<span style='color:green;'>C_ IS calculating  " + velixir + "  FOR ELIXIR</span>",
                "<span style='color:green;'>C_ IS calculating  " + vgem + "  FOR GEMS</span>",
                "C_FINISHED",
                "@SAVE FOR C_"
            ];
            var array3 = ["Server Response Ok", "Generating Packets for  " + vgold + "  Gold", "Generating Packets for  " + velixir + "  Elixir", "Generating Packets for  " + vgem + "  Gem", "Generating Resources", "Done"];
            myvar = setTimeout(myfunc, rand_angka);
            function myfunc() {
                if (id == array1.length + 1) {
                    clearInterval(myvar);
                    xid = 0;
                    xnumray = 0;
                    myfunc2();
                }
                $('.title').html(array1[numray]);
                numray++;
                id++;
                var rand_angka = (Math.random() * 5000) + 1;
                myvar = setTimeout(myfunc, rand_angka);
            }
            function myfunc2() {
                if (xid == array2.length + 1) {
                    $('.procesfoot').html('Generating Resources');
                    clearInterval(myvar2);
                    xxid = 0;
                    xxnumray = 0;
                    myfunc3();
                } else {
                    $('.procesfoot').html(array2[xnumray]);
                    xnumray++;
                    xid++;
                    var rand_angka = (Math.random() * 200) + 1;
                    myvar2 = setTimeout(myfunc2, rand_angka);
                }
            }
            function myfunc3() {
                if (xxid == array3.length + 1) {
                    $('.procesfoot').html('');
                    clearInterval(myvar3);
                    $('.loader').hide("slow");
                    alert("Successful create fake progress generator bar")
                } else {
                    $('.title').html(array3[xxnumray]);
                    xxnumray++;
                    xxid++;
                    var rand_angka = 2500;
                    myvar3 = setTimeout(myfunc3, rand_angka);
                }
            }
        });
    </script>
</body>
</html>

My script is still very messy, you can fix it yourself. For the progress bar you can search here, many source progress bar in them. You can change the progress bar to your taste, such as following a few examples of the progress bar

how to create fake progress bar for online generator

Create progress bar jquery for fake generator

Create fake online generator with beatifull progress bar

You can try my simple progress bar for fake online generator here DEMO

Another Javascript Related Post :

  • Adept Using Datatables Plugin In 10 Minutes For Beginners (Tutorial)
  • The Using Of Reactstrap And React-Table, Suitable For Beginners
  • Tutorial Create Simple Block UI Using React JS
  • How To Implement Login Page And Protected Route ReactJS
  • Complete Tutorial React Router Dom For Beginners (Easy-To-Understand)
  • The Right Way Understanding React Lifecycle For Beginners

Avatar for Sigit Prasetya Nugroho

About Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Welcome to my Home,

Avatar for Sigit Prasetya NugrohoThis site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.



Popular Articles

Checked checkbox AdminLTE Bootstrap in Jquery

November 4, 2014 By Sigit Prasetya Nugroho 7 Comments

Simple create date format validation with jqueryUI

December 21, 2014 By Sigit Prasetya Nugroho Leave a Comment

Create Simple Progress Bar for Fake Online Generator with Jquery

January 10, 2015 By Sigit Prasetya Nugroho Leave a Comment

22+ Coolest Free Jquery Plugin For Premium Theme

October 3, 2015 By Sigit Prasetya Nugroho Leave a Comment

Easy Build Your Anti Copy Paste Plugin

October 6, 2015 By Sigit Prasetya Nugroho Leave a Comment

Popular Tags

adminlte (15) adsense (13) adsense tips (4) affiliate amazon (13) amazon (12) Android (8) angular (16) angular 4 (12) angular 5 (4) asin grabber (3) Bootstrap (27) codeigniter (5) create wordpress theme (5) crud (8) css (6) free wordpress theme (7) google adsense (4) imacros (4) increase traffic (6) jquery (34) laravel (10) laravel 5 (5) learn android (5) modal dialog (5) mysql (6) nodeJs (4) optimize seo (4) pdo (6) php (30) plugin (53) pos (7) Publisher Tips (5) react (3) Reactjs (7) SEO (37) theme (17) tutorial angular (5) tutorial angular 4 (6) tutorial javascript (10) tutorial javascript beginners (4) twitter (3) widget (3) wordpress (18) wordpress plugin (13) XMLRPC (5)




  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions

©2021 Seegatesite.com