Create Simple Progress Bar for Fake Online Generator with Jquery

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.

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

Okay we started making fake progress bar generator

<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>

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>

<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>

<body>

<table>

<tr>

<td>Username</td>

<td> :

</td>

</tr>

<tr>

<td> :

</td>

</tr>

<tr>

<td>Free Elixir</td>

<td> :

</td>

</tr>

<tr>

<td> :

</td>

</tr>

<tr>

<button id="butonku">Generate</button>

</td>

</tr>

</table>

<div class="title">Loading<span class="titik">...</span>

</div>

</div>

</div>

$(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