RenanMI/gist:ed9943d13c353720180e0f8d4f45b8d3

## gistfile1.txt
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
        crossorigin="anonymous"></script>
    <script src="http://malsup.github.io/min/jquery.cycle2.min.js"></script>


    <title>teste</title>
    <style>
        #progress {
            position: absolute;
            bottom: 0;
            height: 6px;
            width: 0;
            background-color: red;
            z-index: 500
        }

        /*
    these are just the default styles used in the Cycle2 demo pages.
    you can use these styles or any others that you wish.
*/

        /* set border-box so that percents can be used for width, padding, etc (personal preference) */

        .cycle-slideshow,
        .cycle-slideshow * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }


        .cycle-slideshow {
            width: 45%;
            min-width: 200px;
            max-width: 500px;
            margin: 10px auto;
            padding: 0;
            position: relative;
            background: url(http://malsup.github.com/images/spinner.gif) 50% 50% no-repeat;

        }

        /* slideshow images (for most of the demos, these are the actual "slides") */

        .cycle-slideshow img {
            /*
    some of these styles will be set by the plugin (by default) but setting them here
    helps avoid flash-of-unstyled-content
    */
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            padding: 0;
            display: block;
        }

        /* in case script does not load */

        .cycle-slideshow img:first-child {
            position: static;
            z-index: 100;
        }

        /* pager */

        .cycle-pager {
            text-align: center;
            width: 100%;
            z-index: 500;
            position: absolute;
            top: 10px;
            overflow: hidden;
        }

        .cycle-pager span {
            font-family: arial;
            font-size: 50px;
            width: 16px;
            height: 16px;
            display: inline-block;
            color: #ddd;
            cursor: pointer;
        }

        .cycle-pager span.cycle-pager-active {
            color: #D69746;
        }

        .cycle-pager>* {
            cursor: pointer;
        }


        /* caption */

        .cycle-caption {
            position: absolute;
            color: white;
            bottom: 15px;
            right: 15px;
            z-index: 700;
        }


        /* overlay */

        .cycle-overlay {
            font-family: tahoma, arial;
            position: absolute;
            bottom: 0;
            width: 100%;
            z-index: 600;
            background: black;
            color: white;
            padding: 15px;
            opacity: .5;
        }


        /* prev / next links */

        .cycle-prev,
        .cycle-next {
            position: absolute;
            top: 0;
            width: 30%;
            opacity: 0;
            filter: alpha(opacity=0);
            z-index: 800;
            height: 100%;
            cursor: pointer;
        }

        .cycle-prev {
            left: 0;
            background: url(http://malsup.github.com/images/left.png) 50% 50% no-repeat;
        }

        .cycle-next {
            right: 0;
            background: url(http://malsup.github.com/images/right.png) 50% 50% no-repeat;
        }

        .cycle-prev:hover,
        .cycle-next:hover {
            opacity: .7;
            filter: alpha(opacity=70)
        }

        .disabled {
            opacity: .5;
            filter: alpha(opacity=50);
        }


        /* display paused text on top of paused slideshow */

        .cycle-paused:after {
            content: 'Paused';
            color: white;
            background: black;
            padding: 10px;
            z-index: 500;
            position: absolute;
            top: 10px;
            right: 10px;
            border-radius: 10px;
            opacity: .5;
            filter: alpha(opacity=50);
        }

        /*
    media queries
    some style overrides to make things more pleasant on mobile devices
*/

        @media only screen and (max-width: 480px),
        only screen and (max-device-width: 480px) {
            .cycle-slideshow {
                width: 200px;
            }
            .cycle-overlay {
                padding: 4px
            }
            .cycle-caption {
                bottom: 4px;
                right: 4px
            }
        }
    </style>
</head>

<body>

    <div class="cycle-slideshow" data-cycle-fx="fadeout" data-cycle-pause-on-hover="true">
        <img src="http://malsup.github.com/images/p1.jpg" class="cycle-slide cycle-sentinel">
        <img src="http://malsup.github.com/images/p2.jpg" class="cycle-slide">
        <img src="http://malsup.github.com/images/p3.jpg" class="cyclecycle-slide">

        <div id="progress"></div>
    </div>

    <script>
        var progress = $('#progress'),
            slideshow = $('.cycle-slideshow');

        slideshow.on('cycle-initialized cycle-before', function (e, opts) {
            progress.stop(true).css('width', 0);
        });

        slideshow.on('cycle-initialized cycle-after', function (e, opts) {
            if (!slideshow.is('.cycle-paused'))
                progress.animate({ width: '100%' }, opts.timeout, 'linear');
        });

        slideshow.on('cycle-paused', function (e, opts) {
            progress.stop();
        });

        slideshow.on('cycle-resumed', function (e, opts, timeoutRemaining) {
            progress.animate({ width: '100%' }, timeoutRemaining, 'linear');
        });
    </script>
</body>

</html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
	crossorigin="anonymous"></script>
	<script src="http://malsup.github.io/min/jquery.cycle2.min.js"></script>



	<title>teste</title>
	<style>
	#progress {
	position: absolute;
	bottom: 0;
	height: 6px;
	width: 0;
	background-color: red;
	z-index: 500
	}

	/*
	these are just the default styles used in the Cycle2 demo pages.
	you can use these styles or any others that you wish.
	*/

	/* set border-box so that percents can be used for width, padding, etc (personal preference) */

	.cycle-slideshow,
	.cycle-slideshow * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}


	.cycle-slideshow {
	width: 45%;
	min-width: 200px;
	max-width: 500px;
	margin: 10px auto;
	padding: 0;
	position: relative;
	background: url(http://malsup.github.com/images/spinner.gif) 50% 50% no-repeat;

	}

	/* slideshow images (for most of the demos, these are the actual "slides") */

	.cycle-slideshow img {
	/*
	some of these styles will be set by the plugin (by default) but setting them here
	helps avoid flash-of-unstyled-content
	*/
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: 0;
	display: block;
	}

	/* in case script does not load */

	.cycle-slideshow img:first-child {
	position: static;
	z-index: 100;
	}

	/* pager */

	.cycle-pager {
	text-align: center;
	width: 100%;
	z-index: 500;
	position: absolute;
	top: 10px;
	overflow: hidden;
	}

	.cycle-pager span {
	font-family: arial;
	font-size: 50px;
	width: 16px;
	height: 16px;
	display: inline-block;
	color: #ddd;
	cursor: pointer;
	}

	.cycle-pager span.cycle-pager-active {
	color: #D69746;
	}

	.cycle-pager>* {
	cursor: pointer;
	}


	/* caption */

	.cycle-caption {
	position: absolute;
	color: white;
	bottom: 15px;
	right: 15px;
	z-index: 700;
	}


	/* overlay */

	.cycle-overlay {
	font-family: tahoma, arial;
	position: absolute;
	bottom: 0;
	width: 100%;
	z-index: 600;
	background: black;
	color: white;
	padding: 15px;
	opacity: .5;
	}


	/* prev / next links */

	.cycle-prev,
	.cycle-next {
	position: absolute;
	top: 0;
	width: 30%;
	opacity: 0;
	filter: alpha(opacity=0);
	z-index: 800;
	height: 100%;
	cursor: pointer;
	}

	.cycle-prev {
	left: 0;
	background: url(http://malsup.github.com/images/left.png) 50% 50% no-repeat;
	}

	.cycle-next {
	right: 0;
	background: url(http://malsup.github.com/images/right.png) 50% 50% no-repeat;
	}

	.cycle-prev:hover,
	.cycle-next:hover {
	opacity: .7;
	filter: alpha(opacity=70)
	}

	.disabled {
	opacity: .5;
	filter: alpha(opacity=50);
	}


	/* display paused text on top of paused slideshow */

	.cycle-paused:after {
	content: 'Paused';
	color: white;
	background: black;
	padding: 10px;
	z-index: 500;
	position: absolute;
	top: 10px;
	right: 10px;
	border-radius: 10px;
	opacity: .5;
	filter: alpha(opacity=50);
	}

	/*
	media queries
	some style overrides to make things more pleasant on mobile devices
	*/

	@media only screen and (max-width: 480px),
	only screen and (max-device-width: 480px) {
	.cycle-slideshow {
	width: 200px;
	}
	.cycle-overlay {
	padding: 4px
	}
	.cycle-caption {
	bottom: 4px;
	right: 4px
	}
	}
	</style>
	</head>

	<body>

	<div class="cycle-slideshow" data-cycle-fx="fadeout" data-cycle-pause-on-hover="true">
	<img src="http://malsup.github.com/images/p1.jpg" class="cycle-slide cycle-sentinel">
	<img src="http://malsup.github.com/images/p2.jpg" class="cycle-slide">
	<img src="http://malsup.github.com/images/p3.jpg" class="cyclecycle-slide">

	<div id="progress"></div>
	</div>

	<script>
	var progress = $('#progress'),
	slideshow = $('.cycle-slideshow');

	slideshow.on('cycle-initialized cycle-before', function (e, opts) {
	progress.stop(true).css('width', 0);
	});

	slideshow.on('cycle-initialized cycle-after', function (e, opts) {
	if (!slideshow.is('.cycle-paused'))
	progress.animate({ width: '100%' }, opts.timeout, 'linear');
	});

	slideshow.on('cycle-paused', function (e, opts) {
	progress.stop();
	});

	slideshow.on('cycle-resumed', function (e, opts, timeoutRemaining) {
	progress.animate({ width: '100%' }, timeoutRemaining, 'linear');
	});
	</script>
	</body>

	</html>