Allocation
A circle divides into three wedges that push slightly outward in different directions before reuniting into a whole.
CSS
Timesheet
15 animationsApprove
A grid of timesheet entries is crossed by a sweeping checkmark, which turns each entry node green in its wake.
CSSBatch
A column of four horizontal bars slides vertically into a stacked grid, aligning and locking together.
CSSEdit
A tiny pencil icon sweeps along the perimeter of a clock face, shifting an arc segment to adjust logged hours.
CSSHourglass
An hourglass icon is drawn as two connected triangles, with particles cascading from the top half to accumulate in the bottom.
CSSIdle
A flat baseline segment ripples with a slow, gentle sine wave that dampens back to a resting line to show inactive time.
CSSInterval
A linear row of billable blocks illuminates from left to right to record logged progress.
CSSLog
A calendar grid icon animates as one day cell fills with a solid color from bottom to top to record hours.
CSSReminder
A clock face contains a central attention beacon that slowly pulses to signal a pending submission.
CSSRoster
Horizontal timelines slide sideways to align blocks into vacant slots, representing structured shift scheduling.
CSSSync
Two overlapping calendar day blocks rotate slightly as a circular refresh arrow spins at their center.
CSSThreshold
A horizontal progress bar fills from left to right until it crosses a vertical dashed marker, where the excess bar flashes.
CSSTimer
A thin circular ring has a radial line sweeping like a clock hand while a central colon pulses steadily.
CSSToggle
A play triangle morphs into two parallel pause bars, which expand outwards and shrink back to trigger a ripple.
CSSUtilization
A split ring compares billable versus idle intervals, expanding its active sector rhythmically.
CSS