scroll-progress-bar/index.html at master · Coding-Latam/scroll-progress-bar · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mi articulo</title>
    <link rel="stylesheet" href="styles.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Lato&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <header>
      <div class="progress-container">
        <div class="progress-bar" id="progress-bar"></div>
      </div>
    </header>
    <article class="content">
      <h1>
        ¿Qué estás aprendiendo hoy?
      </h1>
      <img src="/image.jpeg" alt="" />
      <p>
        Hola! Primero que nada espero que tú y tu familia se encuentren bien,
        siguiendo las recomendaciones de las instituciones de salud durante esta
        pandemia.
      </p>
      <p>
        Si bien este virus nos ha impactado de diferentes maneras, también hemos
        ganado algo que de repente aun no te has dado cuenta: TIEMPO
      </p>
      <p>
        El tiempo es para mí el único asset no renovable que tenemos como seres
        humanos. Ni todo el dinero del mundo puede comprar tiempo. En base a
        esto, ¿en qué estás usando este tiempo?¿Estás viendo Netflix todas las
        noches?¿Te la pasas mirando tiktoks y memes?¿Has leído algún
        libro?¿Aprendiste algo nuevo?
      </p>
      <p>
        Estamos en una situación en la cual el mundo esta en stand by, pero tú
        no tienes por qué estarlo. Tantas veces nos quejábamos que “no teníamos
        tiempo” para hacer cosas que siempre se quedaban pendientes. Ese curso,
        esa idea de negocio que querías lanzar, etc.
      </p>
      <p>
        Hoy, quiero compartir contigo una lista de cursos GRATIS que puedes
        llevar y aplicar durante la cuarentena. Aprovecha tu tiempo, para que
        cuando la nueva “normalidad” llegue, estés mejor preparado. Depende sólo
        de ti!
      </p>
      <p>
        El tiempo es para mí el único asset no renovable que tenemos como seres
        humanos. Ni todo el dinero del mundo puede comprar tiempo. En base a
        esto, ¿en qué estás usando este tiempo?¿Estás viendo Netflix todas las
        noches?¿Te la pasas mirando tiktoks y memes?¿Has leído algún
        libro?¿Aprendiste algo nuevo?
      </p>
      <p>
        El tiempo es para mí el único asset no renovable que tenemos como seres
        humanos. Ni todo el dinero del mundo puede comprar tiempo. En base a
        esto, ¿en qué estás usando este tiempo?¿Estás viendo Netflix todas las
        noches?¿Te la pasas mirando tiktoks y memes?¿Has leído algún
        libro?¿Aprendiste algo nuevo?
      </p>
      <p>
        El tiempo es para mí el único asset no renovable que tenemos como seres
        humanos. Ni todo el dinero del mundo puede comprar tiempo. En base a
        esto, ¿en qué estás usando este tiempo?¿Estás viendo Netflix todas las
        noches?¿Te la pasas mirando tiktoks y memes?¿Has leído algún
        libro?¿Aprendiste algo nuevo?
      </p>
      <p>
        El tiempo es para mí el único asset no renovable que tenemos como seres
        humanos. Ni todo el dinero del mundo puede comprar tiempo. En base a
        esto, ¿en qué estás usando este tiempo?¿Estás viendo Netflix todas las
        noches?¿Te la pasas mirando tiktoks y memes?¿Has leído algún
        libro?¿Aprendiste algo nuevo?
      </p>
      <p>
        El tiempo es para mí el único asset no renovable que tenemos como seres
        humanos. Ni todo el dinero del mundo puede comprar tiempo. En base a
        esto, ¿en qué estás usando este tiempo?¿Estás viendo Netflix todas las
        noches?¿Te la pasas mirando tiktoks y memes?¿Has leído algún
        libro?¿Aprendiste algo nuevo?
      </p>
      <p>
        El tiempo es para mí el único asset no renovable que tenemos como seres
        humanos. Ni todo el dinero del mundo puede comprar tiempo. En base a
        esto, ¿en qué estás usando este tiempo?¿Estás viendo Netflix todas las
        noches?¿Te la pasas mirando tiktoks y memes?¿Has leído algún
        libro?¿Aprendiste algo nuevo?
      </p>
      <p>
        El tiempo es para mí el único asset no renovable que tenemos como seres
        humanos. Ni todo el dinero del mundo puede comprar tiempo. En base a
        esto, ¿en qué estás usando este tiempo?¿Estás viendo Netflix todas las
        noches?¿Te la pasas mirando tiktoks y memes?¿Has leído algún
        libro?¿Aprendiste algo nuevo?
      </p>
      <p>
        El tiempo es para mí el único asset no renovable que tenemos como seres
        humanos. Ni todo el dinero del mundo puede comprar tiempo. En base a
        esto, ¿en qué estás usando este tiempo?¿Estás viendo Netflix todas las
        noches?¿Te la pasas mirando tiktoks y memes?¿Has leído algún
        libro?¿Aprendiste algo nuevo?
      </p>
      <p>
        El tiempo es para mí el único asset no renovable que tenemos como seres
        humanos. Ni todo el dinero del mundo puede comprar tiempo. En base a
        esto, ¿en qué estás usando este tiempo?¿Estás viendo Netflix todas las
        noches?¿Te la pasas mirando tiktoks y memes?¿Has leído algún
        libro?¿Aprendiste algo nuevo?
      </p>
      <p>
        El tiempo es para mí el único asset no renovable que tenemos como seres
        humanos. Ni todo el dinero del mundo puede comprar tiempo. En base a
        esto, ¿en qué estás usando este tiempo?¿Estás viendo Netflix todas las
        noches?¿Te la pasas mirando tiktoks y memes?¿Has leído algún
        libro?¿Aprendiste algo nuevo?
      </p>
      <p>
        El tiempo es para mí el único asset no renovable que tenemos como seres
        humanos. Ni todo el dinero del mundo puede comprar tiempo. En base a
        esto, ¿en qué estás usando este tiempo?¿Estás viendo Netflix todas las
        noches?¿Te la pasas mirando tiktoks y memes?¿Has leído algún
        libro?¿Aprendiste algo nuevo?
      </p>
      <p>
        El tiempo es para mí el único asset no renovable que tenemos como seres
        humanos. Ni todo el dinero del mundo puede comprar tiempo. En base a
        esto, ¿en qué estás usando este tiempo?¿Estás viendo Netflix todas las
        noches?¿Te la pasas mirando tiktoks y memes?¿Has leído algún
        libro?¿Aprendiste algo nuevo?
      </p>
      <p>
        El tiempo es para mí el único asset no renovable que tenemos como seres
        humanos. Ni todo el dinero del mundo puede comprar tiempo. En base a
        esto, ¿en qué estás usando este tiempo?¿Estás viendo Netflix todas las
        noches?¿Te la pasas mirando tiktoks y memes?¿Has leído algún
        libro?¿Aprendiste algo nuevo?
      </p>
      <p>
        El tiempo es para mí el único asset no renovable que tenemos como seres
        humanos. Ni todo el dinero del mundo puede comprar tiempo. En base a
        esto, ¿en qué estás usando este tiempo?¿Estás viendo Netflix todas las
        noches?¿Te la pasas mirando tiktoks y memes?¿Has leído algún
        libro?¿Aprendiste algo nuevo?
      </p>
    </article>
    <script>
      window.onscroll = function () {
        loadProgressBar();
      };

      function loadProgressBar() {
        var winScroll =
          document.body.scrollTop || document.documentElement.scrollTop;
        var height =
          document.documentElement.scrollHeight -
          document.documentElement.clientHeight;
        var scrolled = (winScroll / height) * 100;
        document.getElementById("progress-bar").style.width = scrolled + "%";
      }
    </script>
  </body>
</html>