p006/api/jquery/plugins/an-skill-bar/docs/index.html

111 lines
3.1 KiB
HTML
Executable File

<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>an progress bar</title>
<meta name="application-name" content="an-progress-bar" />
<meta name="msapplication-TileColor" content="#141517" />
<link rel="stylesheet" href="./assets/styles/an-skill-bar.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!--[if IE]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="container">
<h2>An skill bar demo</h2>
<div id="skill">
<div class="skillbar html">
<div class="filled" data-width="15%"></div>
<span class="title">HTML</span>
<span class="percent">15%</span>
</div>
<div class="skillbar css">
<span class="title"></i> CSS</span>
<span class="percent">20%</span>
<div class="filled" data-width="20%"></div>
</div>
<div class="skillbar js">
<span class="title">JS</span>
<span class="percent">30%</span>
<div class="filled" data-width="30%"></div>
</div>
<div class="skillbar php">
<span class="title">php</span>
<span class="percent">40%</span>
<div class="filled" data-width="40%"></div>
</div>
<div class="skillbar sass">
<span class="title"></i> sass</span>
<span class="percent">50%</span>
<div class="filled" data-width="50%"></div>
</div>
<div class="skillbar indesign">
<span class="title"></i> indesign</span>
<span class="percent">60%</span>
<div class="filled" data-width="60%"></div>
</div>
<div class="skillbar illustrator">
<span class="title"></i> illustrator</span>
<span class="percent">70%</span>
<div class="filled" data-width="70%"></div>
</div>
<div class="skillbar photoshop">
<span class="title"></i> photoshop</span>
<span class="percent">80%</span>
<div class="filled" data-width="80%"></div>
</div>
<div class="skillbar angular">
<span class="title"></i> angular</span>
<span class="percent">90%</span>
<div class="filled" data-width="90%"></div>
</div>
<div class="skillbar python">
<span class="title"></i> python</span>
<span class="percent">100%</span>
<div class="filled" data-width="100%"></div>
</div>
</div>
<h2><a href="https://github.com/hasanmisbah/an-skill-bar">Documentation is here</a> </h2>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="./assets/scripts/jquery.min.js"></script>
<script src="./assets/scripts/an-skill-bar.js"></script>
<script src="./script.js"></script>
</body>
</html>