an app to share curated trails
sidetrail.app
1import "./WalkingLoading.css";
2
3export function WalkingLoading() {
4 return (
5 <div className="WalkingLoading">
6 {Array.from({ length: 2 }).map((_, i) => (
7 <div key={i} className="WalkingLoading-pill">
8 <div className="WalkingLoading-content">
9 {/* Title */}
10 <div
11 className="skeleton"
12 style={{
13 width: "60%",
14 height: "1.125rem",
15 marginBottom: "0.5rem",
16 borderRadius: "6px",
17 }}
18 />
19 {/* Subtitle */}
20 <div
21 className="skeleton"
22 style={{
23 width: "40%",
24 height: "0.8125rem",
25 marginBottom: "1rem",
26 borderRadius: "4px",
27 }}
28 />
29 {/* Progress dots */}
30 <div className="WalkingLoading-progress">
31 {Array.from({ length: 6 }).map((_, dotIdx) => (
32 <div key={dotIdx} className="WalkingLoading-dotContainer">
33 <div
34 className="skeleton"
35 style={{
36 width: "12px",
37 height: "12px",
38 borderRadius: "50%",
39 }}
40 />
41 {dotIdx < 5 && (
42 <div
43 className="skeleton"
44 style={{
45 width: "20px",
46 height: "2px",
47 margin: "0 4px",
48 borderRadius: "1px",
49 }}
50 />
51 )}
52 </div>
53 ))}
54 </div>
55 </div>
56 </div>
57 ))}
58 </div>
59 );
60}