Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Page Loader with Counter</title>
- <style type="text/css">
- /* Stilurile pentru loader și counter */
- .loader {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: #fff;
- display: flex;
- align-items: center;
- justify-content: center;
- z-index: 100;
- }
- .counter {
- font-family: 'Open Sans', sans-serif;
- text-align: center;
- width: 190px;
- padding: 25px 30px 10px;
- margin: 10px;
- border-radius: 30px 0;
- box-shadow: 10px 10px 0 rgba(0,0,0,0.05);
- position: relative;
- z-index: 1;
- }
- .counter:before {
- content: "";
- background: #51d658; /* Culoarea verde */
- border-radius: 15px 0 30px 0;
- box-shadow: inset 0 4px 8px rgba(0,0,0,0.15);
- position: absolute;
- top: 12px;
- left: 12px;
- right: 12px;
- bottom: 27px;
- z-index: -1;
- }
- .counter h3 {
- font-size: 17px;
- font-weight: 500;
- text-transform: uppercase;
- letter-spacing: 1px;
- margin: 0 0 20px;
- color: #666;
- }
- .counter-value {
- font-size: 33px;
- font-weight: 600;
- line-height: 60px;
- color: #666;
- }
- /* ... alte stiluri ... */
- </style>
- </head>
- <body>
- <!-- Loader cu un singur counter -->
- <div class="loader">
- <div class="counter">
- <h3>Încărcare...</h3>
- <span class="counter-value" data-target="100">0</span>
- </div>
- </div>
- <!-- Conținutul paginii (ascuns inițial) -->
- <div class="container" style="display:none;">
- <h1>Welcome!</h1>
- <p>This is the content of the page.</p>
- </div>
- <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
- <script>
- $(document).ready(function() {
- var $counter = $('.counter-value'),
- countTo = $counter.attr('data-target');
- $({ countNum: $counter.text() }).animate({
- countNum: countTo
- },
- {
- duration: 5000,
- easing: 'linear',
- step: function() {
- $counter.text(Math.floor(this.countNum));
- },
- complete: function() {
- $counter.text(this.countNum);
- }
- });
- });
- window.addEventListener('load', function() {
- $('.loader').fadeOut('slow', function() {
- $('.container').fadeIn();
- });
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement