Ng-circle

Developer
Lorenzo D'Ianni
Size
3,355 Kb
Views
12,144
  1. Ng-circle Previews
  2. Ng-circle HTML Codes
  3. Ng-circle CSS Codes
  4. Ng-circle JS Codes

How do I make an ng-circle?

Angular.js ngCircle directive. What is a ng-circle? How do you make a ng-circle? This script and codes were developed by Lorenzo D'Ianni on 29 September 2022, Thursday.

Ng-circle Previews
IQ Test

Ng-circle - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ng-circle</title> <link rel='stylesheet prefetch' href='https://rawgit.com/lorenzodianni/ng-circle/master/demo/css/demo.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link rel="stylesheet" href="https://rawgit.com/lorenzodianni/ng-circle/master/dist/css/ng-circle.css" />
<div ng-app="MyApp" ng-controller="MainCtrl as main"> <ng-circle class="myClass" ng-circle-size="120px" ng-circle-value="{{main.rangeValue}}" ng-circle-color="#03A9F4" ng-circle-stroke="4px" ng-circle-fill="[0,0,0]" ng-circle-max-value="100" ng-circle-pie="false"> </ng-circle> <input type="range" ng-model="main.rangeValue" min="0" max="100"> <div class="range-value">{{main.rangeValue}}%</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="https://rawgit.com/lorenzodianni/ng-circle/master/dist/ng-circle.js"></script>
<a href="https://github.com/lorenzodianni/ng-circle" target="blank" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#fff; color:#151513; position: absolute; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style> <script src="js/index.js"></script>
</body>
</html>

Ng-circle - Script Codes CSS Codes

html, body { position: relative; height: 100%;
}
html > div, body > div { height: 100%;
}
.myClass { position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -110%); -ms-transform: translate(-50%, -110%); -webkit-transform: translate(-50%, -110%); transform: translate(-50%, -110%);
}
.range-value { position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, 250%); -ms-transform: translate(-50%, 250%); -webkit-transform: translate(-50%, 250%); transform: translate(-50%, 250%); color: #03A9F4; font-size: 32px; font-weight: 300;
}

Ng-circle - Script Codes JS Codes

'use strict';
angular.module('MyApp', ['ngCircle']).controller('MainCtrl', function () { this.rangeValue = 90;
});
Ng-circle - Script Codes
Ng-circle - Script Codes
Home Page Home
Developer Lorenzo D'Ianni
Username lorenzodianni
Uploaded September 29, 2022
Rating 3
Size 3,355 Kb
Views 12,144
Do you need developer help for Ng-circle?

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!

Lorenzo D'Ianni (lorenzodianni) Script Codes
Name
Ng-barcode
Checkbox Style 2.0 - SCSS
Cards experience
Material Design - Button in pure CSS
Material Design - Animations
SidebarJS
Material Design - Switch
Checkbox Style - SCSS
NgEasyModal
AngularJS template
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!