Save Bar

Developer
Mark Thomes
Size
2,719 Kb
Views
50,600
  1. Save Bar Previews
  2. Save Bar HTML Codes
  3. Save Bar CSS Codes
  4. Save Bar JS Codes

How do I make an save bar?

What is a save bar? How do you make a save bar? This script and codes were developed by Mark Thomes on 04 July 2022, Monday.

Save Bar Previews
IQ Test

Save Bar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Save Bar</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="wrapper"> <div class="maxwidtharea"> <div class="copy progress_25"> </div> </div> <div class="clickme">CLICK ME</div><div class="resetme">RESET</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Save Bar - Script Codes CSS Codes

body { background: #333 url(http://subtlepatterns.com/patterns/escheresque_ste.png);
}
#wrapper { width: 500px; margin: 80px auto 0; text-align: center;
}
.maxwidtharea { margin: 20px 0 0 20px; position: relative; width: 500px; height: 50px; border-radius: 25px; background: rgba(0, 0, 0, 0.5); background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.5)), color-stop(100%, rgba(0, 0, 0, 0.3))); box-shadow: 0 1px 3px rgba(255, 255, 255, 0.2);
}
.copy { position: absolute; width: 32px; height: 32px; border-radius: 16px; margin: 9px 0 0 9px; background: white; background: -moz-linear-gradient(top, white 0%, #ccc 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #999));
}
.clickme, .resetme { display: inline-block; padding: 20px; border-radius: 8px; margin: 20px 0 0 20px; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.7); background: white; cursor: pointer; background: -moz-linear-gradient(top, white 0%, #ccc 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #999));
}

Save Bar - Script Codes JS Codes

$(".clickme").click(function() { $(".copy").animate({ width: "482px" }, 1000, 'easeOutBounce' );
});
$(".resetme").click(function() { $(".copy").animate({ width: "32px" }, 1000, 'easeOutBounce' );
});
Save Bar - Script Codes
Save Bar - Script Codes
Home Page Home
Developer Mark Thomes
Username WithAnEs
Uploaded July 04, 2022
Rating 3
Size 2,719 Kb
Views 50,600
Do you need developer help for Save Bar?

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!

Mark Thomes (WithAnEs) Script Codes
Name
Basic Menu CSS
CSS Birthday Cake
Pharmacy Loader
Beer Color
CSS3 Gradient Stripes
SVG Search...
Twitter Feed Loading Animation
CSS Self Portrait
404 Animated Character
Social Icons
Create amazing art & images 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!