JQueryUI Capacity Meter widget

Developer
Tom
Size
2,612 Kb
Views
30,360
  1. JQueryUI Capacity Meter widget Previews
  2. JQueryUI Capacity Meter widget HTML Codes
  3. JQueryUI Capacity Meter widget CSS Codes
  4. JQueryUI Capacity Meter widget JS Codes

How do I make an jqueryui capacity meter widget?

Implementation of a jQuery Capacity Meter widget.. What is a jqueryui capacity meter widget? How do you make a jqueryui capacity meter widget? This script and codes were developed by Tom on 16 September 2022, Friday.

JQueryUI Capacity Meter widget Previews
IQ Test

JQueryUI Capacity Meter widget - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQueryUI Capacity Meter widget</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="destinations">	<span class="ui-capacity">	<span class="ui-capacity-text">	999.9 GB	<span class="ui-capacity-text-secondary">	Used	</span>	</span>	<span class="ui-capacity-segments"><span class="ui-capacity-segment ui-capacity-segment-active capacity-stored"></span><span class="ui-capacity-segment capacity-cold"></span><span class="ui-capacity-segment capacity-free"></span></span>	</span>
</div> <script src="js/index.js"></script>
</body>
</html>

JQueryUI Capacity Meter widget - Script Codes CSS Codes

.ui-capacity { box-sizing: border-box; display: inline-block; cursor: pointer;
}
.ui-capacity .ui-capacity-text { display: block; clear: both;
}
.ui-capacity .ui-capacity-segments { display: block; clear: both; margin: 0; padding: 0; border-top: 1px solid #afafaf; height: 6px;
}
.ui-capacity .ui-capacity-segment { display: inline-block; clear: none; float: left; margin: 0; padding: 0; height: 6px;
}
.capacity-stored { width: 81px; background: #fcb492;
}
.capacity-stored.ui-capacity-segment-active { background: #fe5000;
}
.capacity-cold { width: 20px; background: #bce4fd;
}
.capacity-free { width: 49px; background: #f8fcc9;
}
.destinations .ui-capacity { width: 150px; font-size: 14px; font-family: "Proxima Nova";
}
.destinations .ui-capacity .ui-capacity-text { padding-left: 3px;
}
.destinations .ui-capacity .ui-capacity-text-secondary { font-size: 10px; text-transform: uppercase;
}

JQueryUI Capacity Meter widget - Script Codes JS Codes

$('.capacity-meter').capacityMeter('setData', { 'capacity-used': 85899345920, // 80 gb 'capacity-cold': 22548578304, // 21 gb 'capacity-free': 52613349376 // 49 gb
});
[
{ 'capacity-used': 85899345920, // 80 gb 'capacity-cold': 22548578304, // 21 gb 'capacity-free': 52613349376 // 49 gb
}
]
$('.capacity-meter').capacityMeter('defineSelections', [ { }
])
JQueryUI Capacity Meter widget - Script Codes
JQueryUI Capacity Meter widget - Script Codes
Home Page Home
Developer Tom
Username tomprogers
Uploaded September 16, 2022
Rating 3
Size 2,612 Kb
Views 30,360
Do you need developer help for JQueryUI Capacity Meter widget?

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!

Tom (tomprogers) Script Codes
Name
Layout for wordsearch tutorial
Layout for crafting assistant
Charts
Encoding
API documentation
Crawford - layout
Playing with auto-truncation of text
Table styling
Gravatar monogram playground
Sidebar layout for doc viewer
Create amazing sales emails 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!