Dashboard info panels with animation

Developer
Icebob
Size
4,322 Kb
Views
95,128
  1. Dashboard info panels with animation Previews
  2. Dashboard info panels with animation HTML Codes
  3. Dashboard info panels with animation CSS Codes
  4. Dashboard info panels with animation JS Codes

How do I make an dashboard info panels with animation?

What is a dashboard info panels with animation? How do you make a dashboard info panels with animation? This script and codes were developed by Icebob on 12 June 2022, Sunday.

Dashboard info panels with animation Previews
IQ Test

Dashboard info panels with animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dashboard info panels with animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="row"> <div class="box purple icon-check"> <div class="value" data-value="250">0</div> <div class="title">Orders</div> <div class="viewMore">View more »</div> </div> <div class="box blue icon-user"> <div class="value" data-value="300">0</div> <div class="title">Users</div> <div class="viewMore">View more »</div> </div> <div class="box orange icon-quote"> <div class="value" data-value="40">0</div> <div class="title">Comments</div> <div class="viewMore">View more »</div> </div> <div class="box green icon-graph"> <div class="value" data-value="25">0</div> <div class="title">Profits</div> <div class="viewMore">View more »</div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdn.jsdelivr.net/velocity/1.2.1/velocity.min.js'></script>
<script src='http://cdn.jsdelivr.net/velocity/1.2.1/velocity.ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Dashboard info panels with animation - Script Codes CSS Codes

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,600,700|Play:400,700|Open+Sans+Condensed:300,600|Open+Sans:400,300,600,700);
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
html { background-color: #ddd;
}
body { font-family: "Open Sans"; font-size: 16px;
}
.row { margin: 20px;
}
.row:before, .row:after { content: ""; display: table;
}
.row:after { clear: both;
}
.row .box { display: none; float: left; position: relative; width: 23%; height: 100px; margin: 1%; color: White; overflow: hidden; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
.row .box.purple { background-color: #A48AEB;
}
.row .box.blue { background-color: #6BB8E8;
}
.row .box.orange { background-color: #EB9561;
}
.row .box.green { background-color: #53E082;
}
.row .box .value { position: absolute; top: 8px; right: 8px; font-size: 2.2rem;
}
.row .box .title { position: absolute; top: 50px; right: 8px; font-size: 1.1rem; font-weight: 300;
}
.row .box .viewMore { position: absolute; left: 0; right: 0; bottom: 0px; text-align: center; height: 24px; line-height: 24px; vertical-align: middle; background-color: rgba(0, 0, 0, 0.1); font-size: 0.8rem; cursor: pointer; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
.row .box:hover .viewMore { background-color: rgba(0, 0, 0, 0.2); bottom: 0px;
}
.row .box:before { font-family: FontAwesome; content: "\f007"; position: absolute; left: 6px; top: 6px; font-size: 4.0rem; color: rgba(255, 255, 255, 0.25);
}
.row .box.icon-check:before { content: "\f046";
}
.row .box.icon-quote:before { content: "\f10e";
}
.row .box.icon-graph:before { content: "\f201";
}

Dashboard info panels with animation - Script Codes JS Codes

(function() { $(".box").velocity("transition.slideDownIn", { stagger: 250, drag: true, duration: 2000, complete: function() { return $(".value").each(function(index, item) { var val, value; value = $(item).data("value"); val = parseInt(value, 10); return $({ someValue: 0 }).animate({ someValue: val }, { duration: 1000, easing: 'swing', step: function() { return $(item).text(Math.round(this.someValue)); } }); }); } });
}).call(this);
Dashboard info panels with animation - Script Codes
Dashboard info panels with animation - Script Codes
Home Page Home
Developer Icebob
Username icebob
Uploaded June 12, 2022
Rating 4
Size 4,322 Kb
Views 95,128
Do you need developer help for Dashboard info panels with animation?

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!

Icebob (icebob) Script Codes
Name
Animated popup window
SuperCurve is a pong game
Home portal app
Memory card game with VueJS
Angular Sample App with Semantic UI
Radio player
Dashboard page
Number change effects
Loading animation with css
SVG clock UI
Create amazing Facebook ads 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!