SHARE
TWEET

Untitled

a guest Nov 9th, 2019 82 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2.     <head>
  3. <style>
  4.     .svg-item {
  5.     width: 100%;
  6.     font-size: 16px;
  7.     margin: 0 auto;
  8.     animation: donutfade 1s;
  9. }
  10.  
  11. @keyframes donutfade {
  12.   /* this applies to the whole svg item wrapper */
  13.     0% {
  14.         opacity: .2;
  15.     }
  16.     100% {
  17.         opacity: 1;
  18.     }
  19. }
  20.  
  21. @media (min-width: 992px) {
  22.     .svg-item {
  23.         width: 80%;
  24.     }
  25. }
  26.  
  27. .d-ring {
  28.     stroke: #EBEBEB;
  29. }
  30.  
  31.  
  32. .d-seg {
  33.     stroke: #ed1e79;
  34.     animation: donut3 3s;
  35. }
  36.  
  37. .d-percent {
  38.     animation: donutfadelong 1s;
  39. }
  40.  
  41. @keyframes donutfadelong {
  42.     0% {
  43.         opacity: 0;
  44.     }
  45.     100% {
  46.         opacity: 1;
  47.     }
  48. }
  49.  
  50. .donut-text {
  51.     font-family: Arial, Helvetica, sans-serif;
  52.     fill: #FF6200;
  53. }
  54. .donut-text-3 {
  55.     fill: #ed1e79;
  56. }
  57.  
  58.  
  59. .d-percent {
  60.     font-size: 0.5em;
  61.     line-height: 1;
  62.     transform: translateY(0.5em);
  63.     font-weight: bold;
  64. }
  65.  
  66. .donut-data {
  67.     font-size: 0.12em;
  68.     line-height: 1;
  69.     transform: translateY(0.5em);
  70.     text-align: center;
  71.     text-anchor: middle;
  72.     color:#666;
  73.     fill: #666;
  74.     animation: donutfadelong 1s;
  75. }
  76.  
  77. @keyframes donut3{
  78.     0% {
  79.         stroke-dasharray: 0, 100;
  80.     }
  81.     100% {
  82.         stroke-dasharray: 80, 20;
  83.     }
  84. }
  85.  
  86.  
  87.  
  88. /* ---------- */
  89. /* just for this presentation */
  90. html { text-align:center; }
  91. .svg-item {
  92.   max-width:30%;
  93.   display:inline-block;
  94. }
  95. </style>
  96.     </head>
  97.     <body>
  98.        
  99. <div class="svg-item">
  100.   <svg width="100%" height="100%" viewBox="0 0 40 40" class="donut">
  101.     <circle class="donut-hole" cx="20" cy="20" r="15.91549430918954" fill="#fff"></circle>
  102.     <circle class="d-ring" cx="20" cy="20" r="15.91549430918954" fill="transparent" stroke-width="3.5"></circle>
  103.     <circle class="dd-seg d-seg" cx="20" cy="20" r="15.91549430918954" fill="transparent" stroke-width="3.5" stroke-dasharray="80 20" stroke-dashoffset="25"></circle>
  104.     <g class="donut-text donut-text-3">
  105.  
  106.       <text y="50%" transform="translate(0, 2)">
  107.         <tspan x="50%" text-anchor="middle" class="d-percent">1%</tspan>  
  108.       </text>
  109.       <text y="60%" transform="translate(0, 2)">
  110.         <tspan x="50%" text-anchor="middle" class="donut-data">50 widgets</tspan>  
  111.       </text>
  112.     </g>
  113.   </svg>
  114. </div>
  115.     </body>
  116. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top