Login About Gallery
Circular Progress Bar
COMMENT
This shortcut is a function to generate a circular progress bar in PNG format with the percentage, font, colors and dimensions indicated by the user — @atnbueno (2021-10-18) - The shortcut expects to receive a dictionary like the one inside the "if" as input - Without input, the “if” dictionary is used (allowing the user to edit it) and the resulting image is displayed at the end - The inner-size can be zero if you only want a solid circular progress - Examples of valid colors: green, #0F0, #FF00FF, rgb(255, 0, 255) - See https://developer.apple.com/fonts/system-fonts/ for typefaces available in iOS RoutineHubUpdate Current Version: "1.0.2" RoutineHub ID: "10331" RoutineHubUpdate
SCRIPTING
If
Shortcut Input
does not have any value
DICTIONARY
<inline variable>
<inline variable>
<inline variable>
#333
Ask Each Time
<inline variable>
<inline variable>
<inline variable>
<inline variable>
<inline variable>
<inline variable>
<inline variable>
<inline variable>
<inline variable>
<inline variable>
<inline variable>
<inline variable>
Otherwise
SCRIPTING
Get dictionary from
Shortcut Input
End If
VARIABLES
Set variable
Parameters
to
Resultado de la acción Si
TEXT
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> /* * A parametrized pure CSS circular progress bar * by Antonio Bueno github.com/atnbueno * https://gist.github.com/atnbueno/f5f7477443d39e46f0daebc855c8701f * * The content of this file is licensed under the terms * of the MIT license: opensource.org/licenses/MIT * * Inspired by dottedsquirrel.com/circular-progress-css */ html, body { /* Value */ --percentage:
Parameters
; /* Colors */ --background:
Parameters
; --canvas:
Parameters
; --foreground:
Parameters
; --text:
Parameters
; /* Others */ --font:
Parameters
; --inner-size:
Parameters
px; --outer-size:
Parameters
px; background-color: var(--canvas); display: grid; font-family: var(--font); height: 100%; margin: 0; padding: 0; place-items: center; text-align: center; } .outer { height: var(--outer-size); position: relative; transform: scale(0.3); width: var(--outer-size); } .left-half, .right-half { background: var(--background); border-radius: 50%; clip: rect(0px, var(--outer-size), var(--outer-size), calc(var(--outer-size) / 2)); height: 100%; position: absolute; width: 100%; } .right-half { transform: rotate(180deg); } .progress { background: var(--foreground); border-radius: 50%; clip: rect(0px, calc(var(--outer-size) / 2), var(--outer-size), 0px); height: 100%; position: absolute; width: 100%; } .left-half .progress { transform: rotate(clamp(0deg, var(--percentage) * 3.6deg, 180deg)); } .right-half .progress { transform: rotate(clamp(0deg, (var(--percentage) - 50) * 3.6deg, 180deg)); } .inner, .percentage { left: 50%; position: absolute; top: 50%; } .inner { background-color: var(--canvas); border-radius: 50%; height: var(--inner-size); margin: calc(var(--inner-size) / -2) 0 0 calc(var(--inner-size) / -2); width: var(--inner-size); } .percentage { color: var(--text); font-size: calc(var(--inner-size) / 3); transform: translate(-50%, -50%); } .percentage:after { content: counter(percentage) '%'; counter-reset: percentage clamp(0, var(--percentage), 100); } </style> <title>A parametrized pure-CSS circular progress bar</title> </head> <body> <div class="outer"> <div class="left-half"> <div class="progress"></div> </div> <div class="right-half"> <div class="progress"></div> </div> <div class="inner"></div> <div class="percentage"></div> </div> </body> </html>
DOCUMENTS
Make rich text from
Texto
DOCUMENTS
Make PDF from
De HTML a RTF
Include
Single Page
Page No.
1
MEDIA
Convert
PDF
to
PNG
Options Under Construction
MEDIA
Position
Center
DOCUMENTS
Replace
#
with
World
in
Parameters
-and-
Parameters
-on-
Parameters
-
Parameters
px-
Parameters
pc
Case Sensitive
Regular Expression
SCRIPTING
If
Shortcut Input
does not have any value
SCRIPTING
End If

Showcuts

Magic Vars

Screenshot

Submitted Anonymously 16 days ago

Visit iCloud (iOS)

Copy iCloud Link

Scan QR Code

0