anuglar+svg+tweenmax

In this example below you will see how to do a anuglar+svg+tweenmax with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by sgfslong, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright sgfslong ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>anuglar+svg+tweenmax</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="gradBody" >
<div ng-app="gaugeApp" class="wrapper">
  
  <div class="inputBox">
    <h4 >动态表盘</h4>
  </div>

  <div ng-controller="gaugeInput as gctr">

    
   <svg  class="scaleUp" width="690.1px" height="225.2px" viewBox="-54 288.8 690.1 225.2" enable-background="new -54 288.8 690.1 225.2" xml:space="preserve">
<g id="Layer_1_1_">
	
	<path fill="#AAAAAA" d="M30.2,509c-2.8,1.6-5.6,3.3-8.4,5C-3.5,472.7-28.7,431.5-54,390.3c3.6-2.2,7.1-4.3,10.7-6.4   C-18.8,425.5,5.7,467.3,30.2,509z M42.9,501.8c-2.8,1.6-5.7,3.2-8.5,4.8C17.8,477.8,1.3,449-15.3,420.2c3.4-1.9,6.7-3.8,10.1-5.7   C10.8,443.4,26.9,472.5,42.9,501.8z M55.7,494.8c-2.9,1.5-5.7,3-8.6,4.5C31.4,470,15.6,440.8-0.1,411.5c3.4-1.8,6.8-3.6,10.2-5.4   C25.3,435.8,40.5,465.3,55.7,494.8z M68.7,488.4c-2.9,1.4-5.8,2.8-8.7,4.3c-14.9-29.7-29.8-59.4-44.8-89.1   c3.4-1.7,6.9-3.4,10.3-5.1C40,428.4,54.3,458.4,68.7,488.4z M81.8,482.3c-2.9,1.3-5.8,2.6-8.8,4c-14.1-30.1-28.2-60.2-42.3-90.3   c3.5-1.6,6.9-3.2,10.4-4.8C54.8,421.7,68.3,451.9,81.8,482.3z M95.1,476.7c-3,1.2-5.9,2.5-8.8,3.7c-13.2-30.5-26.5-60.9-39.7-91.4   c3.5-1.5,7-3,10.5-4.5C69.7,415.3,82.4,445.9,95.1,476.7z M108.4,471.3c-3,1.1-6,2.3-8.9,3.5c-12.4-30.8-24.8-61.7-37.2-92.5   c3.5-1.4,7.1-2.8,10.6-4.2C84.8,409.3,96.6,440.3,108.4,471.3z M121.9,466.4c-3,1.1-6,2.1-9,3.2c-11.5-31.2-23.1-62.3-34.6-93.5   c3.6-1.3,7.1-2.6,10.7-3.9C99.9,403.7,110.9,435.1,121.9,466.4z M135.5,461.8c-3,1-6,2-9.1,3c-10.7-31.5-21.4-62.9-32-94.4   c3.6-1.2,7.2-2.4,10.8-3.6C115.2,398.5,125.3,430.3,135.5,461.8z M149.1,457.8c-3,0.9-6.1,1.8-9.1,2.7   c-14.3-46.2-28.6-92.4-42.8-138.5c3.9-1.2,7.8-2.4,11.7-3.5C122.3,364.8,135.7,411.3,149.1,457.8z M162.9,453.9   c-3.1,0.8-6.1,1.6-9.2,2.5c-8.9-32-17.9-64-26.8-96c3.6-1,7.3-2,10.9-2.9C146.1,389.7,154.5,421.8,162.9,453.9z M176.7,450.5   c-3.1,0.7-6.2,1.4-9.2,2.2c-8.1-32.2-16.1-64.5-24.2-96.7c3.7-0.9,7.3-1.8,11-2.6C161.7,385.8,169.2,418.3,176.7,450.5z    M190.6,447.5c-3.1,0.6-6.2,1.3-9.3,2c-7.2-32.5-14.4-64.9-21.5-97.3c3.7-0.8,7.4-1.6,11-2.3C177.4,382.4,184,415.1,190.6,447.5z    M204.5,444.9c-3.1,0.5-6.2,1.1-9.3,1.7c-6.3-32.6-12.6-65.3-18.9-97.9c3.7-0.7,7.4-1.4,11.1-2   C193.1,379.4,198.8,412.3,204.5,444.9z M218.5,442.8c-3.1,0.5-6.2,0.9-9.3,1.4c-5.4-32.8-10.8-65.6-16.2-98.4   c3.7-0.6,7.4-1.2,11.1-1.7C208.9,376.9,213.7,409.8,218.5,442.8z M232.5,440.8c-3.1,0.4-6.2,0.8-9.4,1.2   c-4.5-32.9-9-65.8-13.5-98.8c3.7-0.5,7.4-1,11.2-1.4C224.7,374.8,228.6,407.8,232.5,440.8z M246.6,439.4c-3.1,0.3-6.3,0.6-9.4,0.9   c-3.6-33-7.2-66.1-10.8-99.1c3.7-0.4,7.5-0.8,11.2-1.1C240.6,373.3,243.6,406.3,246.6,439.4z M260.7,438.3   c-3.1,0.2-6.3,0.4-9.4,0.7c-2.7-33.1-5.4-66.2-8.1-99.4c3.7-0.3,7.5-0.6,11.2-0.8C256.5,371.9,258.6,405.2,260.7,438.3z    M274.8,437.7c-3.1,0.1-6.3,0.3-9.4,0.4c-1.8-33.2-3.6-66.4-5.4-99.5c3.7-0.2,7.5-0.4,11.2-0.5   C272.4,371.2,273.6,404.4,274.8,437.7z M289,437.3c-3.1,0-6.3,0.1-9.4,0.2c-1.3-48.3-2.6-96.6-3.9-144.9c4-0.1,8-0.2,12-0.2   C288.1,340.7,288.5,388.9,289,437.3z M303.1,437.3c-3.1-0.1-6.3-0.1-9.4-0.1c0-33.2,0-66.5,0-99.7c3.7,0,7.5,0,11.2,0.1   C304.3,370.9,303.7,404.2,303.1,437.3z M317.2,437.8c-3.1-0.1-6.3-0.3-9.4-0.3c0.9-33.2,1.8-66.4,2.7-99.7   c3.7,0.1,7.5,0.2,11.2,0.4C320.2,371.4,318.7,404.7,317.2,437.8z M331.3,438.7c-3.1-0.2-6.3-0.4-9.4-0.6   c1.8-33.2,3.6-66.4,5.4-99.5c3.7,0.2,7.5,0.4,11.2,0.7C336.2,372.3,333.7,405.4,331.3,438.7z M345.4,439.8   c-3.1-0.3-6.3-0.6-9.4-0.9c2.7-33.1,5.4-66.2,8.1-99.4c3.7,0.3,7.5,0.6,11.2,1C352,373.8,348.7,406.8,345.4,439.8z M359.5,441.4   c-3.1-0.4-6.2-0.8-9.4-1.1c3.6-33,7.2-66.1,10.8-99.1c3.7,0.4,7.4,0.8,11.2,1.3C367.9,375.5,363.7,408.4,359.5,441.4z M373.5,443.4   c-3.1-0.5-6.2-0.9-9.3-1.4c4.5-32.9,9-65.8,13.5-98.8c3.7,0.5,7.4,1,11.1,1.6C383.7,377.8,378.6,410.5,373.5,443.4z M387.5,445.8   c-3.1-0.6-6.2-1.1-9.3-1.6c5.4-32.8,10.8-65.6,16.2-98.4c3.7,0.6,7.4,1.3,11.1,1.9C399.5,380.4,393.5,413.2,387.5,445.8z    M401.4,448.5c-3.1-0.7-6.2-1.3-9.3-1.9c6.3-32.6,12.6-65.3,18.9-97.9c3.7,0.7,7.4,1.5,11.1,2.2   C415.2,383.5,408.3,416.1,401.4,448.5z M415.3,451.7c-3.1-0.7-6.2-1.4-9.2-2.1c7.2-32.4,14.4-64.9,21.5-97.3   c3.7,0.8,7.3,1.7,11,2.5C430.8,387.1,423.1,419.3,415.3,451.7z M429.1,455.2c-3.1-0.8-6.1-1.6-9.2-2.4   c11.7-46.9,23.4-93.8,35.2-140.7c3.9,1,7.8,2,11.7,3.1C454.2,361.8,441.7,408.5,429.1,455.2z M442.8,459.1c-3-0.9-6.1-1.8-9.1-2.6   c8.9-32,17.9-64,26.8-96c3.6,1,7.3,2.1,10.9,3.1C461.8,395.4,452.3,427.3,442.8,459.1z M456.3,463.3c-3-1-6-2-9.1-2.9   c9.8-31.7,19.6-63.5,29.4-95.2c3.6,1.1,7.2,2.3,10.8,3.5C477.2,400.3,466.8,431.8,456.3,463.3z M470,468.1c-3-1.1-6-2.1-9-3.2   c10.7-31.5,21.4-62.9,32-94.4c3.6,1.2,7.2,2.5,10.7,3.8C492.5,405.4,481.2,436.8,470,468.1z M483.3,473.1c-3-1.2-6-2.3-8.9-3.4   c11.5-31.2,23.1-62.3,34.6-93.5c3.6,1.3,7.1,2.7,10.7,4.1C507.6,411.2,495.5,442.2,483.3,473.1z M496.7,478.5   c-2.9-1.2-5.9-2.5-8.9-3.7c12.4-30.8,24.8-61.7,37.2-92.5c3.5,1.4,7.1,2.9,10.6,4.4C522.6,417.3,509.7,447.9,496.7,478.5z    M509.9,484.3c-2.9-1.3-5.8-2.6-8.8-3.9c13.2-30.5,26.5-60.9,39.7-91.4c3.5,1.5,7,3.1,10.5,4.7   C537.5,423.8,523.7,454.1,509.9,484.3z M523,490.5c-2.9-1.4-5.8-2.8-8.7-4.2c14.1-30.1,28.2-60.2,42.3-90.3c3.5,1.6,6.9,3.3,10.4,5   C552.3,430.8,537.6,460.7,523,490.5z M535.9,497.2c-2.9-1.5-5.7-3-8.6-4.4c14.9-29.7,29.8-59.4,44.8-89.1c3.4,1.7,6.9,3.5,10.3,5.3   C566.9,438.3,551.3,467.7,535.9,497.2z M548.7,504.1c-2.8-1.6-5.7-3.2-8.5-4.7c15.7-29.3,31.5-58.5,47.2-87.8   c3.4,1.8,6.8,3.7,10.1,5.6C581.3,446.2,565,475.2,548.7,504.1z M561.3,511.5c-2.8-1.7-5.6-3.3-8.4-4.9   c24.1-41.9,48.2-83.8,72.3-125.7c3.6,2.1,7.2,4.2,10.8,6.3C611.1,428.5,586.2,469.9,561.3,511.5z"/>
	<g>
		<g>
			<defs>
				<path id="SVGID_1_" d="M30.2,509c-2.8,1.6-5.6,3.3-8.4,5C-3.5,472.7-28.7,431.5-54,390.3c3.6-2.2,7.1-4.3,10.7-6.4      C-18.8,425.5,5.7,467.3,30.2,509z M-5.2,414.3c-3.4,1.9-6.8,3.8-10.1,5.7c16.6,28.8,33.1,57.6,49.7,86.4      c2.8-1.6,5.6-3.2,8.5-4.8C26.9,472.5,10.8,443.4-5.2,414.3z M10.1,406.3c-3.4,1.8-6.8,3.6-10.2,5.4      c15.7,29.3,31.5,58.5,47.2,87.8c2.8-1.5,5.7-3,8.6-4.5C40.5,465.3,25.3,435.8,10.1,406.3z M25.6,398.5      c-3.5,1.7-6.9,3.4-10.3,5.1c14.9,29.7,29.8,59.4,44.8,89.1c2.9-1.4,5.8-2.9,8.7-4.3C54.3,458.4,40,428.4,25.6,398.5z       M41.2,391.3c-3.5,1.6-7,3.1-10.4,4.8c14.1,30.1,28.2,60.2,42.3,90.3c2.9-1.4,5.8-2.7,8.8-4C68.3,451.9,54.8,421.7,41.2,391.3z       M57,384.5c-3.5,1.5-7,2.9-10.5,4.5c13.2,30.5,26.5,60.9,39.7,91.4c2.9-1.3,5.9-2.5,8.8-3.7C82.4,445.9,69.7,415.3,57,384.5z       M72.9,378.2c-3.6,1.4-7.1,2.7-10.6,4.2c12.4,30.8,24.8,61.7,37.2,92.5c3-1.2,5.9-2.4,8.9-3.5C96.6,440.3,84.8,409.3,72.9,378.2      z M89,372.3c-3.6,1.3-7.1,2.5-10.7,3.9c11.5,31.2,23.1,62.3,34.6,93.5c3-1.1,6-2.2,9-3.2C110.9,435.1,99.9,403.7,89,372.3z       M105.1,366.9c-3.6,1.2-7.2,2.3-10.8,3.6c10.7,31.5,21.4,62.9,32,94.4c3-1,6-2,9.1-3C125.3,430.3,115.2,398.5,105.1,366.9z       M108.8,318.4c-3.9,1.1-7.8,2.3-11.7,3.5c14.3,46.2,28.6,92.4,42.8,138.5c3-0.9,6.1-1.8,9.1-2.7      C135.7,411.3,122.3,364.8,108.8,318.4z M137.8,357.4c-3.6,0.9-7.3,1.9-10.9,2.9c8.9,32,17.9,64,26.8,96c3.1-0.9,6.1-1.7,9.2-2.5      C154.5,421.8,146.1,389.7,137.8,357.4z M154.3,353.4c-3.7,0.8-7.3,1.7-11,2.6c8.1,32.2,16.1,64.5,24.2,96.7      c3.1-0.8,6.1-1.5,9.2-2.2C169.2,418.3,161.7,385.8,154.3,353.4z M170.8,349.8c-3.7,0.7-7.4,1.5-11,2.3      c7.2,32.4,14.4,64.9,21.5,97.3c3.1-0.7,6.2-1.3,9.3-2C184,415.1,177.4,382.4,170.8,349.8z M187.4,346.8c-3.7,0.6-7.4,1.3-11.1,2      c6.3,32.6,12.6,65.3,18.9,97.9c3.1-0.6,6.2-1.2,9.3-1.7C198.8,412.3,193.1,379.4,187.4,346.8z M204.1,344.1      c-3.7,0.5-7.4,1.1-11.1,1.7c5.4,32.8,10.8,65.6,16.2,98.4c3.1-0.5,6.2-1,9.3-1.4C213.7,409.8,208.9,376.9,204.1,344.1z       M220.8,341.8c-3.7,0.4-7.4,0.9-11.2,1.4c4.5,32.9,9,65.8,13.5,98.8c3.1-0.4,6.2-0.8,9.4-1.2      C228.6,407.8,224.7,374.8,220.8,341.8z M237.6,340.2c-3.7,0.3-7.5,0.7-11.2,1.1c3.6,33,7.2,66.1,10.8,99.1      c3.1-0.3,6.3-0.7,9.4-0.9C243.6,406.3,240.6,373.3,237.6,340.2z M254.4,338.8c-3.7,0.2-7.5,0.5-11.2,0.8      c2.7,33.1,5.4,66.2,8.1,99.4c3.1-0.3,6.3-0.5,9.4-0.7C258.6,405.2,256.5,371.9,254.4,338.8z M271.2,337.9      c-3.7,0.1-7.5,0.3-11.2,0.5c1.8,33.2,3.6,66.4,5.4,99.5c3.1-0.2,6.3-0.3,9.4-0.4C273.6,404.4,272.4,371.2,271.2,337.9z       M287.7,292.3c-4,0-8,0.1-12,0.2c1.3,48.3,2.6,96.6,3.9,144.9c3.1-0.1,6.3-0.1,9.4-0.2C288.5,388.9,288.1,340.7,287.7,292.3z       M304.9,337.7c-3.7-0.1-7.5-0.1-11.2-0.1c0,33.2,0,66.5,0,99.7c3.1,0,6.3,0,9.4,0.1C303.7,404.2,304.3,370.9,304.9,337.7z       M321.7,338.3c-3.7-0.2-7.5-0.3-11.2-0.4c-0.9,33.2-1.8,66.4-2.7,99.7c3.1,0.1,6.3,0.2,9.4,0.3      C318.7,404.7,320.2,371.4,321.7,338.3z M338.6,339.3c-3.7-0.3-7.5-0.5-11.2-0.7c-1.8,33.2-3.6,66.4-5.4,99.5      c3.1,0.2,6.3,0.4,9.4,0.6C333.7,405.4,336.2,372.3,338.6,339.3z M355.4,340.7c-3.7-0.4-7.5-0.7-11.2-1      c-2.7,33.1-5.4,66.2-8.1,99.4c3.1,0.3,6.3,0.5,9.4,0.9C348.7,406.8,352,373.8,355.4,340.7z M372.1,342.5      c-3.7-0.5-7.4-0.9-11.2-1.3c-3.6,33-7.2,66.1-10.8,99.1c3.1,0.3,6.3,0.7,9.4,1.1C363.7,408.4,367.9,375.5,372.1,342.5z       M388.8,344.9c-3.7-0.6-7.4-1.1-11.1-1.6c-4.5,32.9-9,65.8-13.5,98.8c3.1,0.4,6.2,0.9,9.3,1.4      C378.6,410.5,383.7,377.8,388.8,344.9z M405.5,347.8c-3.7-0.7-7.4-1.3-11.1-1.9c-5.4,32.8-10.8,65.6-16.2,98.4      c3.1,0.5,6.2,1.1,9.3,1.6C393.5,413.2,399.5,380.4,405.5,347.8z M422.1,351.1c-3.7-0.8-7.4-1.5-11.1-2.2      c-6.3,32.6-12.6,65.3-18.9,97.9c3.1,0.6,6.2,1.2,9.3,1.9C408.3,416.1,415.2,383.5,422.1,351.1z M438.6,354.8      c-3.7-0.9-7.3-1.7-11-2.5c-7.2,32.4-14.4,64.9-21.5,97.3c3.1,0.7,6.2,1.4,9.2,2.1C423.1,419.3,430.8,387.1,438.6,354.8z       M466.8,315.2c-3.9-1.1-7.8-2.1-11.7-3.1c-11.7,46.9-23.4,93.8-35.2,140.7c3.1,0.8,6.1,1.6,9.2,2.4      C441.7,408.5,454.2,361.8,466.8,315.2z M471.3,363.5c-3.6-1.1-7.2-2.1-10.9-3.1c-8.9,32-17.9,64-26.8,96      c3.1,0.9,6.1,1.7,9.1,2.6C452.3,427.3,461.8,395.4,471.3,363.5z M487.6,368.7c-3.6-1.2-7.2-2.3-10.8-3.5      c-9.8,31.7-19.6,63.5-29.4,95.2c3,0.9,6.1,1.9,9.1,2.9C466.8,431.8,477.2,400.3,487.6,368.7z M503.7,374.3      c-3.6-1.3-7.1-2.5-10.7-3.8c-10.7,31.5-21.4,62.9-32,94.4c3,1,6,2.1,9,3.2C481.2,436.8,492.5,405.4,503.7,374.3z M519.7,380.3      c-3.5-1.4-7.1-2.7-10.7-4.1c-11.5,31.2-23.1,62.3-34.6,93.5c3,1.1,6,2.2,8.9,3.4C495.5,442.2,507.6,411.2,519.7,380.3z       M535.6,386.8c-3.5-1.5-7-2.9-10.6-4.4c-12.4,30.8-24.8,61.7-37.2,92.5c3,1.2,5.9,2.4,8.9,3.7      C509.7,447.9,522.6,417.3,535.6,386.8z M551.3,393.7c-3.5-1.6-7-3.1-10.5-4.7c-13.2,30.5-26.5,60.9-39.7,91.4      c2.9,1.3,5.9,2.6,8.8,3.9C523.7,454.1,537.5,423.8,551.3,393.7z M566.9,401.1c-3.4-1.7-6.9-3.4-10.4-5      c-14.1,30.1-28.2,60.2-42.3,90.3c2.9,1.4,5.8,2.8,8.7,4.2C537.6,460.7,552.3,430.8,566.9,401.1z M582.3,408.8      c-3.4-1.8-6.8-3.6-10.3-5.3c-14.9,29.7-29.8,59.4-44.8,89.1c2.9,1.4,5.8,2.9,8.6,4.4C551.3,467.7,566.9,438.3,582.3,408.8z       M597.6,417.2c-3.4-1.9-6.8-3.8-10.1-5.6c-15.7,29.3-31.5,58.5-47.2,87.8c2.8,1.5,5.7,3.1,8.5,4.7      C565,475.2,581.3,446.2,597.6,417.2z M636,387.1c-3.6-2.1-7.2-4.2-10.8-6.3c-24.1,41.9-48.2,83.8-72.3,125.7      c2.8,1.6,5.6,3.3,8.4,4.9C586.2,469.9,611.1,428.5,636,387.1z"/>
			</defs>
			<clipPath id="SVGID_2_">
				<use xlink:href="#SVGID_1_" overflow="visible"/>
			</clipPath>
	
			<path  id="chargeStroke" clip-path="url(#SVGID_2_)" fill="none"  stroke="#09CC61" stroke-width="180" stroke-miterlimit="10" d="M-15.7,452.8c0,0,306.6-188,615-4.5"/>
		</g>
	</g>
</g>
</svg>
    <div class="inputBox">
      <h3><b id="displayText">{{gaugeValue}}</b>%</h3>
      
    </div>
    <br>
    <br>

    <div class="inputBox">
      
      <div class="inputRow">
      <p>拖曳下面的slide </p> 
        <input
            type="range"
            min="0"
            max="100"
            step="1"
            value="cap"
            ng-model="cap"
            
            ng-Change="gaugeChange()" />
      <label>{{cap}}%</label>
      </div>
      <div class="inputRow">
         <p>Automate</p>
      <button ng-click="gaugeAuto()" class="buttonAuto">Auto</button>
          <button ng-click="gaugeStop()" id="buttonStop">Stop</button>
      </div>

   

    </div>
  </div>
</div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js'></script>
<script src='http://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=12'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/sgfslong/anuglarsvgtweenmax-ALOWGy */
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

@font-face {
    font-family: 'timeburner';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-66/TimeBurner.eot');
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-66/TimeBurner.eot?#iefix') format('embedded-opentype'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-66/TimeBurner.woff2') format('woff2'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-66/TimeBurner.woff') format('woff'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-66/TimeBurner.ttf') format('truetype'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-66/TimeBurner.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'timeburner-bold';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-66/TimeBurner-Bold.eot');
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-66/TimeBurner-Bold.eot?#iefix') format('embedded-opentype'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-66/TimeBurner-Bold.woff2') format('woff2'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-66/TimeBurner-Bold.woff') format('woff'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-66/TimeBurner-Bold.ttf') format('truetype'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-66/TimeBurner-Bold.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

* {
  margin:0;
}

html, body {
  width:100%;
  height:100%;

  color:#DCFBFF;
  font-family: 'timeburner', sans-serif;
}

.gradBody {
  width:100%;
  height:100%;
  padding-top:20px;
  box-sizing: border-box;
  background: #093f40; /* Old browsers */
background: -moz-linear-gradient(-45deg, #093f40 0%, #486666 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #093f40 0%,#486666 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #093f40 0%,#486666 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

h4 {
  margin:0;
  font-size:2.35em;
  letter-spacing:.1em;
  font-family:'timeburner-bold', sans-serif;
}

h3 {
  margin:0;
  font-size:2.4em;
}

.wrapper {
  width:60%;
  margin:0px auto;
  background:rgba(5, 33, 33, .6);
  padding: 20px 70px;
      box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}

.wrapper2 {
  margin: 0 auto;
  width:80%;
  padding:5% 10%;
}

.inputBox {
  text-align:center;
}



.scaleUp {
  width:100%;
}

input {
  background-color: transparent;
  border:none;
  border-bottom: 2px solid rgba(83,241,252,1);
  color: #BFBCBC;
  font-size:1em;
  width:80px;
  text-align:center;
}

input:focus {
  outline: none;
  mar-bottom:10px;
  -moz-user-select:none; /*火狐*/
  -webkit-user-select:none; /*webkit浏览器*/
  -ms-user-select:none; /*IE10*/
  -khtml-user-select:none; /*早期浏览器*/
  user-select:none;
}

button {
  background:#DCFBFF;
  border:none;
  border-radius:0px;
  padding:8px;
  margin:10px;
  font-size:.8em;
  cursor:pointer;
  -webkit-box-shadow: 0px 0px 5px 1px rgba(83,241,252,1);
}

.inputRow {
  display:inline-block;
  width:45%;
}
 
#buttonStop {
  display:none;
}

#buttonAuto {
  transition: 2s;
}


/*Downloaded from https://www.codeseek.co/sgfslong/anuglarsvgtweenmax-ALOWGy */
/*缺点 DrawSVGPlugin这个是要花钱的*/
var app = angular.module("gaugeApp", []);

app.controller("gaugeInput", function($scope, $timeout) {
$scope.gaugeValue=100;
  $scope.cap=100;
    $scope.gaugeChange = function() {
      $scope.gaugeValue = $scope.cap + '';
      var charge = $scope.gaugeValue + '% 0%';
      TweenMax.to("#chargeStroke", 2, {
        drawSVG: charge
      });

      console.log(charge);
      console.log($scope.cap);
      console.log($scope.gaugeValue);

      if ($scope.cap <= 33) {
        console.log("I'm still here");
        TweenMax.to("#chargeStroke", 1, {
          stroke: "#CC1A09",
          delay: 1
        });

      } else {
        TweenMax.to("#chargeStroke", 1, {
          stroke: "#09CC61",
          delay: 1
        })
      }
    }

    $scope.gaugeAuto = function autoAni() {

      function dial() {
        
        
         $scope.gaugeStop = function() {
 document.getElementById("chargeStroke").style.stroke = "09CC61";             document.getElementById("displayText").style.display = "none"; 
        
           $timeout(  function update() {
        $scope.gaugeValue = null; 
      }, 3500)
          TweenMax.set('#chargeStroke', {
              clearProps: "all",
              stroke: "#09CC61"
            });
            tl.stop();
            autoOn = false;
            
            TweenMax.to('#buttonStop', .3, {
            opacity: 0, delay:.3

          });
             TweenMax.set('#buttonStop', {
           display:"none", delay:.6

          });
          }
        document.getElementById("displayText").style.display = "inline-block"; 
        var charge = Math.floor((Math.random() * 100) + 1) + "";
        var chargeText = charge + "% 0%";
$scope.gaugeValue = ""; 
       $timeout(  function update() {
        $scope.gaugeValue = charge; 
      }, 3500)
        var tl = new TimelineMax();
        tl.to("#chargeStroke", 2, {
          drawSVG: chargeText,
          onComplete: dial,
          delay: 2
        })
        if (charge <= 33) {
          TweenMax.to("#chargeStroke", 1, {
            stroke: "#CC1A09",
            delay: 3
          });

        } else {
          TweenMax.to("#chargeStroke", 1, {
            stroke: "#09CC61",
            delay: 3
          })
        }
 
      }
      
     
      
     var autoOn = true;
     if (autoOn) {
          TweenMax.set('#buttonStop', {
           display:"inline-block", opacity:0, delay:.3, y:30

          });
          TweenMax.to('#buttonStop', .5, {
            opacity: 1, delay:.3, y:0

          });}  

      dial();
      

    }

  }

)

Comments